Вращающийся по окружности слайдер

Для создания круглой формы плагин использует css-свойство clip-path, в результате чего получается окружность из любого количества слайдов

Пример:

  • Bayonetta

    Bayonetta

  • Lara Croft

    Tomb Rider

  • Aloy

    Horizon Zero Dawn

  • Ada Wong

    Resident Evil

  • Senua

    Hellblade

  • Kat

    Devil May Cry

HTML:

CSS:

JS:

Подключаем библиотеку jQuery (если не подключена ранее), плагин jquery.rotating-slider.js или минимизированный jquery.rotating-slider.min.js и инициализируем:

Источники:

  • Плагин Rotating-Slider-jQuery-Plugin на github
  • Оригинальное демо на codepen

Настройки:

Название По умолчанию Описание
autoRotate true Автоматический поворот слайдера
autoRotateInterval 6000 Интервал задержки в миллисекундах при автоматическом повороте
draggable true Перетаскивание слайдов мышью
directionControls true Показывает кнопки для перелистывания
directionLeftText '‹' Текст левой кнопки управления
directionRightText '›' Текст правой кнопки управления
rotationSpeed 750 Скорость перелистывания в миллисекундах
slideHeight 360 Высота слайда
slideWidth 480 Ширина слайда
Колбэки:
beforeRotationStart: function(){} Функция, которая вызывается перед началом поворота
afterRotationStart: function(){} Функция, которая вызывается после начала поворота
beforeRotationEnd: function(){} Функция, которая вызывается перед окончанием поворота
afterRotationEnd: function(){} Функция, которая вызывается после окончания поворота

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • PiVirus:

    Приветствую! Есть идея, но воплотить не получается, может быть есть варианты. И так, хочется при наведении на слайд, что бы он выдвигался немного вверх, пробовал двигать top и transform, но эффекта нужного не дает, т.к. у всех разный угол поворота и съезжают кто то влево кто то в право, только один нормально может приподниматься. Что еще можно попробовать прикрутить?

    Ответить
    • Alexander:

      Тут или с самим плагином заморачиваться, т.к. через CSS ни top ни transform добавить не получится.
      Или можно просто сделать зум фото на ховере, чтобы было посимпатичнее.

      CSS:

      .slides li img {
      	position: absolute;
      	width: 100%;
      	height: 100%;
      	top: 0;
      	left: 0;
      	transition: transform 0.5s;
      }
      .slides li:hover img {
      	transform: scale(1.1);
      }

      А сами слайды ставить так:

      <li>
      	<img src="ada.jpg">
      	<div class="slide-inner">
      		<div>Ada Wong</div>
      		<p>Resident Evil</p>
      	</div>
      </li>
      Ответить
  • Дмитрий:

    Добрый вечер. Я пытаюсь адаптировать данный код на tilda (точнее пытаюсь его запустить на этом конструкторе)

    Подключаем библиотеку jQuery (если не подключена ранее), плагин jquery.rotating-slider.js или минимизированный jquery.rotating-slider.min.js и инициализируем:

    что бы подключить библиотеку я пытаюсь указывать путь

    < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js"></ script>

    и для инициализирования

    < script src="https://atuin.ru/demo/js/jquery.rotating-slider.js"> 
    $(function() {
        $('.rotating-slider').rotatingSlider({
            slideHeight : 360,
            slideWidth : Math.min(480, document.querySelector('.rotating-slider-container' ).offsetWidth)
        });
    });
    </ script >

    но работать не хочет((
    есть какие-нибудь идеи как это провернуть?
    пытался подключить вот такой https://atuin.ru/blog/3d-karusel-izobrazhenij/ и все получилось с первого раза, но там ничего не подключал (в плане ни каких дополнительных библиотек)

    Ответить
    • Дмитрий:

      Разобралмя, тильда не хочет грузить отдельно скрипты по ссылкам. пришлось просто скопировать весь плагин в отельные скрипт, и из него уже инициализировать)

      Ответить
  • Константин:

    Александр, а где подкрутить, дабы он адаптивным стал?

    Ответить
    • Alexander:

      Он и есть адаптивный, только собирается при загрузке страницы.
      Можно попробовать его заного запустить через:

      $(window).on('resize', function(){…});

      А если речь идет о тексте, то обычными медийными запросами, например:

      @media screen and (max-width:991px) {}
      Ответить
  • Дмитрий:

    Круто конечно, но желательно еще написать, в каких браузерах работает данный слайдер. И что будет отображаться, если браузер не будет поддерживать этот эффект?

    Ответить
    • Alexander:

      Да черт его знает в каких оно работает 🙂 Я проверяю все только в мозиле и хроме.
      У разработчика написано, что не работает в Internet Explorer и Edge, т.к. они не поддерживают clip-path, но этому плагину 3 года.
      На MDN в поддержке clip-path указаны все браузеры.

      Ответить