HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<section class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(background.jpg)"> <div class="swiper-content"> <p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p> <span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span> </div> </div> <!-- Еще слайды --> <div class="swiper-slide" style="background-image:url(background.jpg)"> <div class="swiper-content"> <p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p> <span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span> </div> </div> </div> <div class="swiper-pagination"></div> </section> |
Фотографии для слайдера могут быть разных размеров, т.к. их края обрезаются согласно видимой области.
CSS:
Подключаем CSS фреймворка swiper и стили ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.swiper-container * { margin: 0; padding: 0; box-sizing: border-box; } .swiper-container { box-sizing: border-box; width: 100%; height: 500px; transition: opacity .6s ease; } .swiper-container.swiper-container-coverflow { padding: 2% 0 calc(2% + 30px) 0; } .swiper-slide { background-position: center; background-size: cover; border-radius: 10px; } .swiper-slide .swiper-content { position: absolute; bottom: 4%; left: 2%; max-width: 70%; padding: 14px 22px; color: #fff; background: rgba(0,0,0,0.6); border-radius: 10px; } .swiper-slide .swiper-content .swiper-title { font-size: 26px; font-size: 500; margin-bottom: 10px; } .swiper-slide .swiper-content .swiper-caption { display: block; font-size: 15px; line-height: 1.4; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; position: relative; z-index: 3; width: 12px; height: 12px; background-color: #337AB7; opacity: .5; transition: all .3s ease; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1px solid #337AB7; border-radius: 50%; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } @media (max-width: 767px) { .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { bottom: 4px; } .swiper-slide .swiper-content .swiper-title { font-size: 22px; } .swiper-slide .swiper-content .swiper-caption { font-size: 13px; } } |
JS:
Подключаем JS фреймворка swiper и скрипт ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var sliderSelector = '.swiper-container', options = { init: false, loop: true, speed: 800, slidesPerView: 1, spaceBetween: 0, centeredSlides : true, effect: 'coverflow', coverflowEffect: { rotate: 50, stretch: 0, depth: 60, modifier: 1, slideShadows : true, }, grabCursor: true, parallax: true, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 1000: { slidesPerView: 2, spaceBetween: 0 }, 767: { slidesPerView: 2, spaceBetween: -80 } } }; var mySwiper = new Swiper(sliderSelector, options); mySwiper.init(); |
Swiper - это современный бесплатный сенсорный слайдер. Подробнее о нем и всех его возможностях можно посмотреть на официальном сайте.
На мобильной версии почему то стрелочками переключение не работает. (тут на сайте)
Поправил немного код и удалил эти стрелки вообще.
Сейчас их не используют уже.
Точки внизу (они даже обычно не кликабельные), говорят о том, что это карусель, а дальше пальцем или мышкой.
Здравствуйте! Как сделать побольше расстояние между блоками ?
Поиграйте с настройками [i]spaceBetween, depth[/i] и т.д.
А как изменить размер изображения? так чтобы она вмеешалась в блока с width: 700px
Тут ширина слайда зависит от ширины контейнера.
Задавайте его, а потом настройки, например [i]spaceBetween[/i]
Подскажите пожалуйста, при подключении, все работает, но появляется ужасная горизонтальная прокрутка с элементами, которые должны быть скрыты?
По идеи, можно убрать прокрутку через [i]overflow-x: hidden;[/i], но что то не так с подключением.
CSS от свипера подключен?
Александр, доброго дня. Подскажите пож-та как сделать что бы фото в слайдере по клику открывались в magnific popup.
Меняем
[i]<div class="swiper-slide" ....[/i]
на
[i]<a href="background.jpg" class="swiper-slide" ....[/i]
В итоге у нас будет открываться картинка по клику.
Далее читаем [url="https://dimsemenov.com/plugins/magnific-popup/documentation.html"]описание[/url], как удобнее подключить magnific popup, например:
[code]$('.swiper-wrapper').magnificPopup({
delegate: 'a',
type: 'image'
});[/code]
Добрый день, я решил скопировать данный код и попробовать его на своем шаблоне в редактор Atom, но к сожалению ничего не работает и я не понимаю в чем проблема, какие могут быть причины?
Дайте ссылку на пример, посмотрим какие там проблемы.
Как подключить 2 таких слайдера на страницу, подскажите пожалуйста!(пробовал поменять все названия классов и переменных - не помогло)
На первый слайдер ставим [b]id="slider1"[/b], на второй [b]id="slider2"[/b]
JS:
[code]var options = { тут настройки };
var mySwiper1 = new Swiper("#slider1", options);
var mySwiper2 = new Swiper("#slider2", options);
mySwiper1.init();
mySwiper2.init();[/code]
Почему слайдер не работает, подскажите плиз кто разобрался?
Не работает на этой странице или у вас?
Сделал [url="https://codepen.io/atuin/pen/ExXoPNa"]пример[/url] в вакууме
PS. данный пример для версии 6.1.2.
На других не проверял, но на 7ой эффект выглядет совсем не так.
У меня не работает на локалке, хотя я просто копирую ваши коды, может быть я что то не доделываю?!
Подключил версию 6.1.2 и заработало, спасибо что откликнулись)))
Подключаю всё верно, однако слайдер не работает