Ad

How To Show All Items Of Owl-carousel?

- 1 answer

I am using owl carousel it works well, but I don't know how to show all Items within strong tag

here is my code

<div class="pr-t-w mt-30">
        <div class="title float-left"></div>
        <a id="show_all" class="show_all float-right" target="_blank" rel="nofollow noreferrer" href="#">All 15</a>
    </div>
    <div class="owl-carousel owl-theme">
        <div class="item">
            <a th:target="_blank" rel="nofollow noreferrer" 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>

and my script

<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>

it should all items on click

 <a id="show_all" class="show_all float-right" target="_blank" rel="nofollow noreferrer" href="#">All 15</a>
Ad

Answer

I found solution of my problem

I added new link to add class="owl-carousel owl-theme grid" to #apertment and wrote CSS code for this new class

    <div class="pr-t-w mt-30">
        <div class="title float-left"></div>
        <a id="show_all" onclick="show_all" target="_blank" rel="nofollow noreferrer" href="#">All 15</a>
        <a id="hide_all" hidden="hidden" onclick="hide_all()" target="_blank" rel="nofollow noreferrer" href="#" >carousel</a>
    </div>
    <div id="apartment" class="owl-carousel owl-theme">
        <div class="item">
            <a th:target="_blank" rel="nofollow noreferrer" 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>

here is my script

<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>

and 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;
    }
}
Ad
source: stackoverflow.com
Ad