О нас
Разработчикам
Заметки
Переводчик
Транслитератор
Сравнить текст
Генератор пароля
Ip и информация
Декодировать JSON
Локация
О нас
Разработчикам
Заметки
Переводчик
Транслитератор
Сравнить текст
Генератор пароля
Ip и информация
Декодировать JSON
Локация
Slick slider
us.content
// https://kenwheeler.github.io/slick var sliderSlick = $('.slider_slick') sliderSlick.slick({ // lazyLoad: 'ondemand', // img data-lazy="img/name.jpg" // Lazy load загрузка картинок slidesToShow: 3, slidesToScroll: 1, //autoplay: true, autoplaySpeed: 5000, infinite: true, dots: false, arrows: true, nextArrow: '<i class="fa fa-chevron-right slick-arrow slick-arrow-right" aria-hidden="true"></i>', prevArrow: '<i class="fa fa-chevron-left slick-arrow slick-arrow-left" aria-hidden="true"></i>', pauseOnHover: true, //variableWidth: true, //lazyLoad: 'ondemand', // ondemand progressive //draggable: false, //centerMode: true, //centerPadding: '0', // default 50px responsive: [ { breakpoint: 1200, settings: { slidesToShow: 2, } }, { breakpoint: 769, settings: { slidesToShow: 1, arrows: false, dots: true, } }, { breakpoint: 577, settings: { slidesToShow: 1, arrows: false, dots: true, } } ] }) // Убираем мелькание картинок при загрузки слайдера, т.е. после загрузки js показываем слайдер $('.slider-slick').show() if (!sliderSlick.hasClass('slick-initialized')) {} // Если слайдер не инициализирован, то запустим его sliderSlick.slick('destroy') // Разинициализировать слайдер // Слайдер с навигацией var sliderForEl = '.slider_for', sliderNavEl = '.slider_nav', sliderFor = $(slideForEl), sliderNav = $(slideNavEL) // Основной слайдер sliderFor.slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, dots: false, asNavFor: sliderNavEl, }) // Навигация sliderNav.slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: sliderForEl, focusOnSelect: true, dots: false, arrows: true, prevArrow: '<i class="fa fa-long-arrow-left slick-arrow-left" aria-hidden="true"></i>', nextArrow: '<i class="fa fa-long-arrow-right slick-arrow-right" aria-hidden="true"></i>', //centerMode: true, //vertical: true, //centerPadding: '0', // default 50px //verticalSwiping: true, }) // Sass // Убираем мелькание картинок при загрузки слайдера, т.е. после загрузки js показываем слайдер .slick-slider { display: none; } // Убираем синию обводку .slick-slide, .slick-slide * { outline: none !important; } // Когда последний или первый элемент делаем полу скрытую стрелку .arrow-hide .slick-arrow[aria-disabled=true] { // Установить класс .arrow-hide на класс запуска слайдера opacity: .3; cursor: auto; &:hover { color: $secondary; // любой цвет, если надо } } // Событие перед сменой слайдов $('.slick-gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide) { console.log(nextSlide) }) // Миксины @mixin slick-dots($color: $white, $bottom: 25px) { .slick-dots { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; padding-left: 0; position: absolute; bottom: $bottom; left: 50%; transform: translateX(-50%); list-style: none; z-index: $z-index-min - 8; li { display: inline-block; margin-right: 15px; &.slick-active button { width: 15px; height: 15px; background-color: transparent; border: 2px solid $color; } button { padding: 0; width: 8px; height: 8px; font-size: 0; background-color: $color; border: none; border-radius: 50%; &:focus { outline: none; } } &:last-child { margin-right: 0; } } } @media (max-width: 992px) { .slick-dots { @if $bottom == auto { bottom: $bottom; } @else { bottom: $bottom * 2; } } } @media (max-width: 576px) { $rate: .8; .slick-dots { li { margin-right: 15px * $rate; &.slick-active button { width: 15px * $rate; height: 15px * $rate; } button { width: 8px * $rate; height: 8px * $rate; } } } } } @mixin slick-slider-arrow-inside($font-size: $font-size-base * 3.2, $color: $white) { .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); color: rgba($color, .4); font-size: $font-size; cursor: pointer; z-index: $z-index-min - 8; @include transition(); &:hover { color: rgba($color, .7); } &-left { left: $spacer * 2.4; } &-right { right: $spacer * 2.4; } } } @mixin slick-slider-arrow($top: 50%) { .slick { &-list { width: 97%; margin: 0 auto; } &-arrow { position: absolute; top: $top; @if $top == 50% { transform: translateY(-50%); } font-size: 2rem; color: rgba($dark, .5); cursor: pointer; z-index: $z-index-min - 8; @include transition(); &:hover { color: $dark; } &-right { right: -.8rem; } &-left { left: -.8rem; } } } @media (max-width: 768px) { .slick { &-arrow { &-right { right: 0; } &-left { left: 0; } } } } } <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>
Список