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-control.slider-control--left
+icon("arrow-left","icon")
.slider-control.slider-control--right
+icon("arrow-right","icon")
.slider.slider-item
.slider-el
// ==== simple ===
$('.main-slider').slick({
slidesToShow: 1,
speed: 500,
dots:true,
arrows:false,
//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,
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 ===