/ Scripts & jquery / slick — функционал карусели

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

HIT

19.10.2016

7484

2

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: ‘progressive’

Штатная подгрузка изображений работает не вполне корректно, рекомендую использовать в связке с 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;}
}

object-fit: cover; — классное свойство CSS 3, поддерживается большинством браузеров

Галерея 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 — 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');
}

Чтобы слайдер начинался с конца, т.е. первый слайд был бы последним нужно в div слайдера добавить атрибут dir=»rtl». Но при этом слайд изначально будет на последней точке (dots).

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Плагин: Миниатюра таксономии

Плагин: Миниатюра таксономии

Обычно для добавления изображения (миниатюры) таксономии импользую плагин Advanced Custom Fields. Плагин хороший, но довольно тяжеловат, т.к. является мощным многозадачным плагином. Есть более легковесная альтернатива — плагин taxonomy term image Читать далее »

/
Плагин Posts 2 Posts

Плагин Posts 2 Posts

Плагин Posts 2 Posts создает функционал связей многие ко многим (many-to-many). Плагин может использоваться для самых разнообразных задач. Posts 2 Posts После установки плагина, в админке не будет никаких управляющих Читать далее »

/
Woocommerce variations image swatch

Woocommerce variations image swatch

Описываю работу с плагином Woocommerce variations image swatch. Плагин создает подраздел настроек в настройках Woocommerce. Условно плагин можно разбить на 2 области: область изменения атрибутов вариаций, общие настройки отображения атрибутов Читать далее »

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

2 комментария

  1. Аватар
    Дмитрий

    Есть вопрос. Вы писали про инициализацию. Но это же не все… Чтобы код скрипта работал, его файлы нужно грузить себе на сервер, либо брать по CDN. Отсюда и вопрос. Как корректно подключать эти файлы и инициализировать эти скрипты в WordPress, применительно к этом слайдеру? Заранее спасибо!

slick — функционал карусели slick — функционал карусели
Аккордеон jquery
Рекомендации для васАккордеон jqueryOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.