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

• PiVirus: 02.04.2021 в 20:44

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

  Ответить
  • Alexander: 04.04.2021 в 15:19

    Тут или с самим плагином заморачиваться, т.к. через 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>

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

  Добрый вечер. Я пытаюсь адаптировать данный код на 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/ и все получилось с первого раза, но там ничего не подключал (в плане ни каких дополнительных библиотек)

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

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

    Ответить
    • Кристина: 23.06.2022 в 17:20

      А можете пожалуйста поделиться кодом для тильды?

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

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

  Ответить
  • Alexander: 27.02.2021 в 09:28

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

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

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

    @media screen and (max-width:991px) {}

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

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

  Ответить
  • Alexander: 01.02.2021 в 13:40

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

    Ответить