CODEWITHSUNDEEP
javascriptjquerysliderowl-carousel
Shoaib Fareed
Shoaib Fareed

Reputation: 72

owlCarousel show two slides on page load, but on resize it show one

I am using Owl Slider on my page, it is working fine for the desktop view of my page, But when i view my page on mobile, on first load it always show two slides at a time,

On resizing the screen or window it get fine and show the perfect view.

 <div class="banner-container">
 <div id="banner-slider-demo-22" class="owl-carousel owl-banner-carousel" data-slider-id="1">
    <div class="item" style="background:url('MyUrl')  center center no-repeat;background-size:cover;">
        <div class="container" style="position:relative;height:532px;"> 
            <div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
                <h2>neu im shop airride opel insignia a sports tourer</h2>
            </div>
        </div>
    </div>      
    
    <div class="item" style="background:url('MyUrl')  center center no-repeat;background-size:cover;">
        <div class="container" style="position:relative;height:532px;"> 
            <div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
                <h2>neu im shop airride opel insignia a sports tourer</h2>
            </div>
        </div>
    </div>

 </div>
</div>

And this is JS i am using:

 <script type="text/javascript">
require([
    'jquery',
    'owlcarousel',
    'owlcarousel_thumbs'
], function ($) {
    var banner_owl = $("#banner-slider-demo-22");
    banner_owl.owlCarousel({
        items: 1,
        autoWidth: false,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: false,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true,
        navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],
        thumbs: true,
        thumbImage: false,
        thumbsPrerendered: true,
        thumbContainerClass: 'owl-thumbs',
        thumbItemClass: 'owl-thumb-item',
        responsive:{
                768:{
                    items:1,
                    nav: false,
                },
          }
    });
});
</script>

Here is the result image:

enter image description here

But when i resize my screen it get fine like this: enter image description here

Any Quick Solution?

Upvotes: 0

Views: 1244

Answers (1)

Elamurugan
Elamurugan

Reputation: 3214

Probably this will work, you need to add two breakups as stated here https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

<script type="text/javascript">
require([
    'jquery',
    'owlcarousel',
    'owlcarousel_thumbs'
], function ($) {
    var banner_owl = $("#banner-slider-demo-22");
    banner_owl.owlCarousel({
        items: 2,
        autoWidth: false,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: false,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true,
        navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],
        thumbs: true,
        thumbImage: false,
        thumbsPrerendered: true,
        thumbContainerClass: 'owl-thumbs',
        thumbItemClass: 'owl-thumb-item',
        responsive:{
               0:{
                    items:1,
                    nav: false,
                },
                768:{
                    items:2,
                    nav: false,
                },
          }
    });
});
</script>

Upvotes: 1

Related Questions