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

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

HIT

19.10.2016

2803


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/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’

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Цены в зависимости от группы пользователей

Цены в зависимости от группы пользователей

Попробуем разобраться в вопросе цен для определенных групп пользователей. Либо это должно быть реализовано специальной колонкой цен, либо скидкой на все товары. WC Role Based Price Плагин WC Role Based Читать далее »

/ /
Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы <?php echo do_shortcode( '[[contact-form-7 id="143" title="Контактная форма Читать далее »

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

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

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

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

Пока нет комментариев. Будь первым!

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