Галерея-это универсальное средство, которое помогает красиво организовать картинки на сайте. Различный креативный подход к поставленному вопросу позволяет привлечь не только внимание пользователя к необходимому материалу, но и добавить изюминку на сайт. В данном уроке мы рассмотрим как создать достаточно простую и практичную галерею с эффектом скольжения изображений справа на лево при помощи jquery и небольших стилей css. Основная идея состоит в том, что фокусировка направлена на одно изображение, а при выборе другого происходит скольжение.
Такой вариант галереи будет отличным решением для мультимедийного сайта или сайта портфолио. И так, давайте приступим.
Шаг 1. HTML
Нам необходимо, впрочем как всегда, создать список с порядком вывода изображений:
<div class="slider">
<ul>
<li class="active">
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
</ul>
</div>
У нас есть класс active который будет указывать активное изображение.
Шаг 2. CSS
Нам необходимо добавить общие параметры для галереи, которые будут содержать правильное отображение галереи с права на лево, окантовка для изображений, и размер полускрытых изображений:
.slider {
position: relative;
left: -320px;
margin-left: 50%;
}
ul {
white-space: nowrap;
overflow: visible;
position: relative;
left: 0;
transition: left 1s;
}
li {
display: inline-block;
margin: 20px;
cursor: pointer;
height: 422px;
}
li img {
border: 10px solid #FFF;
box-shadow: 0 3px 6px 0 #999;
display: block;
height: 300px;
opacity: 0.6;
margin-top: 50px;
transition: height 1s, opacity 0.5s, margin-top 1s;
}
li:hover img {
box-shadow: 0 3px 6px 0 #333;
}
li.active img {
margin-top: 0;
height: 400px;
opacity: 1;
}
Шаг 3. JavaScript
Нам необходимо простые функции для правильного отображения активного изображения и направленного движения галереи:
(function() {
$("li").on("click", function(){
var item = $(this),
pos = "-"+(item.index() * 515)+"px";
item.addClass("active");
item.siblings().removeClass("active");
$("ul").css("left", pos);
});
})();
Вот и все. Готово!
Материал взят из зарубежного источника - codepen.io/northproject/pen/yAHom и представлен исключительно в ознакомительных целях.