Show half of the other item on Owl Carousel

user_2616438 0
Viewed 22228

Im trying to display part of the other item on the left side and display full item on the right side using owl carousel.

Per each item I have a banner image and the text, which are split using the bootstrap grid columns.

I was able to achieve the partial display using stagepadding: 200 and to display the partial image only on the left side I used right:-200px in css on .owl-stage class.

Now, the problem is that on the left side I need to display the banner image of that partial slide, not the text...

owl slider has the active class, so with css I tried to hide that text column when it is NOT active... it worked, but all I see is empty space on the left side, it did not push the banner image automatically.

Please view the screenshots What Im trying to achieve: http://imgur.com/MlaN5t5 What I get: http://imgur.com/z1UG6lK

that white space is filled with text column actually, but is hidden with css. I need the banner image from the left to take over that whole space when its partially displayed, but when that specific slide item is active, then I will show both image and text as usual.

This is my js script. 

   jQuery(document).ready(function($) {
    $('.owl-carousel').owlCarousel({
     center: true, 
     autoplay:false, 
     autoplayTimeout:5000,
     autoplayHoverPause:false,
     stagePadding: 150, 
     items:1,           
     loop:true,     
     margin:0,      
     responsive:{
      600:{
       items:1 
      }
     },
     onInitialized : function(){
      if($('.owl-item').first().hasClass('active'))
       $('.owl-prev').hide();
      else
       $('.owl-prev').show();
     } 
    }); 
   });

owl-carousel carousel wordpress jquery
5 Answers

it's very easy "also Works on angular 2+ (ngx-owl-carousel-o)"

just add margin and change number of items from 1 to 1.5 or 1.4 or what you want.

example:-

jQuery(document).ready(function($) {
            $('.owl-carousel').owlCarousel({
                center: true, 
                autoplay:false, 
                autoplayTimeout:5000,
                autoplayHoverPause:false,
                items:1.4,           
                loop:true,     
                margin:20,      
                responsive:{
                    600:{
                        items:1.4 
                    }
                },
                onInitialized : function(){
                    if($('.owl-item').first().hasClass('active'))
                        $('.owl-prev').hide();
                    else
                        $('.owl-prev').show();
                } 
            }); 
        });
user_113041780

If you want to show only the half of the next item in carousel you need to add styles for .owl-wrapper (make sure it has box-sizing: content-box)

.owl-wrapper {
   padding-right: 60px;
}

And wrap your carousel with helper div, so you can make your container 100% width back:

.owl-carousel-helper {
   margin-right: 60px;
}

So html will look like this:

<div class="owl-carousel-helper">
   <div class="owl-carousel">...</div>
</div>
user_80821340

you can try setting the items: 1.5 or any other float value (BUT IT MAKES DARGING HARD)

The Best Way is To Simply Add More Margin

    SlideOptions = {
        dots: false,
        loop: false,
        nav: false,
        items: 2,
        margin: 160,
        rtl: true,
        responsive: false
    };

in my case the width of each element was 250px

so i set a margin of 150

note: you can try setting responsive false or true to manage width yourself

here is the picture of the result: https://i.stack.imgur.com/u7bRX.jpg

user_96143420
Related