如何显示 owl-carousel 的所有项目？

Question

我正在使用 owl carousel，效果很好，但我不知道如何显示所有项目在强标签内

这是我的代码

<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

我找到了问题的解决方案

我添加了新的 link 以将 class="owl-carousel owl-theme grid" 添加到 #apertment 并为此新 class

编写了 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;
    }
}

如何显示 owl-carousel 的所有项目？

how to show all items of owl-carousel?

javascript

owl-carousel