Блог Сергея Князева

Скрипты
Слайдер для интернет магазина

Слайдер для интернет магазина

18.05.20166410
Допустим, что вы продаёте какой-либо товар на своём сайт, например выпечку. Почему бы не разместить на вашем сайте слайдер, в котором ваши покупатели смогут увидеть продукцию. Я предлагаю рассмотреть один отличный слайдер, который хорошо впишется в интернет магазине.
Отличием этого слайдера является то, что картинки появляются по очереди. А именно данный скрипт jQuery перелистывает сразу шесть картинок, а не как обычно по одной.

Установка

Для начала необходимо установить следующий div блок в нужное место. Для тех, чьи сайты находятся на Ucoz, предлагаю разместить этот код в новом "Глобальном блоке", так как это упростит настройки данного скрипта в будущем.
Код
<div class="prev"></div>
  <ul class="list">
  <li><img src="/item/1.png" class="img_list" /></li>
  <li><img src="/item/2.png" class="img_list" /></li>
  <li><img src="/item/3.png" class="img_list" /></li>
  <li><img src="/item/4.png" class="img_list" /></li>
  <li><img src="/item/5.png" class="img_list" /></li>
  <li><img src="/item/6.png" class="img_list" /></li>
  <li><img src="/item/7.png" class="img_list" /></li>
  <li><img src="/item/8.png" class="img_list" /></li>
  <li><img src="/item/9.png" class="img_list" /></li>
  <li><img src="/item/10.png" class="img_list" /></li>
  <li><img src="/item/11.png" class="img_list" /></li>
  <li><img src="/item/12.png" class="img_list" /></li>
  <li><img src="/item/13.png" class="img_list" /></li>
  <li><img src="/item/14.png" class="img_list" /></li>
  <li><img src="/item/15.png" class="img_list" /></li>
  <li><img src="/item/16.png" class="img_list" /></li>
  <li><img src="/item/17.png" class="img_list" /></li>
  <li><img src="/item/18.png" class="img_list" /></li>
  </ul>
  <div class="next"></div>
После того как вы определились с местом расположения блока со слайдером, установим CSS стили:
Код
.list {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  width: 100000px;
  text-align: left;
  background: url('/item/wood.png') bottom left no-repeat;
  }
  .list li {
  display: inline-block;
  width: 78px;
  margin: 2.2em 1.4em;
  position: relative;
  vertical-align: bottom;
  }
  .next, .prev {
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 5px;
  }
  .next {
  margin-top: -7.2em;
  right: 5%;
  background: url('/item/next.png') center center no-repeat;
  }
  .next:hover {
  background: rgba(255,255,255,0.3) url('/item/next.png') center center no-repeat;
  }
  .prev {
  margin-top: 3em;
  left: 5%;
  background: url('/item/prev.png') center center no-repeat;
  }
  .prev:hover {
  background: rgba(255,255,255,0.3) url('/item/prev.png') center center no-repeat;
  }

.img_list{
width:80px;
}
Теперь нам осталось прикрепить JS скрипт:
Код
<script type="text/javascript" src="/item/script.js"></script>
Основные манипуляции проделаны. Осталось создать папку item и загрузить в неё картинки и скрипт, которые я прикрепил к данной теме. Также подмечу, что если вы хотите установить свои картинки, то просто замените адрес в скрипте (/item/1.png).

Установка для автоматического обновления

Если вы хотите, что бы картинки вставлялись автоматически, то создайте новый информер (Инструменты -> Информеры -> Создать). Далее выбираем "Интернет магазин" - "Материалы" - "В случайном порядке". И в код информера вставьте следующий код:
Код
<li><img src="$IMG_URL1$" class="img_list" /></li>
Завершаю установку в нужное место вставьте код:
Код
<div class="prev"></div>
  <ul class="list">
$MYINF_1$
</ul>
  <div class="next"></div>

На этом всё. Спасибо, что читаете мой блог. Если возникнут вопросы, пишите их в комментариях.
Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.