Owl Carusel when you rotate the phone screen does not reduce the slides. How to fix?

Hello. The problem is the following. There is a website beautydrugs.ru/m/, installed two owl sliderа one when you rotate the screen adjusts fine, the second makes the slides are just huge, and that would work need to refresh the page. Can someone faced?

$(".two").owlCarousel({
 loop:true, //slider Talklive
 margin:10, //offset from the pattern if you print more than 1
 nav:false, //Disabled navigation
 autoplay:true, //slider AutoPlay
 smartSpeed:2000, //Time of movement of the slide
 autoplayTimeout:4000, //Time shift of the slide
 responsive:{ //Adapt depending on the screen resolution
0:{
items:1
}
}
 });
June 3rd 19 at 20:23
1 answer
June 3rd 19 at 20:25
Try the onResize event represnet it:

var owl = $(".two").owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay:true,
smartSpeed:2000,
autoplayTimeout:4000,
responsive:{
0:{
items:1
}
},
onResize: function() {
owl.trigger('refresh.owl.carousel');
}
});
No, not helps. It somehow makes the image size 14k x 8K and every rotate of the gadget leads to increase the image size to the same value. Here's an example:

To rotate:

5b5041beb94d0937650042.jpeg

After the first rotate:

5b5041cdc97bf348438656.jpeg

After the second rotate:

5b5041dd7b443280071208.jpeg - Eva.Fisher commented on June 3rd 19 at 20:28
Sorry, could not reproduce the problem in the browser, on my phone at all everything is coming apart (I have the old one, so you can not worry about it). Try classes instead of id's for each slider to prescribe. Or maybe another script hurt, photolucida one by one and by process of elimination perhaps something will become clear. - Jocelyn.Jakubowski43 commented on June 3rd 19 at 20:31
I found the solution. The problem was in wrong markup. The fact that I used boostrap and the component bitrix. So here is the markup
<div class="container-fluid"> <div class="row"> <div class="bitrix-wrapper"> <!-- It is this wrapper, and led to such consequences --> <div class="col-12"></div> </div> </div> </div>

I took out <div class="col-12"></div> outside of the component template, and it worked
- Eva.Fisher commented on June 3rd 19 at 20:34

Find more questions by tags JavaScript