Hello! Question on owl carousel: on large screens over 1370 I need to limit the slider width to 1510 pixels. simply adding the width id = "owl-example" max-width equal to 1510px gives nothing, because adaptive carousel width is calculated relative to the screen. How can this be done correctly?

$("#owl-example").owlCarousel({ items: 4, itemsDesktop: [1369, 3], itemsDesktopSmall: [1099, 2], itemsTablet: [768, 2], itemsTabletSmall: [739, 1], itemsMobile: [479, 1], pagination: false, navigation: true, navigationText: ["", ""], autoPlay: true }); 
 .owl-item img { display: block; margin: 0 auto; } .owl-prev { background: url('../../images/prev.png') no-repeat!important; width: 29px; height: 55px; } .owl-next { background: url('../../images/next.png') no-repeat!important; width: 29px; height: 55px; } .owl-theme .owl-controls .owl-buttons div { position: absolute; } .owl-theme .owl-controls .owl-buttons .owl-prev { left: -45px; top: 44%; } .owl-theme .owl-controls .owl-buttons .owl-next { right: -45px; top: 44%; } #owl-example { width: 99%; } 
 <div class="container" id="carousel"> <h3>ПОПУЛЯРНЫЕ БУКЕТЫ</h3> <div id="owl-example" class="owl-carousel"> <div> <? u_img(21); ?> </div> <div> <? u_img(22); ?> </div> <div> <? u_img(23); ?> </div> <div> <? u_img(24); ?> </div> <div> <? u_img(25); ?> </div> <div> <? u_img(26); ?> </div> <div> <? u_img(27); ?> </div> <div> <? u_img(28); ?> </div> </div> </div>

  • if I write like this, the pictures are cropped. #carousel {width: 1345px; margin: 0 auto; } if I set max-width to pictures, then they are dynamically redefined later - Vasya

2 answers 2

You were going in the right direction. For the id = "owl-example" block, you can add max-width: 1510px, but specify only in the settings of the carousel

 responsiveBaseWidth: '#owl-example'

those. in your example it will look like this

 $("#owl-example").owlCarousel({ items: 4, itemsDesktop: [1369, 3], itemsDesktopSmall: [1099, 2], itemsTablet: [768, 2], itemsTabletSmall: [739, 1], itemsMobile: [479, 1], pagination: false, navigation: true, navigationText: ["", ""], autoPlay: true, responsiveBaseWidth: '#owl-example' });

Then the carousel will calculate the width not by the width of the browser window, but by the width of the specified block.

    Try using @media :

     @media (min-width: 1370px) { #owl-example { width: 1510px; } }
    • garbage turns out - the slider just shifts to the left - Vasya