Галерея с эффектом скольжения фото на jQuery

Такой вариант галереи будет отличным решением для мультимедийного сайта или сайта портфолио. И так, давайте приступим.

Шаг 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);

});

})();

Вот и все. Готово!

  • FalleN

  • 2426

  • 1

  • 179

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!