Показать сообщение отдельно
  #1 (permalink)  
Старый 25.04.2019, 22:08
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Захват части слайда Owl Carousel
Сделал простой слайдер. Столкнулся с проблемой: при первичной загрузке страницы он показывает нужное количество слайдов, но обязательно будет кусочек следующего справа, который ещё скрыт: полоска у правого края слайдера. При этом малейший 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
            }
        }
    });
});

Последний раз редактировалось Alessio18911, 25.04.2019 в 22:11.
Ответить с цитированием