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

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

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

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

В этой статье я покажу как сделать 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;

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

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




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


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

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко