Слайдер со стрелками по бокам картинки с помощью Owl Carousel 2

В стандартном плагине кнопки «предыдущий» и «следующий» находятся внизу слайдера и обозначаются просто текстом, заменим текст на стрелки.

var slider = $(".owl-slider");
  slider.owlCarousel({
    items:1, // один слайд
    loop: true, // закольцевать
    nav: true, // навигация
    // Перепишем текст кнопок
    // используем Font Awesome для добавления стрелок
    navText: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>',
              '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'],
    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: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>',
                    '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'],
                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:

    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: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>',
                    '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'],
                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
}

Добавить комментарий