Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Захват части слайда Owl Carousel (https://javascript.ru/forum/jquery/77388-zakhvat-chasti-slajjda-owl-carousel.html)

Alessio18911 25.04.2019 22:08

Захват части слайда 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
            }
        }
    });
});

рони 25.04.2019 22:28

Цитата:

Сообщение от Alessio18911
$(document).ready(function(){

$(window).on("load", function(){

Alessio18911 25.04.2019 23:09

Рони, спасибо, что
 
спасибо, что быстро отозвались. Но предложенный Вами вариант не спасает - всё равно тот кусочек остаётся (

рони 26.04.2019 00:07

Alessio18911,
1. можно указать размер картинок
2.после инициализации }).trigger("refresh.owl.carousel"); строка 25
3.или так }); $(window).trigger("resize");

Alessio18911 26.04.2019 00:20

Да, действительно, взял второй способ :)
 
Рони, а может, Вы знаете, почему так сделано? Показ кусочка справа - это баг библиотеки или это специально сделали? Для чего?

рони 26.04.2019 00:31

Цитата:

Сообщение от Alessio18911
почему так сделано?

Цитата:

Сообщение от рони
1. можно указать размер картинок

возможно ваш html содержит ошибки, либо css недостаточно проработан и браузеру необходим повторный перерасчёт элементов.

Alessio18911 26.04.2019 00:39

Рони, спасибо!
 
Признателен за исчерпывающие и скорые ответы:)


Часовой пояс GMT +3, время: 02:47.