Адаптивный слайдер изображений
22.08.2017 128 0 Administrator

Адаптивный слайдер изображений

Описание:


Адаптивный слайдер изображений для каталог файлов,  подойдет для кино сайтов также для игровых сайтов.


Установка:

Загрузите папку 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>



Таблицу стилей 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);     
}


Указать источник при копирование: Turbo-S.uCoz.ru

Вот и всё!

Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Скачать 1111_img.zip Размер: 2.1Kb 2
Поблагодарить автора Автор: Administrator
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать