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

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

HIT

19.10.2016

4533

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

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

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Запись на прием

Запись на прием

Внедряем в сайт функционал записи на прием. Данная возможность может пригодится в медицинской сфере, а также в сфере образования (репетиторство). Плагин Booked Appointments Плагин платный (59 $), но если хорошо Читать далее »

/
Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

/
Массовое редактирование свойств товаров

Массовое редактирование свойств товаров

Быстрое изменение товаров Для того чтобы массово отредактировать товары woocommerce нужно установить плагин Woocommerce advanced bulk edit. В репозитории плагинов WordPress его нет, он платный. Если поискать на просторах интернета Читать далее »

/ /

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

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

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

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

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