Адаптивный слайдер изображений
Описание:
Адаптивный слайдер изображений для каталог файлов, подойдет для кино сайтов также для игровых сайтов.
Установка:
Загрузите папку img в корень вашего сайта!
Каталог файлов - Страница материала и комментариев к нему ставим где хотите увидеть, также можно под любой модуль установить.
Таблицу стилей CSS самый вниз добавляем!
Указать источник при копирование: Turbo-S.uCoz.ru
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Адаптивный слайдер изображений для каталог файлов, подойдет для кино сайтов также для игровых сайтов.
Установка:
Загрузите папку img в корень вашего сайта!
Каталог файлов - Страница материала и комментариев к нему ставим где хотите увидеть, также можно под любой модуль установить.
Код
[b]<div class="carousel_mask">
<ul class="carousel_items">
<?if($IMG_URL1$)?> <li class="img_frame">
<div class="container_car"><a href="$IMG_URL1$" class="ulightbox"><img src="$IMG_URL1$">
</a>
</div>
</li> <?endif?>
<?if($IMG_URL2$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL2$" class="ulightbox"><img src="$IMG_URL2$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL3$)?><li class="img_frame">
<div class="container_car"> <a href="$IMG_URL3$" class="ulightbox"><img src="$IMG_URL3$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL4$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL4$" class="ulightbox"><img src="$IMG_URL4$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL5$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL5$" class="ulightbox"><img src="$IMG_URL5$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL6$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL6$" class="ulightbox"><img src="$IMG_URL6$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL7$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL7$" class="ulightbox"><img src="$IMG_URL7$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL8$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL8$" class="ulightbox"><img src="$IMG_URL8$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL9$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL9$" class="ulightbox"><img src="$IMG_URL9$"></a>
</div>
</li> <?endif?>
</ul>
</div>
</div>
<ul class="carousel_items">
<?if($IMG_URL1$)?> <li class="img_frame">
<div class="container_car"><a href="$IMG_URL1$" class="ulightbox"><img src="$IMG_URL1$">
</a>
</div>
</li> <?endif?>
<?if($IMG_URL2$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL2$" class="ulightbox"><img src="$IMG_URL2$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL3$)?><li class="img_frame">
<div class="container_car"> <a href="$IMG_URL3$" class="ulightbox"><img src="$IMG_URL3$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL4$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL4$" class="ulightbox"><img src="$IMG_URL4$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL5$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL5$" class="ulightbox"><img src="$IMG_URL5$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL6$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL6$" class="ulightbox"><img src="$IMG_URL6$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL7$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL7$" class="ulightbox"><img src="$IMG_URL7$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL8$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL8$" class="ulightbox"><img src="$IMG_URL8$"></a>
</div>
</li> <?endif?>
<?if($IMG_URL9$)?><li class="img_frame">
<div class="container_car"><a href="$IMG_URL9$" class="ulightbox"><img src="$IMG_URL9$"></a>
</div>
</li> <?endif?>
</ul>
</div>
</div>
Таблицу стилей CSS самый вниз добавляем!
Код
/* Carousel */
.container_car {
position:relative;
overflow:hidden;
}
.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height: 0;
} .carousel {
position:relative;
margin:0 auto;
padding:0px 30px;
}
.carousel, .carousel_mask {
width:auto;
}
.carousel_btn_left, .carousel_btn_right {
display:block !important;
position:absolute;
background:url("/img/btn_carousel.png") no-repeat 0px 0px;
width:15px;
height:20px;
top:50px;
}
.carousel_btn_left {
left:10px;
}
.carousel_btn_right {
background:url("/img/btn_carousel.png") no-repeat 0px -20px;
right:10px;
}
.carousel_btn_left:active, .carousel_btn_right:active{ margin-top:1px; }
.carousel_mask {
position:relative;
overflow:hidden !important;
}
.carousel ul.carousel_items {
position:relative;
margin:0px;
}
.carousel ul.carousel_items li {
float:left;
margin-right:19px;
}
.carousel ul.carousel_items li img {
width:160px;
height:100px;
} .img_frame {
display:inline-block;
margin:4px;
padding:5px;
background-color:#fff;
line-height:0px;
border:1px solid #c0c1c2;
-moz-border-radius:3px;
border-radius:3px;
box-shadow:0px 0px 4px 0px rgba(0,0,0,0.12);
}
.container_car {
position:relative;
overflow:hidden;
}
.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height: 0;
} .carousel {
position:relative;
margin:0 auto;
padding:0px 30px;
}
.carousel, .carousel_mask {
width:auto;
}
.carousel_btn_left, .carousel_btn_right {
display:block !important;
position:absolute;
background:url("/img/btn_carousel.png") no-repeat 0px 0px;
width:15px;
height:20px;
top:50px;
}
.carousel_btn_left {
left:10px;
}
.carousel_btn_right {
background:url("/img/btn_carousel.png") no-repeat 0px -20px;
right:10px;
}
.carousel_btn_left:active, .carousel_btn_right:active{ margin-top:1px; }
.carousel_mask {
position:relative;
overflow:hidden !important;
}
.carousel ul.carousel_items {
position:relative;
margin:0px;
}
.carousel ul.carousel_items li {
float:left;
margin-right:19px;
}
.carousel ul.carousel_items li img {
width:160px;
height:100px;
} .img_frame {
display:inline-block;
margin:4px;
padding:5px;
background-color:#fff;
line-height:0px;
border:1px solid #c0c1c2;
-moz-border-radius:3px;
border-radius:3px;
box-shadow:0px 0px 4px 0px rgba(0,0,0,0.12);
}
Указать источник при копирование: Turbo-S.uCoz.ru
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Administrator
ИсточникМатериал взят с другого сайта
Комментарии (0)