Cacher is the code snippet organizer for pro developers

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
			

// ==== 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 ===

// === убираем выделения активности при клик ===
.slick-slide
	&:hover
		outline none!important
	&:active
		outline none!important
	&:focus
		outline none!important
// === убираем выделения активности при клике end ===

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

//Навигация снаружи
.slider-wrap--simple
	.slider-control
		round()
		flex(mid)
		tr(all)
		size 40px
		background: white
		position: absolute
		top 50%
		margin-top: -20px
		box-shadow 0px 2px 10px #c5c2c2
		z-index 10
		cp()
		&:hover
			background: $red
			.icon
				fill white
		.icon
			size 14px
	.slider-control--left
		left -20px
	.slider-control--right
		right -20px
//Навигация снаружи end

//Навигация внутри
.slider-wrap--inarrow
	.slider-control
		flex(mid)
		tr(all)
		position: absolute
		top 50%
		margin-top: -20px
		z-index 10
		padding: 20px 10px
		background: black
		cp()
		opacity: .6
		&:hover
			opacity: 1
			.icon
				fill white
		.icon
			fill white
			size 30px
	.slider-control--left
		left 0
	.slider-control--right
		right 0
//Навигация внутри
// === 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 ===