如何显示所有猫头鹰赛车的物品

Question

我正在使用猫头鹰旋转频率，它运行良好，但是我不知道如何显示所有物品在强标上

这是我的代码

<div class="pr-t-w mt-30">
        <div class="title float-left"></div>
        <a id="show_all" class="show_all float-right" href="#">All 15</a>
    </div>
    <div class="owl-carousel owl-theme">
        <div class="item">
            <a th:href="@{/some_page/item}">
            <div class="info">
                    <strong>Item</strong>
                    <strong>Item1</strong>
                    <strong>Item2</strong>
                    <strong>Item3</strong>
                    <strong>Item4</strong>
                    <strong>Item5</strong>
                    <strong>Item6</strong>
                </div>
            </a>
        </div>
    </div>

和我的脚本

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/owl.carousel.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    $('.owl-carousel').owlCarousel({
        margin: 15,
        loop: true,
        autoWidth: true,
        items: 4
    })
    /*]]>*/
</script>

它应该在单击上所有项目

 <a id="show_all" class="show_all float-right" href="#">All 15</a>

Answer 1

我找到了问题的解决方案

我添加了新的链接以添加class =" owl-carousel owl-theme grid"到#Apertment，并为此新类编写了CSS代码

    <div class="pr-t-w mt-30">
        <div class="title float-left"></div>
        <a id="show_all" onclick="show_all" href="#">All 15</a>
        <a id="hide_all" hidden="hidden" onclick="hide_all()" href="#" >carousel</a>
    </div>
    <div id="apartment" class="owl-carousel owl-theme">
        <div class="item">
            <a th:href="@{/some_page/item}">
            <div class="info">
                    <strong>Item</strong>
                    <strong>Item1</strong>
                    <strong>Item2</strong>
                    <strong>Item3</strong>
                    <strong>Item4</strong>
                    <strong>Item5</strong>
                    <strong>Item6</strong>
                </div>
            </a>
        </div>
    </div>

这是我的脚本

<script th:inline="javascript">
    /*<![CDATA[*/
    $('#apartments').owlCarousel({
        margin: 15,
        loop: false,
        autoWidth: true,
        items: 4
    })
    function show_all() {
        $('#apartments').removeClass('owl-carousel owl-theme').addClass('owl-carousel owl-theme grid');
        $('#show_all').prop("hidden", true);
        $('#hide_all').prop("hidden", false);
    }
    function hide_all() {
        $('#apartments').removeClass("owl-carousel owl-theme grid").addClass('owl-carousel owl-theme');
        $('#show_all').prop("hidden", false);
        $('#hide_all').prop("hidden", true);
    }
    /*]]>*/
</script>

和CSS

.owl-carousel.grid .owl-stage {
     transform: none !important;
     width: 100% !important;
     display: flex;
     flex-wrap: wrap;
 }
.owl-carousel.grid .owl-item {
    margin: 0 3% 20px !important;
    width: 44%!important;
}
.owl-carousel.grid .owl-item .item {
    margin: 0 auto;
}
@media screen and (max-width: 992px) {
    .owl-carousel.grid .owl-carousel .owl-item {
        width: 46% !important;
        margin: 0 2% 20px !important;
        text-align: center;
    }
}