javascript - Owl carousel как спозиционировать стрелки навигации? - Stack Overflow на русском

javascript – Owl carousel как спозиционировать стрелки навигации? – Stack Overflow на русском

от

Не отображается навигация и пагинация owl-карусели, почему?

Поставил owl-carousel 2
Установил pagination и navigation в положение true, но ни то, ни другое не отображается никак
У обоих блоков высота 0 и находятся они слева под слайдером.

Все стили подключены, js-файлы подключены, карусель работает отлично, но навигация и пагинация не отображается вообще никак

Ни ошибок, ни предупреждений в консоли нет

Почему в слайдере owl-carousel вылазит кусок другой картинки?

странное совпадение, но сам недавно работал с этой библиотекой и такое же поведение было. решилось тем, что сначала дожидался загрузки изображений (через событие onload) а только потом запускал инициализацию слайдера библиотеки.

если точнее, то эта библиотека при инициализации вычисляет и задает своим блокам фиксированые размеры ширины, отталкиваясь от размеров изображений.
обратите внимание на размеры блоков owl-item и на их инлайн стили, которые задает библиотека. они неправильно вычисляются, по-этому у вас и такой баг.

Owl-carousel при изменении размера начинают отображаться все итемы,и карусель не работает

Доброго времени суток.
Установил owl-carousel,опыт работы с этим плагином сводился к парочке раз.Но без проблем.В этот раз столкнулся с проблемой такого характера :
При изменении размера страницы либо смены ориентации на телефоне,слайдер перестает работать,и все итемы выстраиваются как строчно блочные элементы.Перезагрузка страницы с новым изображением не помогает.
Может кто-то может подсказать в чем заключается проблема.

Скрнишоты :

https://puu.sh/w8gHa/a52a0315b2.png — 320px Работает как надо.
https://puu.sh/w8gJc/e2308f34ca.png — 570px Ломается

Начинает ломаться от 480px до 1200px.

Не могу понять из-за чего это происходит :/Итемы вложенные в слайдер резиновые,должны занимать всю ширину.

Код
HTML

 <section class="reviews">
        <div class="container">
            <div class="row">
                <p class="section-title">Отзывы наших учеников</p>
            </div>
            <div class="row">
                        <div class="owl-carousel">
                            <div class="item">
                                <div class="slide-wrap">
                                    <div class="review-photo"><img src="images/review.jpg" alt=""></div>
                                    <div class="reviewer-name">
                                        <p>Соломатина Наталья</p>
                                    </div>
                                    <span class="hr"></span>
                                    <div class="review-content">
                                        <p>Хочу поблагодарить ProKurs и Алену за проведенные курсы повышения квалификации. Эти уроки помогли мне преодолеть трудности. Уроки проходили в дружеской и непосредственной атмосфере, что способствовало хорошему усвоению материала и мотивировало на дальнейшие занятия. Алена всегда находила интересные темы для обсуждения.</p>
                                    </div>
                                </div>
                            </div>
                                <div class="item">
                                <div class="slide-wrap">
                                    <div class="review-photo"><img src="images/review.jpg" alt=""></div>
                                    <div class="reviewer-name">
                                        <p>Соломатина Наталья</p>
                                    </div>
                                    <span class="hr"></span>
                                    <div class="review-content">
                                        <p>Хочу поблагодарить ProKurs и Алену за проведенные курсы повышения квалификации. Эти уроки помогли мне преодолеть трудности. Уроки проходили в дружеской и непосредственной атмосфере, что способствовало хорошему усвоению материала и мотивировало на дальнейшие занятия. Алена всегда находила интересные темы для обсуждения.</p>
                                    </div>
                                </div>
                            </div>
                </div>
            </div>
        </div>
    </section>

JS

$(document).ready(function(){
    $('.owl-carousel').owlCarousel();
})
$('.owl-carousel').owlCarousel({
    loop:true,
    items: 1,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:true
        },
        1000:{
            items:1,
            nav:true,
            loop:false
        }
    }
})

SCSS

section.reviews {
    background-image: url('../images/middle_bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll;
    color: $white;
    p.section-title {
        color: inherit;
    }
    div.slide-wrap {
        width: 100%;
        display: block;
        text-align: center;
        div.review-photo {
            img {
                width: 164px;
                height: 164px;
                border: 10px solid #606161;
                background-color: #606161;
                border-radius: 50%;
            }
        }
        div.reviewer-name {
            font-family: 'Times New Roman' , sans-serif;
            font-style: italic;
            font-size: 1.57em;
            padding-top: 8px;
        }
        span.hr {
            width: 80px;
            height: 1px;
            background-color: #C79A79;
            display: block;
            margin: 20px auto;
        }
        div.review-content {
            p {
                font-family: $R_Regular;
                font-size: 1.07em;
                max-width: 720px;
                margin: 0 auto;
            }
        }
    }
}

Почему не работает вторая owl carousel?

Здравствуйте, на сайте есть слайдер Owl Carousel 2, подключён нормально, всё хорошо работает, вот код подключения:

$(() => {
	let owl = $('.owl-carousel');
	owl.owlCarousel({
		// Options
		items: 5,
		margin: 10,
		loop: true,
		nav: true,
		dots: false,
		lazyLoad: true,
		
		responsive:{
			0:{
				items: 2,
			},
			480:{
				items: 3,
			},
			600:{
				items: 4,
			},
			800:{
				items: 5,
			}
		},
		
		// Events
		onChange: (event) => {
			//console.log(event);
		},
		onChanged: (event) => {
			let item = event.item.index;
			let pic_src = $('.owl-item').eq(item).find('img').attr('data-src');
			$('.owl_big_pic img').attr('src', pic_src);
		},
		
	});

    
	$('.btn_next').on('click', () => {
		owl.trigger('next.owl.carousel', [300]);
	});
	$('.btn_prev').on('click', () => {
		owl.trigger('prev.owl.carousel', [300]);
	});
	/**
	$(document).on('click', '.owl-item', function(){
		let pic_src = $(this).find('img').attr('data-src');
		$('.owl_big_pic img').attr('src', pic_src);
	});*/
});
<div class="row">
				<div class="owl_big_pic">
					<img src="" style="width:100%;" />
					<span class="nav btn_prev"></span>
					<span class="nav btn_next"></span>
				</div>
				<div class="owl-carousel owl-theme">
					<img class="owl-lazy" data-src="img/slider/slider8.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider9.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider10.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider11.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider12.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider13.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider14.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider15.jpg" alt="" />
				</div>
			</div>

Но теперь нужно добавить ещё 1 слайдер:

<div class="owl-carousel">
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
				</div>

Подключаю:
$('.owl-carousel2').owlCarousel();

И происходит какая-то чехарда. Смотрю в консоли, все классы навеселись, элементы ужались, но самой карусели нет(код из консоли):

<div class="owl-carousel2 owl-loaded owl-drag">
					<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 2394px;"><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div></div></div><div class="owl-nav disabled"><div class="owl-prev">prev</div><div class="owl-next">next</div></div><div class="owl-dots"><div class="owl-dot active"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div></div></div>

При этом если у обоих слайдеров указать класс .owl-carousel, то всё ок, но 2 слайдер мне тоже нужно настроить. С чем проблема? Всё уже проверил, и так и сяк ставил, в консоли нет никаких ошибок. Уже мозг плавится, помогите!!!

Сейчас ищут техподдержку:  Как доказать, индивидуальные советы на страницах сайта

Css — подключаем файлы стилей для карусели owl carousel 2

Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.

Html — html-код самой карусели owl carousel 2

Самая простая и базовая разметка для понимания, в каждом слайде может быть любое количество блоков и элементов.

Js — подключаем необходимые скрипты для owl carousel 2

Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.

Owl carousel как спозиционировать стрелки навигации?

Добрый день, уважаемые.

В процессе верстки столкнулся с такой проблемой. При замене стандартных стрелок навигации в owl слайдере и позиционирования их по краям слайдера вся эта область навигации накладываеться поверх картинок (показал на фото), поскольку задаю ширину width:100%, после чего, разумеется, нету возможности нажать на картинки слайдера (если они, допустим, являются ссылками на другие продукт).

Как это исправить? Стрелки должны быть прижаты к краям слайдера при изменении размеров экрана.

Может, есть статья, где описывается как с данным слайдером работать правильно? Я в документации читал, что можно через JS заменять эти стрелки, но в данном случае они композиционные (стрелочка и подложка), и тут такое не прокатит.

Для примера:

$(".owl-carousel-2").owlCarousel({

  loop: true,
  nav: true,
  dots: false,
  autoplay: false,
  // margin: 5,
  navText: true,
  stopOnHover: true,
  smartSpeed: 1000, //Время движения слайда
  autoplayTimeout: 4000, //Время смены слайда
  pagination: false,
  responsiveClass: true,
  responsive: {
    1200: {
      items: 8
    },
    992: {
      items: 6
    },
    320: {
      items: 4
    }


  }
});
.brand-baner {
  padding: 20px 0;
  max-height: 120px;
  overflow: hidden;
}

.main-banner__slider,
.brand-baner__slider {
  position: relative;
}

.main-banner__slider .owl-nav,
.brand-baner__slider .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 999;
}

.main-banner__slider .owl-nav .owl-prev,
.brand-baner__slider .owl-nav .owl-prev {
  float: left;
  position: relative;
  width: 30px;
  height: 50px;
  background-color: #202020;
  font-weight: bold;
  line-height: 1;
  font-size: 38px;
  transition: all 0.2s;
}

.main-banner__slider .owl-nav .owl-prev:before,
.brand-baner__slider .owl-nav .owl-prev:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 13px;
  height: 17px;
  background: url("http://svgshare.com/i/2MZ.svg") 50% 50% no-repeat;
}

.main-banner__slider .owl-nav .owl-prev:hover,
.brand-baner__slider .owl-nav .owl-prev:hover {
  transition: all 0.2s;
  background-color: #fff;
}

.main-banner__slider .owl-nav .owl-prev:hover:before,
.brand-baner__slider .owl-nav .owl-prev:hover:before {
  background: url("http://svgshare.com/i/2Jk.svg") 50% 50% no-repeat;
}

.main-banner__slider .owl-nav .owl-next,
.brand-baner__slider .owl-nav .owl-next {
  float: right;
  position: relative;
  width: 30px;
  height: 50px;
  font-weight: bold;
  background-color: #202020;
}

.main-banner__slider .owl-nav .owl-next:before,
.brand-baner__slider .owl-nav .owl-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 13px;
  height: 17px;
  background: url("http://svgshare.com/i/2Mj.svg") 50% 50% no-repeat;
}

.main-banner__slider .owl-nav .owl-next:hover,
.brand-baner__slider .owl-nav .owl-next:hover {
  transition: all 0.2s;
  background-color: #fff;
}

.main-banner__slider .owl-nav .owl-next:hover:before,
.brand-baner__slider .owl-nav .owl-next:hover:before {
  background: url("http://svgshare.com/i/2Mv.svg") 50% 50% no-repeat;
}

.owl-carousel .owl-item img {
  width: auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="brand-baner">
  <div class="brand-baner__slider owl-carousel-2  owl-carousel">
    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image1" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image2" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image3" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image4" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image5" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image6" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image7" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image8" /></a>
      </div>
    </div>

    <div class="brand-baner__item">
      <div class="brand-baner__wp-img">
        <a href="#"> <img class="brand-baner__pic" src="https://dummyimage.com/100x64/99cccc.gif&text=The image9" /></a>
      </div>
    </div>
  </div>
</div>

Как добавить видео в карусель owl carousel:

1. Добавляем в options:

video:true

2. Используем такую разметку для HTML:

Сейчас ищут техподдержку:  Портал помощи работникам РЖД с порталом | Не является официальным сайтом. Вся информация предоставлена в ознакомительных целях.

Как сделать анимированную смену слайдов

Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:

Код js для инициализации owl carousel 2 на мобильных и дестроя на десктопе:

var $homeSlider = $(".home-slider");

$(window).resize(function() {
  showHomeSlider();
});

function showHomeSlider() {
  if ($homeSlider.data("owlCarousel") !== "undefined") {
    if (window.matchMedia("(max-width: 768px)").matches) {
      initialHomeSlider();
    } else {
      destroyHomeSlider();
    }
  }
}
showHomeSlider();

function initialHomeSlider() {
  $homeSlider.addClass("owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    smartSpeed: 1000
  });
}

function destroyHomeSlider() {
  $homeSlider.trigger("destroy.owl.carousel").removeClass("owl-carousel");
}

Пример инициализации owl carousel 2 на мобильных и дестроя на десктопе

Для наглядности скройте все вкладки кроме Результата.

See the Pen Owl Carousel Base 3 slides by Denis (@deniscreative) on CodePen.0

Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов

trigger(‘destroy.owl.carousel’)

Суть задачи в том ,что на десктопной версии нам не нужен слайдер, а нужно, чтобы блоки были друг за другом в несколько рядов, а вот на мобильной версии сайта, чтобы не размещать кучу блоков друг под другом, мы сделаем просто слайдер, в котором разместятся все блоки, но по высоте эта вся секция займет всего один блок.

Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px — карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.

В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.

Пример слайдера owl carousel 2 с тремя слайдами:

Содержимое файла script.js

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 3,
    margin: 10,
    loop: true,
    nav: true
  });
});

Пример слайдера Owl Carousel 2 с тремя слайдами:

Сейчас ищут техподдержку:  Как связаться с оператором Билайн напрямую

See the Pen Owl Carousel Base by Denis (@deniscreative) on CodePen.0

Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:

Дополнительно о техподдержке

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Оставьте комментарий

Adblock
detector