Пример:
1
Описание слайда
2
Более длинное описание слайда, которое не умещается в одну строку
4
Описание слайда
5
Описание слайда
6
Описание слайда
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="cube-wrapper"> <div class="cube-slider swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="photo.jpg" alt="photo" /> <div class="cube-top">1</div> <div class="cube-bottom"> <p>Описание слайда</p> </div> </div> <!-- Еще слайды --> <div class="swiper-slide"> <img src="photo.jpg" alt="photo" /> <div class="cube-top">N</div> <div class="cube-bottom"> <p>Описание слайда</p> </div> </div> </div> </div> </div> |
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
.cube-slider * { box-sizing: border-box; } .cube-wrapper { position: relative; padding: 20px 0 60px 0; } .cube-slider { position: relative; max-width: 400px; } .cube-slider .swiper-slide { position: relative; user-select: none; aspect-ratio: 1 / 1; } .cube-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display:block } .cube-top { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 16px 20px rgba(0,0,0,0.3); padding: 6px 10px; color: #000; border-radius: 50%; font-size: 20px; font-weight: 500; height: 40px; width: 40px; display: flex; flex-flow: column; align-items: center; justify-content: center; } .cube-slider .cube-bottom { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; bottom: 0; width: 100%; min-height: 70px; padding: 10px 20px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.2); color: #fff; } .cube-slider .cube-bottom p { padding: 0; margin: 0; font-size: 16px; line-height: 1.1; } @media screen and (max-width:767px) { .cube-slider .cube-bottom p { font-size: 14px; } } .cube-slider .cube-bottom a { position: relative; color: #fff; text-decoration: none; } .cube-slider .cube-bottom a:before, .cube-slider .cube-bottom a:after { content: ""; border-bottom: 2px solid #fff; position: absolute; width: 100%; left: 0; bottom: -10px; opacity: 0; transition: 0.3s; display: inline-block; pointer-events: none; } .cube-slider .cube-bottom a:before { border-bottom: 1px solid #bfe2ff; opacity: 1; bottom: -2px; } .cube-slider .cube-bottom a:hover:after { bottom: -2px; opacity: 1; } |
JS:
Добавляем скрипт библиотеки swiper и:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var cubeSlider = new Swiper(".cube-slider", { effect: "cube", grabCursor: true, loop: true, speed: 1000, cubeEffect: { shadow: true, slideShadows: false, shadowOffset: 40, shadowScale: 1, }, autoplay: { delay: 2600, pauseOnMouseEnter: true, }, }); |
НЕ работает. Браузер ругается, что нужна какая-то source map. Что я не так делаю, где взять инструкцию поподробнее?
Не работает не из-за этого, если других нет ошибок, то что то со стилями может.
Дайте ссылку на результат, посмотрю, что не так.
Если вы намучались как и я, то вот пару советов:
1) Не забудьте добавить отдельный файл со стилем и скриптом, а затем подключить их в header
2) Если вдруг у вас нормально стилизовались фотки, но нет анимации, то попробуйте при подключении скрипта убрать defer:
Было: <scrip src="js/swiper.js" defer></scrit>
Стало: <scrit src="js/swiper.js"></scrpt>
Типо он позволяет браузеру загружать JavaScript-файл в фоновом режиме, не блокируя рендеринг страницы