Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2019, 22:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Alessio18911
$(document).ready(function(){
$(window).on("load", function(){
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2019, 23:09
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Рони, спасибо, что
спасибо, что быстро отозвались. Но предложенный Вами вариант не спасает - всё равно тот кусочек остаётся (
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2019, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alessio18911,
1. можно указать размер картинок
2.после инициализации }).trigger("refresh.owl.carousel"); строка 25
3.или так }); $(window).trigger("resize");
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2019, 00:20
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Да, действительно, взял второй способ :)
Рони, а может, Вы знаете, почему так сделано? Показ кусочка справа - это баг библиотеки или это специально сделали? Для чего?
Ответить с цитированием
  #6 (permalink)  
Старый 26.04.2019, 00:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Alessio18911
почему так сделано?
Сообщение от рони
1. можно указать размер картинок
возможно ваш html содержит ошибки, либо css недостаточно проработан и браузеру необходим повторный перерасчёт элементов.
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2019, 00:39
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Рони, спасибо!
Признателен за исчерпывающие и скорые ответы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Owl carousel 2 и старые версии браузеров Quark_ Javascript под браузер 0 11.09.2017 20:10
Баг с owl carousel 2 и history.back(); или обновлением страницы agrovinn Javascript под браузер 0 06.04.2017 20:38
Миниатюры в пагинации Owl Carousel kos0760 jQuery 5 20.05.2016 00:21
Owl carousel 2 не работает с табами - как поправить? ligisayan jQuery 7 08.05.2016 13:41
Почему не правильно считает номера слайдов в карусели owl carousel 2? ligisayan jQuery 13 22.04.2016 10:22