Автор Тема: Карусель товаров (изображений) для Shop-Script Lego5  (Прочитано 12270 раз)

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
С помощью такой карусели можно вывести наиболее интересные предложения магазина в любом месте. Установка достаточно простая, необходимы начальные знания html, css и прямые руки


Скачайте архив http://lugobor.ru/users/files/download30.html


Папки js и images с содержимым залить в ваш_сайт/css/ваша_тема/

Папки с содержимым carousel и img залить в корень сайта
 

В ваш_сайт/css/ваша_тема/stylesheet/stylesheet.css вниз добавить код
/*_____________________________________________ Карусель _____________________________________________*/

.carousel {
width:880px; /* ширина всего блока */
margin: 5px auto;
}
.carousel-wrapper {
width: 810px; /* ширина области карусели */
overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
margin:0px;
padding:0px;
}
.carousel-items {
width: 10000px; /* устанавливаем большую ширину для набора элементов */
position: relative; /* позиционируем блок относительно основной области карусели */
}
.carousel-block {
float: left; /* выстраиваем все элементы карусели в ряд */
width: 250px; /* задаём ширину каждого элемента */
padding: 10px 10px; /* делаем оступы, чтобы элементы не сливались */
}

/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
width: 25px;
height: 36px;
position: relative;
top: 80px;
cursor: pointer;
text-decoration:none;
}
.carousel-button-left a{
float: left;
background: url(../images/carousel-left.png);
}
.carousel-button-right a{
float: right;
background: url(../images/carousel-right.png);
}

/*********** SHADOW ***********/
.shadow-block{
float:left;
}
.shadow-block .t{
padding:0px;
background: url(../images/shadow/tc.jpg) repeat-x top;
}
.shadow-block .b{
padding:0px;
background: url(../images/shadow/bc.jpg) repeat-x bottom;
}
.shadow-block .t .t{
padding:0px;
background: url(../images/shadow/tl.jpg) no-repeat top left;
}
.shadow-block .t .t .t{
padding:4px 0px 0px 0px;
background: url(../images/shadow/tr.jpg) no-repeat top right;
}

.shadow-block .b .b{
padding:0px;
background: url(../images/shadow/bl.jpg) no-repeat bottom left;
}
.shadow-block .b .b .b{
padding:0px 10px 12px 10px;
background: url(../images/shadow/br.jpg) no-repeat bottom right;
}
.shadow-block .m{
padding:0px;
background: url(../images/shadow/l.jpg) repeat-y left;
}
.shadow-block .m .m{
padding:0px;
background: url(../images/shadow/r.jpg) repeat-y right;
}

Там же можно отредактировать стиль отображения

В ваш_сайт/css/ваша_тема/theme/head.tpl.html перед тегом </head> добавить код
<!--Карусель-->
<script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/js/carousel.js"></script>


В нужном вам месте вывести карусель кодом
<div class="carousel">

<div class="carousel-button-left"><a href="javascript:void(0);">&nbsp;</a></div>
<div class="carousel-button-right"><a href="javascript:void(0);">&nbsp;</a></div>


<div class="shadow-block" style="padding-left:0px;">
<div class="t"><div class="b"><div class="m"><div class="m">
<div class="t"><div class="t"><div class="b"><div class="b">
<div class="carousel-wrapper">
<div class="carousel-items">

<div class="carousel-block">
<img src="./carousel/1.jpg" alt="" />
</div>

<div class="carousel-block">
<img src="./carousel/2.jpg" alt="" />
</div>

<div class="carousel-block">
<img src="./carousel/3.jpg" alt="" />
</div>

<div class="carousel-block">
<img src="./carousel/4.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="./carousel/5.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="./carousel/6.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="./carousel/7.jpg" alt="" />
</div>
<div class="carousel-block">
<img src="./carousel/8.jpg" alt="" />
</div>

</div>
</div>
</div></div>
</div></div></div>
</div></div></div>
</div>
</div>

Пример работы карусели тут http://ndtsale.ru/

Как видно из кода, картинки складывайте в папку carousel в корне сайта

Все.

Естественно картинки можно делать ссылками.
« Последнее редактирование: Июня 19, 2015, 09:17:33 am от lugobor »
Студия web дизайна http://lugobor.ru