
Для создания круглой формы плагин использует 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: 6px; 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(){} | Функция, которая вызывается после окончания поворота |
Скрипт на jQuery и jQuery UI для смены одной фотографии на другую
Адаптивный слайдер новостных карточек или другой информации
Диагональная карусель фотографий управляемая движением мышки или пальца
Приветствую! Есть идея, но воплотить не получается, может быть есть варианты. И так, хочется при наведении на слайд, что бы он выдвигался немного вверх, пробовал двигать top и transform, но эффекта нужного не дает, т.к. у всех разный угол поворота и съезжают кто то влево кто то в право, только один нормально может приподниматься. Что еще можно попробовать прикрутить?
Тут или с самим плагином заморачиваться, т.к. через CSS ни top ни transform добавить не получится.
Или можно просто сделать зум фото на ховере, чтобы было посимпатичнее.
CSS:
А сами слайды ставить так:
Добрый вечер. Я пытаюсь адаптировать данный код на tilda (точнее пытаюсь его запустить на этом конструкторе)
что бы подключить библиотеку я пытаюсь указывать путь
и для инициализирования
но работать не хочет((
есть какие-нибудь идеи как это провернуть?
пытался подключить вот такой https://atuin.ru/blog/3d-karusel-izobrazhenij/ и все получилось с первого раза, но там ничего не подключал (в плане ни каких дополнительных библиотек)
Разобралмя, тильда не хочет грузить отдельно скрипты по ссылкам. пришлось просто скопировать весь плагин в отельные скрипт, и из него уже инициализировать)
А можете пожалуйста поделиться кодом для тильды?
Александр, а где подкрутить, дабы он адаптивным стал?
Он и есть адаптивный, только собирается при загрузке страницы.
Можно попробовать его заного запустить через:
А если речь идет о тексте, то обычными медийными запросами, например:
Круто конечно, но желательно еще написать, в каких браузерах работает данный слайдер. И что будет отображаться, если браузер не будет поддерживать этот эффект?
Да черт его знает в каких оно работает 🙂 Я проверяю все только в мозиле и хроме.
У разработчика написано, что не работает в Internet Explorer и Edge, т.к. они не поддерживают clip-path, но этому плагину 3 года.
На MDN в поддержке clip-path указаны все браузеры.