Слайдер со стрелками по бокам картинки с помощью Owl Carousel 2
В стандартном плагине кнопки «предыдущий» и «следующий» находятся внизу слайдера и обозначаются просто текстом, заменим текст на стрелки. Для этого можно использовать иконки стрелок с fontawesome:
'<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>', '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'
var slider = $(".owl-slider");
slider.owlCarousel({
items:1, // один слайд
loop: true, // закольцевать
nav: true, // навигация
// Перепишем текст кнопок
// используем Font Awesome для добавления стрелок
navText: ['',
''],
autoplay:true, // автопрокрутка
autoplayTimeout:3000, // задержка в мс
autoplayHoverPause:false, // не останавливать при наведении
});
CSS:
.owl-prev i, .owl-next i {
color: white;
}
.owl-prev, .owl-next {
position: absolute;
top: 50%;
margin-top: -10px;
}
.owl-prev {
left: 5px;
}
.owl-next {
right: 5px;
}
Обработка клика Owl Carousel 2
К сожалению в замечательном плагине Owl Carousel 2 не предусмотрена обработка кликов (click event) на изображение нашей карусели. Для добавления с использованием jQuery подойдет этот код:
var carousel= $(".owl-carousel");
carousel.owlCarousel({
responsive:{ // уменьшаем кол-во слайдов
0:{ // ширина от 0 px
items:1
},
600:{ // от 600 px
items:3
},
1000:{ // от 1000 px
items:5
}
}
loop: true, // закольцевать
nav: true, // кнопки вперед/назад
autoplay:true, // автопрокрутка
autoplayTimeout:3000, // задержка в мс
autoplayHoverPause:false, // не останавливать при наведении
});
carousel.on('click', '.owl-item', function () {
//получить индекс
var click = $(this).index();
//по клику листаем к слайду на который кликнули
carousel.trigger( 'to.owl.carousel', [click] )
// Или добавляем свою функцию вместо листания
});
Парочка сложных примеров с OWL Carousel 2
Пример 1
В этом примере — слайдер с дополнительной боковой панелью миниатюр. При нажатии на миниатюру — слайд меняется на нужное нам изображение. Код написан с учетом нескольких каруселей, которые могут быть выведены на одной странице, поэтому html-разметка будет немного сложной.
JavaScript:
function owlGallery2(idgallery) {
jQuery(function ($) {
$(document).ready( function () {
var sliderWithThumb = $('.slider-with-thumb-'+idgallery);
sliderWithThumb.owlCarousel({
items: 1,
loop: true,
nav: true,
navText: ['',
''],
URLhashListener: true,
autoplay: true,
autoplayTimeout: 3000
});
var galleryThumb = $('.gallery-thumb-'+idgallery+' .img-thumb');
galleryThumb.on('click', function() {
var id = $(this).attr('id');
sliderWithThumb.trigger('to.owl.carousel', [id]);
//console.log(id)
});
var carouselThumb = $('.gallery-thumb-'+idgallery);
var pagination = $('.page-link-'+idgallery);
pagination.on('click', function (event) {
event.preventDefault();
var id = Number($(this).attr('id'));
var active = $('.gallery-thumb-'+idgallery+' .img-thumb.active');
var inactive = $('.gallery-thumb-'+idgallery+' .img-thumb.inactive');
if(id === 2) {
active.hide('slow');
inactive.show('slow');
}
else if(id === 1) {
active.show('slow');
inactive.hide('slow');
}
});
$(window).load( function () {
var height = sliderWithThumb.height();
carouselThumb.height(height);
carouselThumb.css('max-height', height);
})
})
})
}
HTML:
Код писался для одного wordpress плагина. Использовались компоненты Bootstrap и jQuery
protected function render() {
$id_gallery = $this->get_id();
$settings = $this->get_settings();
$img_ids = wp_list_pluck( $settings['wp_gallery2'], 'id' );
$align = ( 1 == $settings['pon_gallery2'] ) ? 'flex-row-reverse' : 'flex-row';
?>
<div class="d-flex <?php echo $align ?> flex-wrap">
<div class="col-sm-12 col-md-6 slider2">
<div class="owl-carousel slider-with-thumb-<?php echo $id_gallery ?>">
<?php foreach ($img_ids as $id) {
$caption = wp_get_attachment_caption( $id ); ?>
<div id="<?php echo $id ?>">
<img src="<?php echo wp_get_attachment_image_url( $id, 'gallery-big' ) ?>"
alt="<?php if($caption) echo $caption?>">
<?php if($caption) { ?>
<div class="carousel-caption">
<h3><?php echo $caption ?></h3>
</div>
<?php } ?>
</div>
<?php
} ?>
</div>
</div>
<div class="col-sm-12 col-md-6 gallery-thumb-<?php echo $id_gallery ?>">
<div class="row">
<?php $i = 0;
foreach ($img_ids as $id) {
$caption = wp_get_attachment_caption( $id ); ?>
<div id="<?php echo $i ?>" class="img-thumb col-md-4 col-4 <?php if($i < 9) { echo 'active'; } else { echo 'inactive'; }; ?>">
<img src="<?php echo wp_get_attachment_image_url( $id, 'carousel2' ) ?>"
alt="<?php if($caption) echo $caption?>" id="<?php echo $id ?>">
</div>
<?php $i++;
} ?>
<?php if($i > 9) { ?>
<div class="col-md-12 d-flex justify-content-center">
<a class="page-link-<?php echo $id_gallery ?> pagination1" href="#" id="1">1</a></li>
<a class="page-link-<?php echo $id_gallery ?> pagination2" href="#" id="2">2</a></li>
</div>
<?php }
?>
</div>
</div>
</div>
<script type="text/javascript">
owlGallery2("<?php echo $id_gallery ?>");
</script>
<?php
}
Пример 2
Эта карусель подразумевает совместное использование слайдера с каруселью OWL Carousel 2, при смене слайда с помощью кнопок навигации — карусель устанавливается на текущий слайд. То же самое происходит с каруселью. При выборе миниатюры в карусели — слайд в слайдере устанавливается в нужное нам изображение.
JavaScript:
function owlCarousel(id) {
jQuery( function ( $ ) {
$(document).ready(function () {
var carousel = $(".owl-gallery-"+id);
carousel.owlCarousel({
margin: 10,
loop: true,
stagePadding: 50,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
},
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: false,
center: true,
onChanged: attachmentChangeCarousel
});
var slider = $(".owl-slider-"+id);
slider.owlCarousel({
items: 1,
loop: true,
nav: true,
navText: ['',
''],
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: false,
onChanged: attachmentChangeGallery
});
function attachmentChangeCarousel(event) {
var itemCarousel = event.page.index;
$(".owl-slider-"+id).trigger('to.owl.carousel', [itemCarousel])
}
function attachmentChangeGallery(event) {
var itemGallery = event.page.index;
carousel.trigger('to.owl.carousel', [itemGallery])
}
carousel.on('click', '.owl-item', function () {
var click = $(this).index() - $('.owl-gallery-'+id+' .owl-stage-outer .owl-stage').find('.owl-item.cloned').length/2; //ловлю клоны
carousel.trigger('to.owl.carousel', [click])
});
});
})
}
HTML:
protected function render() { // to show on the fontend
$id_gallery = $this->get_id();
$settings = $this->get_settings();
$img_ids = wp_list_pluck( $settings['wp_gallery'], 'id' );
$align = ( 1 == $settings['pon_gallery'] ) ? 'flex-row-reverse' : 'flex-row';
?>
<div class="d-flex <?php echo $align ?> flex-wrap">
<div class="col-sm-12 col-md-6 d-flex align-items-center">
<div <?php echo "style='text-align:" . $settings['text-align'] . "';"; ?>>
<h3 class="prazdnik-gallery-header"><?php echo $settings['title']; ?></h3>
<p class="prazdnik-gallery-desc"><?php echo $settings['desc']; ?></p>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="owl-slider-<?php echo $id_gallery ?> owl-carousel">
<?php
foreach ($img_ids as $id) { ?>
<div id="<?php echo $id ?>">
<img src="<?php echo wp_get_attachment_image_url( $id, 'gallery-big' ) ?>"
alt="<?php echo wp_get_attachment_caption( $id ) ?>">
<?php if( wp_get_attachment_caption( $id ) ) { ?>
<div class="carousel-caption">
<h3><?php echo wp_get_attachment_caption( $id ) ?></h3>
</div>
<?php } ?>
</div>
<?php
} ?>
</div>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-12">
<div class="owl-gallery-<?php echo $id_gallery ?> owl-carousel">
<?php
foreach ($img_ids as $id) { ?>
<div class="carousel-item-owl" id="<?php echo $id ?>">
<img id="<?php echo $id ?>" src="<?php
echo wp_get_attachment_image_url( $id, 'carousel' ) ?>">
</div>
<?php
} ?>
</div>
</div>
</div>
<script type="text/javascript">owlGallery("<?php echo $id_gallery ?>");</script>
<?php
}