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

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

HIT

19.10.2016

4816

2

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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;}

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

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Изменение формы выбора вариаций

Изменение формы выбора вариаций

По умолчанию вариации товара в Woocommerce выбираются из выпадающего списка. Это не всегда удобно. Доработать формы выбора вариаций в виде: изображений, цветов, надписей (лэйблов) и т.д. помогут плагины. Рассмотрим различные Читать далее »

/
Товар под заказ

Товар под заказ

Что делать в ситуации когда товара нет в наличии. Существует несколько вариантов: ничего не делать), дать возможность Предзаказа (т.е. возможность его оплатить и подождать), либо записать почту клиента и уведомить Читать далее »

Форма голосования (опросы)

Форма голосования (опросы)

Создаем форму опроса по интересующему предмету. YOP Poll Еще один отличный плагин по созданию опросов. 20 000 скачиваний, но при этом 393 положительных оценки (у WP-Polls 117 оценок). В бесплатной Читать далее »

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

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

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

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

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