Страницы

Поиск по вопросам

четверг, 15 ноября 2018 г.

Инересный слайдер книгой

Ребят, подскажите скрипт, чтобы сделать такой слайдер (выбранный осветлен, соседние затемнены и лежат пачкой, как на картинке) с touch-возможностью?


Ответ

Если использовать slick slider
$('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: true, dots: false, centerMode: true, variableWidth: true, infinite: true, focusOnSelect: true, cssEase: 'linear', touchMove: true, prevArrow:'', nextArrow:'', // responsive: [ // { // breakpoint: 576, // settings: { // centerMode: false, // variableWidth: false, // } // }, // ] }); var imgs = $('.slider img'); imgs.each(function(){ var item = $(this).closest('.item'); item.css({ 'background-image': 'url(' + $(this).attr('src') + ')', 'background-position': 'center', '-webkit-background-size': 'cover', 'background-size': 'cover', }); $(this).hide(); }); * { box-sizing: border-box; } img { max-width: 100%; width: 100%; } body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrap { position: relative; z-index: 100; width: 100%; height: 100%; padding: 0 60px; background: url(https://images.unsplash.com/photo-1485069203392-8e1aeb1ebf02?auto=format&fit=crop&w=1054&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) center no-repeat; -webkit-background-size: cover; background-size: cover; overflow: hidden; } .wrap:after { content:''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); } .slider { position: relative; z-index: 200; padding: 0 0px; margin: 5rem auto; max-width: 800px; width: 100%; } .slick-arrow { position: absolute; top: 50%; width: 40px; height: 50px; line-height: 50px; margin-top: -25px; border: none; background: transparent; color: #fff; font-family: monospace; font-size: 5rem; z-index: 300; outline: none; } .slick-prev { left: -50px; text-align: left; } .slick-next { right: -50px; text-align: right; } .item.slick-slide { width: 400px; height: 400px !important; transition: transform .4s; position: relative; } .slick-slide:after { content:''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); transition: transform .4s; } .item.slick-slide { transform: scale(0.7) translate(640px); } .item.slick-slide.slick-center + .slick-slide { transform: scale(0.8) translate(-250px); z-index: 10; } .item.slick-slide.slick-center + .slick-slide + .item.slick-slide { transform: scale(0.7) translate(-640px); z-index: 5; } .item.slick-slide.slick-active { transform: scale(0.8) translate(250px); } .item.slick-slide.slick-center { /* margin: 0 -10%; */ transform: scale(1); z-index: 30; } .slick-center:after { opacity: 0; }


Развернуть на весь экран.
CodePen
Но, думаю, лучше самописный слайдер.

Комментариев нет:

Отправить комментарий