slick — функционал карусели

slick — комплексное решение по созданию функционала карусели, в различных ее проявлениях. Демо и типовые варианты, и исходники можно посмотреть/скачать здесь.

Отсекаем лишнее

В базовой комплектации у slick присутствует несколько скриптов, несколько стилей, собственный шрифт. Я использую усеченную версию:

• slick.min.js (минимизированный)
• slick.css (+ можно почистить стили [rtl])
• slick-theme.css (+ можно почистить стили [rtl])

Стили, при желании можно объединить в один.
Ссылки на шрифт slick я заменяю на более удобный FontAwesome

Базовая карусель

<div class="carousel"><div class="multiple-items">
<div>Повторяющийся блок</div>
</div></div>

Основной функционал карусели задает div class=»multiple-items». div class=»carousel» нужен только для задания отступов от карусели.

Скрипт инициализации скрипта

$(document).ready(function() {     
	$('.multiple-items').slick({
		//infinite: true, //прокрутка по кругу
		autoplay: true,
		slidesToShow: 3,
		slidesToScroll: 3
	});
});

Стили CSS

.slick-slider {width: 100%; float: left;}

.slick-slide {cursor: pointer;}

.multiple-items .slick-slide {margin: 0 15px;}

.carousel {padding: 0 3%; float: left; width: 100%; box-sizing: border-box;}

/* для товаров woocommerce */
.carousel .woocommerce ul.products li.product {margin: 1em 0 1.992em 0; width: 100%;}

Карусель для товаров woocommerce

<div class="carousel"><div class="multiple-items products">

	<?php global $post;
	$args = array(
		'posts_per_page' => 9,
		'post_type' => 'product'
	);
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) : setup_postdata($post); ?>

	<div class="woocommerce"><ul class="products"><li <?php post_class( $classes ); ?>>
		<?php
		do_action( 'woocommerce_before_shop_loop_item' );
		do_action( 'woocommerce_before_shop_loop_item_title' );
		do_action( 'woocommerce_shop_loop_item_title' );
		do_action( 'woocommerce_after_shop_loop_item_title' );
		do_action( 'woocommerce_after_shop_loop_item' );
		?>
	</li></ul></div>

	<?php endforeach; ?>
	<?php wp_reset_postdata() ?>

</div></div>

Доработанная версия

Немного упростил вывод товаров для карусели (!не универсальное решение, в различных вариантах верстки может отображаться по разному):

<div class="carousel"><div class="multiple-items woocommerce products">
  
	<?php global $post;
	$args = array(
		'post_type' => 'product',
		'posts_per_page' => 10,
		'columns' => 4,
		'meta_query'     => WC()->query->get_meta_query(),
		'post__in'       => array_merge( array( 0 ), wc_get_product_ids_on_sale() )
	);
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) : setup_postdata($post); ?>

		<div <?php post_class( $classes ); ?>>
		<?php
		do_action( 'woocommerce_before_shop_loop_item' );
		do_action( 'woocommerce_before_shop_loop_item_title' );
		do_action( 'woocommerce_shop_loop_item_title' );
		do_action( 'woocommerce_after_shop_loop_item_title' );
		do_action( 'woocommerce_after_shop_loop_item' );
		?>
		</div>

	<?php endforeach; ?>
	<?php wp_reset_postdata() ?>
  
</div></div>

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

.multiple-items {display: flex !important; flex-wrap: wrap; margin-bottom: 25px;}

.multiple-items img {
  -moz-backface-visibility: visible;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.slick-list {margin: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; width: 100%;}

.slick-track {border: solid #e9eaec; border-width: 0 0 0 1px; display: flex !important; padding-bottom: .1rem;}

.carousel .product {
    border: solid #e9eaec;
    border-width: 1px 1px 1px 0;
    background: #fff;
    padding: 15px;
    list-style: none;
    text-align: center;
    position: relative;
    margin-bottom: -.1rem;
    height: auto;
}

.multiple-items > .product {width: 25%;}

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

Адаптивность карусели

Скрипт можно настраивать под различные разрешения экрана. Для этого в настройках прописываем параметры responsive

responsive: [
	{
		breakpoint: 1280,
		settings: {
			slidesToShow: 4,
			slidesToScroll: 4,
		}
    },
    {
		breakpoint: 1024,
		settings: {
			slidesToShow: 3,
			slidesToScroll: 3,
		}
    },
    {
		breakpoint: 800,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 2
		}
    },
    {
		breakpoint: 480,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1
		}
    }
]

Либо вовсе отключить при определенном разрешении — settings: «unslick»

Slick слайдер

В последнее время основной слайдер также делаю на основе slick. Есть небольшая проблема — при загрузке страницы на какие-то доли секунд выводятся все слайды, а после складываются. Это я замаскировал так:

Делаем все, кроме одного слайда невидимыми:

.slick-track > div:nth-child(2) img {display: block !important;}
#index-slider img {display: none;}

А при загрузке страницы включаем и остальные:

jQuery(document).ready(function(){
	jQuery('#index-slider img').css('display', 'block');
});

Подгрузка слайдов

Slick обладает еще одной полезной функцией lazyload (отложенная загрузка изображений). Нужно только добавить в скрипт свойство lazyLoad: ‘ondemand’. И изменить вывод изображения:

<div id="index-slider">
 
	<?php global $post;
	$args = array( 'posts_per_page' => 5, 'offset'=> 0, 'post_type' => 'slide' );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) : setup_postdata($post); ?>

	<?php if( has_post_thumbnail() ) : ?>
	 
		<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
		$url = $thumb['0']; ?>

		<div><a href="<?php echo get_post_meta($post->ID, 'slidelink', true); ?>"><img data-lazy="<?php echo $url; ?>" alt="<?php the_title(); ?>"></a></div>

	<?php endif; ?>

	<?php endforeach; ?>

	<?php wp_reset_postdata() ?>
 
</div>

или еще можно упростить так:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>

<div><a href="<?php echo get_post_meta($post->ID, 'slidelink', true); ?>"><img data-lazy="<?php echo $thumb[0]; ?>" alt="<?php the_title(); ?>"></a></div>

Также в этом примере кода уже добавил alt который берется из заголовка слайда.

Штатная подгрузка изображений работает не вполне корректно, рекомендую использовать в связке с lazyload.

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

@media screen and (max-device-width: 480px) {
	#index-slider, .hotel-photos {height: 200px;}
	.slick-list, .slick-track {height: 100%;}
	#index-slider img, .hotel-photos img {height: 100%; object-fit: cover;}
}

Галерея Slick

Недавно на одном из сайтов обратил внимание на интересное использование Slick в виде галереи. Особенность в том, что изображения галереи доходят до краев экрана (верста сайта во весь экран).

Для реализации необходимо поместить слайдер (#index-slider) в контейнер (.s2), и прописать следующие стили:

.s2 {overflow: hidden; display: block;}

#index-slider {max-width: 1000px; margin: 0 auto;}

.s2 .slick-list {overflow: visible;}

#index-slider .slick-slide img {max-width: 800px; margin: 0 auto;}

или еще проще:

<a href="/wp-content/uploads/2016/10/Carousel-gallery-2.jpg"><img class="aligncenter size-full wp-image-9812 lazy" title="" src="/wp-content/plugins/site-lazyload-image/loading-rect.gif" alt="" width="1200" height="563" data-original="/wp-content/uploads/2016/10/Carousel-gallery-2.jpg"></a>

Чтобы сделать такую галерею достаточно прописать 2 стиля:

#index-slider {max-width: 1280px; margin: 0 auto;}
#index-slider .slick-list {overflow: visible;}
#index-slider .slick-track {overflow: hidden;}

Прокрутка колесом + движение слайдов по вертикали

Для прокрутки слайдов колесом мышки нужен следующий скрипт (#index-slider — id нужного слайдера):

$('#index-slider').on('wheel', (function(e) {
	e.preventDefault();

	if (e.originalEvent.deltaY < 0) {
		$(this).slick('slickNext');
	} else {
		$(this).slick('slickPrev');
	}
}));

Для вертикального листания слайдов в скрипт инициации slick нужно добавить свойство vertical: true и verticalSwiping: true.

При прокрутке колеса мыши вниз, как мы обычно скроллим сайты, слайды будут перелистываться назад, т.е. с первого на последний и т.д. Чтобы это изменить нужно немного изменить скрипт скроллинга с «< 0» на «> 0», тогда при обычном скроллинге они будут листаться по порядку.

if (e.originalEvent.deltaY > 0) {
	$(this).slick('slickNext');
} else {
	$(this).slick('slickPrev');
}

[site-socialshare]