Сделал простой слайдер. Столкнулся с проблемой: при первичной загрузке страницы он показывает нужное количество слайдов, но обязательно будет кусочек следующего справа, который ещё скрыт:
полоска у правого края слайдера. При этом малейший resize, даже в 1 пиксель, сразу устраняет эту проблему и кусочек исчезает. Скажите, в чём загадка? Как сделать, чтобы этого кусочка никогда не было и слайдер сразу загружался корректно? Обгуглился, но так и не нашёл решение.
Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slider</title>
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.theme.default.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="caroussel owl-carousel owl-theme">
<img src="images/1.jpg" alt="image">
<img src="images/2.jpg" alt="image">
<img src="images/3.jpg" alt="image">
<img src="images/4.jpg" alt="image">
<img src="images/5.jpg" alt="image">
<img src="images/6.jpg" alt="image">
<img src="images/7.jpg" alt="image">
<img src="images/8.jpg" alt="image">
<img src="images/9.jpg" alt="image">
<img src="images/10.jpg" alt="image">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
items: 4,
autoplay: true,
autoplayHoverPause: true,
autoplaySpeed: 1000,
responsive:{
0:{
items:1,
nav: true,
dots: false
},
768:{
items:2
},
1024:{
items:4
},
1440:{
items:4
}
}
});
});
