X
Заказать услугу

Адаптивный слайдер с ручным управлением и необычным эффектом

Плагины и Шаблоны для Wordpress
  • 2019-05-27
  • 3042 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

В этой статье я покажу как сделать Elastic Stack адаптивный слайдер с интересным эффектом. Данная статья, как и одна из недавних, скорее памятка для себя. Если вам понравится и станет полезной статья и слайдер из нее, то я буду только рад. Данный слайдер мне понравился своей анимацией и необычностью, которая уже приелась на стандартных слайдерах.

Адаптивный слайдер с ручным управлением и необычным эффектом

В конечном результате, у вас получится сделать слайдер своими руками для сайта, лендинга, который будет иметь примерно такой вид:



Пример


Скачать

По старой доброй традиции, в несколько шагов, устанавливаем такой же себе на сайт. Для начала добавим html код.

HTML код

Там где должен появится слайдер на вашем сайте, добавляйте следующий html код.

<ul id="elasticstack" class="elasticstack">
<li><img src="img/1.jpg" alt="01"/></li>
<li><img src="img/2.jpg" alt="02"/></li>
<li><img src="img/3.jpg" alt="03"/></li>
<li><img src="img/4.jpg" alt="04"/></li>
<li><img src="img/5.jpg" alt="05"/></li>
</ul>

По сути это простой ul список. Ему присвоен ID - elasticstack и такой же класс. Внутри пункты с изображениями. Изображений подключайте столько, сколько вам нужно.

CSS стили

Далее нашему слайдеру нужно добавить стилей:

.elasticstack {
position:relative;
margin:40px auto;
padding:0;
max-width: 1000px;
height:380px;
list-style: none;
}

.elasticstack li {
position: absolute;
z-index: 1;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
opacity: 0;
cursor: pointer;
}

.elasticstack li img {
display:block;
width:100%;
height:auto;
}

.elasticstack li.animate {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.elasticstack li.move-back {
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
}

В стилях нет ничего сверх загадочного, если немного разбираетесь в CSS и умеете пользоваться Google для поиска информации для изучения, то все понятно и останавливаться подробно на этом нет смысла. Скажу лишь одно, что главное здесь указана ширина слайдера - max-width: 1000px. То бишь максимальная ширина 1000 пикселей. Меньше при уменьшении экрана - можно, но больше нет. Можете менять значение на свое. Высота всего слайдера указана 380 пикселей, она постоянна не меняется. Но можете при адаптивной верстке для разных разрешений указать разную высоту.

Подключение скриптов

Последним шагом будет подключение скриптов. Они лежат в архиве, что вы можете скачать по ссылке вначале статьи. Эти три файла лежат в папке js. Можете их положить в другую, только путь потом меняйте соответственно. Так же после файлов мы запускаем слайдер указывая ID нашего слайдера elasticstack.

<script src="js/modernizr.custom.js"></script>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/elastiStack.js"></script>
<script>
new ElastiStack( document.getElementById( 'elasticstack' ) );
</script>

Можно по сути последний запуск слайдера не добавлять, то бишь подключать только3 файла и все. Запуск я показал, если вы будете менять айдишник слайдера или у вас их будет несколько. Тогда запускаете несколько раз, с указанием разных ID.

Совет / Дополнение

Если вы листали в примере слайдер, то могли заметить, что при перетягивании в стороны, появляется горизонтальная прокрутка. Если она вас не напрягает, то можете пропустить эту инструкцию, если же хотите избавится от нее, то советую заключить слайдер в родительский блок, который будет на всю ширину браузера. Если не получается слайдер заключить, то можно заключить весь сайт. После этого, этому блоку задать параметр CSS в стилях:

overflow:hidden;

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 7, в среднем: 4.4 из 5
Читайте также
Комментариев нет. Оставьте первый

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.