В конечном результате, у вас получится сделать слайдер своими руками для сайта, лендинга, который будет иметь примерно такой вид:
По старой доброй традиции, в несколько шагов, устанавливаем такой же себе на сайт. Для начала добавим 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;
Таким образом вы обрежете все что выходит за пределы страницы и горизонтальная прокрутка не появится больше.
На этом все, спасибо за внимание. 🙂
