There is a slider in it 6 pictures. When reducing the screen size, they become 6-4-3-1, but I have a joint that I can not fix.

More details on the video: https://www.youtube.com/watch?v=xEViU09mOoU

$(".slider").owlCarousel({ loop: true, responsive: { 992: { items: 6, }, 768: { items: 4, }, 480: { items: 3, }, 0: { items: 1, } } }); 
 .partners { min-height: 170px; padding: 32px 0; } .slider { width: 100%; display: block; height: auto; } .item { padding: 0 15px; } .item img { max-width: 100%; } 
 <link href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script> <section class="partners"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="slider"> <div class="item"> <img src="http://s013.radikal.ru/i323/1608/de/2235867e2139.png" alt=""> </div> <div class="item"> <img src="http://s017.radikal.ru/i433/1608/27/f64bc5b5e594.png" alt=""> </div> <div class="item"> <img src="http://s014.radikal.ru/i328/1608/bc/691684d266da.png" alt=""> </div> <div class="item"> <img src="http://s013.radikal.ru/i323/1608/de/2235867e2139.png" alt=""> </div> <div class="item"> <img src="http://s002.radikal.ru/i198/1608/70/c6f8756ad686.png" alt=""> </div> <div class="item"> <img src="http://s013.radikal.ru/i323/1608/de/2235867e2139.png" alt=""> </div> <div class="item"> <img src="http://s017.radikal.ru/i433/1608/27/f64bc5b5e594.png" alt=""> </div> <div class="item"> <img src="http://s014.radikal.ru/i328/1608/bc/691684d266da.png" alt=""> </div> <div class="item"> <img src="http://s013.radikal.ru/i323/1608/de/2235867e2139.png" alt=""> </div> </div> </div> </div> </div> </section>

  • Please describe in words what the joint is? - VenZell
  • In words? When from 6 pictures remains one. She is getting awesome. I do not understand how to fix it. Why is she so huge? - kar man
  • Because by default it is stretched to 100% width. To fix this, you must use the itemsScaleUp: true property. - VenZell
  • Something I do not catch up with where to insert $ (". Slider"). OwlCarousel ({loop: true, responsive: {992: {itemsScaleUp: false, items: 6,}, 768: {itemsScaleUp: false, items: 4,}, 480: {itemsScaleUp: false, items: 3,}, 0: {itemsScaleUp: false, items: 1,}}}); - kar man
  • In the block with 0. The value is true . - VenZell

1 answer 1

Unfortunately, you have to use @media to correct the picture styles on this screen resolution.

Add this to your css file:

 @media (max-width: 479px) { .owl-carousel .owl-item img { width: auto; margin-left: auto; margin-right: auto; } }

You do not need to change your slider settings.