
Для создания круглой формы плагин использует css-свойство clip-path
, в результате чего получается окружность из любого количества слайдов
Для создания круглой формы плагин использует css-свойство clip-path
, в результате чего получается окружность из любого количества слайдов
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 |
<div class="rotating-slider-container"> <div class="rotating-slider"> <ul class="slides"> <li style="background-image: url(bayonetta.jpg);"> <div class="slide-inner"> <div>Bayonetta</div> <p>Bayonetta</p> </div> </li> <li style="background-image: url(lara.jpg);"> <div class="slide-inner"> <div>Lara Croft</div> <p>Tomb Rider</p> </div> </li> <li style="background-image: url(aloy.jpg);"> <div class="slide-inner"> <div>Aloy</div> <p>Horizon Zero Dawn</p> </div> </li> <li style="background-image: url(ada.jpg);"> <div class="slide-inner"> <div>Ada Wong</div> <p>Resident Evil</p> </div> </li> <li style="background-image: url(senua.jpg);"> <div class="slide-inner"> <div>Senua</div> <p>Hellblade</p> </div> </li> <li style="background-image: url(kat.jpg);"> <div class="slide-inner"> <div>Kat</div> <p>Devil May Cry</p> </div> </li> </ul> </div> </div> |
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 |
.rotating-slider-container { width: 100%; height: 500px; margin: 20px 0; overflow: hidden; } .rotating-slider{ margin: 40px auto 0 auto; position: relative; } .rotating-slider ul.direction-controls { list-style: none; margin: 0; padding: 0; position: absolute; bottom: -90px; display: flex; width: 100%; justify-content: center; } .rotating-slider ul.direction-controls li button{ background: rgba(51, 122, 183, 0.8); border: none; outline: none; color: white; cursor: pointer; font-size: 40px; font-weight: bold; height: 60px; width: 60px; padding-bottom: 10px; text-align: center; transition: background 0.35s; } .rotating-slider ul.direction-controls li button:hover { background: rgba(51, 122, 183, 1); } .rotating-slider ul.direction-controls li.left-arrow button { border-radius: 100% 0 0 100%; } .rotating-slider ul.direction-controls li.right-arrow button { border-radius: 0 100% 100% 0; } .rotating-slider ul.slides { border-radius: 50%; height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; top: 0; left: 50%; transform: translateX(-50%) rotate(0); transform-origin: center center; width: 100%; text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); color: #FFF; font-family: Verdana, sans-serif; font-weight: bold; } .rotating-slider ul.slides .slide-inner { position: absolute; bottom: 80px; right: 190px; } .rotating-slider ul.slides .slide-inner div { font-size: 36px; text-transform: uppercase; } .rotating-slider ul.slides .slide-inner p { font-size: 22px; margin-top: 10px; } .rotating-slider ul.slides li{ background-color: #ecf0f1; background-position: center; background-size: cover; display: block; list-style: none; position: absolute; top: 0; left: 50%; text-align: center; transform-origin: bottom center; width: 100%; box-sizing: content-box; } |
Подключаем библиотеку jQuery (если не подключена ранее), плагин jquery.rotating-slider.js или минимизированный jquery.rotating-slider.min.js и инициализируем:
1 2 3 4 5 6 |
$(function() { $('.rotating-slider').rotatingSlider({ slideHeight : 360, slideWidth : Math.min(480, document.querySelector('.rotating-slider-container' ).offsetWidth) }); }); |
Название | По умолчанию | Описание |
---|---|---|
autoRotate | true | Автоматический поворот слайдера |
autoRotateInterval | 6000 | Интервал задержки в миллисекундах при автоматическом повороте |
draggable | true | Перетаскивание слайдов мышью |
directionControls | true | Показывает кнопки для перелистывания |
directionLeftText | '‹' | Текст левой кнопки управления |
directionRightText | '›' | Текст правой кнопки управления |
rotationSpeed | 750 | Скорость перелистывания в миллисекундах |
slideHeight | 360 | Высота слайда |
slideWidth | 480 | Ширина слайда |
Колбэки: |
||
beforeRotationStart: function(){} | Функция, которая вызывается перед началом поворота | |
afterRotationStart: function(){} | Функция, которая вызывается после начала поворота | |
beforeRotationEnd: function(){} | Функция, которая вызывается перед окончанием поворота | |
afterRotationEnd: function(){} | Функция, которая вызывается после окончания поворота |
Слайдер на WebGL с красивой сменой фотографий по клику
Скрипт splitpic.js для смены мышкой одной фотографии на другую
Небольшой скрипт на jQuery с наклонной каруселью фотографий
Приветствую! Есть идея, но воплотить не получается, может быть есть варианты. И так, хочется при наведении на слайд, что бы он выдвигался немного вверх, пробовал двигать top и transform, но эффекта нужного не дает, т.к. у всех разный угол поворота и съезжают кто то влево кто то в право, только один нормально может приподниматься. Что еще можно попробовать прикрутить?
Тут или с самим плагином заморачиваться, т.к. через CSS ни top ни transform добавить не получится.
Или можно просто сделать зум фото на ховере, чтобы было посимпатичнее.
CSS:
А сами слайды ставить так:
Добрый вечер. Я пытаюсь адаптировать данный код на tilda (точнее пытаюсь его запустить на этом конструкторе)
что бы подключить библиотеку я пытаюсь указывать путь
и для инициализирования
но работать не хочет((
есть какие-нибудь идеи как это провернуть?
пытался подключить вот такой https://atuin.ru/blog/3d-karusel-izobrazhenij/ и все получилось с первого раза, но там ничего не подключал (в плане ни каких дополнительных библиотек)
Разобралмя, тильда не хочет грузить отдельно скрипты по ссылкам. пришлось просто скопировать весь плагин в отельные скрипт, и из него уже инициализировать)
А можете пожалуйста поделиться кодом для тильды?
Александр, а где подкрутить, дабы он адаптивным стал?
Он и есть адаптивный, только собирается при загрузке страницы.
Можно попробовать его заного запустить через:
А если речь идет о тексте, то обычными медийными запросами, например:
Круто конечно, но желательно еще написать, в каких браузерах работает данный слайдер. И что будет отображаться, если браузер не будет поддерживать этот эффект?
Да черт его знает в каких оно работает 🙂 Я проверяю все только в мозиле и хроме.
У разработчика написано, что не работает в Internet Explorer и Edge, т.к. они не поддерживают clip-path, но этому плагину 3 года.
На MDN в поддержке clip-path указаны все браузеры.