Show half of the other item on Owl Carousel

Question

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();
					} 
				}); 
			});

HusseiELbadady · Answer

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();
                } 
            }); 
        });

Yurii Chumak · Answer

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>

...

Farhad · Answer

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

Kate · Answer

You may need have a try with these options:

1.autoWidth: true, // Set fixed width for your items;
https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html

2.rtl:true,        // Keep your item stand to the right;
https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

KTriv · Answer

The easiest way to do this is by using stagePadding: 100

jQuery(document).ready(function(){
   jQuery('.owl-carousel').owlCarousel({
      margin: 10,
      loop: true,
      items: 1,
      stagePadding: 100
   });
});

Show half of the other item on Owl Carousel

5 Answers

Add your own answers!

Ask a Question