fantazer
12/16/2016 - 11:29 AM

Slick slider

Slick slider

index.jade
content_copyfile_download
http://kenwheeler.github.io/slick/

bower i slick-carousel --save-dev

link(rel="stylesheet", href="bower/slick-carousel/slick/slick.css")
link(rel="stylesheet", href="bower/slick-carousel/slick/slick-theme.css")
script(src='bower/slick-carousel/slick/slick.js')

//.slider-wrap--inarrow - пагинация внутри 
//.slider-wrap--simple - пагинация снаружи

.slider-wrap.slider-wrap--inarrow //--simple
	.slider-control.slider-control--left
		+icon("arrow-left","icon")
	.slider-control.slider-control--right
		+icon("arrow-right","icon")
	.slider-item.slider-CURRENT
		.slider-el-wrap
			.slider-el
				//content her
script.js
content_copyfile_download
// ==== simple ===

$('.main-slider').slick({
	slidesToShow: 1,
	speed: 500,
	dots:true,
	arrows:false,
	rows:0,// убирает вложенный пустой div
	//autoplay: true,
	//fade: true
	//autoplaySpeed: 8000, time between
	customPaging : function(slider, i) {
		return '<span class="dot"></span>';
	}
});
// ==== simple end ===

// === custom arrow el === 
$('.slider-control--right').click(function(){
	$(this).closest(".slider-wrap").find(".slider-item").slick('slickNext');
});

$('.slider-control--left').click(function(){
	$(this).closest(".slider-wrap").find(".slider-item").slick('slickPrev');
});
// custom arrow el === end

// === breakpoint ===
$('.slider').slick({
  slidesToShow: 3,
  speed: 500,
  dots:false,
  arrows: false,
  focusOnSelect: true,
	responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
// === breakpoint end ===

// === Init only mobile ===
var sliderMobile = function(){
	if( currentSize < 641){
		$('.slider').not('.slick-initialized').slick({
			responsive: [
				{
					breakpoint: 9999,
					settings: "unslick"
				},
				{
					breakpoint: 640,
						settings: {
							slidesToShow: 1,
							slidesToScroll: 1,
							infinite: true,
							prevArrow: false,
							nextArrow: false,
							dots: true
					}
				}
			]
		});
	}
};

sliderMobile();

$(window).resize(function(){
	var currentSize = $(window).width();
	sliderMobile();
	return currentSize;
});
// === Init only mobile  end ===

// === vertical slider ===
	var initSlider = function(){
		$('.basket-container').not('.slick-initialized').slick({
		  slidesToShow: 2,
		  fade:true,
		  autoplay: false,
		  speed: 500,
		  vertical:true,
		  arrows: true,
		  prevArrow: $('.header__sub-arrow-up'), // для сторонней навигации
		  nextArrow: $('.header__sub-arrow-down'),
		  //prevArrow:'<svg class="slider-control"><use xlink:href="#arrow-up"></use></svg>',
			//nextArrow:'<svg class="slider-control"><use xlink:href="#arrow-down"></use></svg>',
		  verticalSwiping:true,
		  infinite:false,
		  responsive: [
                {
                    breakpoint: 1024,
                    settings: "unslick"
                }
            ]
		});
	};
	initSlider();

// === vertical slider end ===

// === ajax img load ===
img(data-lazy="img/img.jpg", alt="")
	$('.slider').slick({
		slidesToShow: 1,
		autoplay: false,
		speed: 500,
		arrows: false,
		lazyLoad: 'ondemand',
	});
// === ajax img load end ===

// === Выравнивание слайдов по высоте ===
slickHeight = function() {
	var stHeight = $(' name-slider .slick-track').height();
	$('name-slider__el').css('height', stHeight + 'px');
};
slickHeight();

$('window').resize(function(){
	sickHeight();
});
// === Выравнивание слайдов по высоте end ===

// === Номера слайдов === 

	//Номер активного слайда
	$('.slider').on("afterChange", function () {
		$('.slider').slick('slickCurrentSlide');
	});

	//Перейти на нужный слайд
	$('.slider').slick('slickGoTo', 2 //Номер на который нужно перейти);

	// Нумерация слайдов и их изменение 1/3 = > 2/3
	$('.slider').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
	  var i = (currentSlide ? currentSlide : 0) + 1;
	  $(this).find('.numbers').text(i + ' / ' + slick.slideCount);
	});

// === Номера слайдов  end ===

// === Высота слайда при динамическом контенте
	$('.slider-item').on("afterChange", function () {
		var stHeight = $slider.find('.slick-current').height();
		$slider.find('.slick-list').css('height', stHeight + 'px');
		return stHeight;
	}); // расчитывает высоту при смене основного слайда
	
	$('.option-col-head').click(function(){
		$(this).toggleClass('active');
		$(this).closest('.option-col').find('.option-descr').slideToggle(function(){
			var stHeight = $slider.find('.slick-current').height()
			$slider.find('.slick-list').css('height', stHeight);
			$slider.find('.slick-current').css('height', 'auto');
		});
	}); //расчитывает высоту при действии внутри слайда
// === Высота слайда при динамическом контенте === end
style.styl
content_copyfile_download
// === убираем выделения активности при клик ===
.slick-slide
	&:hover
		outline none!important
	&:active
		outline none!important
	&:focus
		outline none!important
// === убираем выделения активности при клике end ===

// === for custom navigation === 
.slider-wrap
	position relative

.slider-control
	flex(mid)
	tr(all)
	z-index 10
	size 80px
	cp()
	round()
	border 1px solid $border-color
	&:hover
		background: white
		border 1px solid white
		box-shadow: 0px 12px 32px rgba(41, 42, 53, 0.16);
		.icon
			fill black
	.icon
		fill black

.slider-control--light
	border 2px solid #ffffff2e
	&:hover
		background: white
		border 1px solid white
		.icon
			fill black
	.icon
		fill white
		
//Навигация внутри
.slider-wrap--inarrow
	.slider-control
		+below(1580px)
			display none
		position: absolute
		top 50%
		margin-top: -40px
	.slider-control--left
		left 80px
	.slider-control--right
		right 80px
//Навигация внутри

// === Отступы для слайдов ===
.slider-extend
	.slick-slide
		+below(1024px)
			margin: 0 8px
		margin: 0 14px
	.slick-list
		+below(1024px)
			margin: 0 -8px
		margin: 0 -14px
// === for custom navigation ===

//=== Внешний вид пагинации ===
.slick-dots
	+below(720px)
		bottom -20px
	width: 100%
	display: flex !important
	align-items: center
	justify-content: center
	bottom -50px
	li
		+below(720px)
			size 10px
			flex(mid)
	.dot
		+below(720px)
			flex(mid)
			size 6px
		background: $mark
		width: 20px
		height: 4px
		display: block
		br(3px)
		opacity: .5
	.slick-active
		.dot
			opacity: 1
//=== Внешний вид пагинации end===

// === Отступы для для слайдов ===
.slick-slide
	margin: 0 30px
.slick-list
	margin: 0 -30px
// === Отступы для для слайдов end ===

// === Для центрального вида ===

.slick-center
	transform: scale(1.2);
	box-shadow 0 18px 32px #a2b8c5
	opacity: 1 !important

.name-slider
	.slick-slide
		opacity: .8
	.slick-list
		padding: 100px 80px!important
	.slick-slide
		margin: 0 20px

// === Для центрального вида end ===

// === Анимация появления ===
	// add js fade:true,
	.#slider-el__name#
		transform: scale(.95, .95)
		tr()
	.#slider-name#	
		.slick-active
			.#slider-el__name#
					transform: scale(1, 1)
// === Анимация появления end===