» »

Слайдер автоматический ucoz


Слайдер автоматический ucoz

Красивый по дизайну слайдер который можно установить на сайт. Лучше всего и по конструкций его ставить или устанавливать на главную страницу. Во первых он будет выводить тот материал который вы в него загрузите. Здесь все просто вы ставите ссылку на картинки где в коде уже указано.
И потом можно сделать скорость как он будет перелистывать его. А так же на нем есть переключатели, белык кнопки, которыми вы так же можете воспользоваться и листать как книгу.
Код
<style>  
#content {  
/* Ширина слайдера */  
width:600px;  
margin:0px;  
}  
.slider {  
float:left;  
/* Ширина слайдера */  
width:600px;  
/* Высота слайдера */  
height:350px;  
position:relative;  
padding-bottom:26px;  
background:url(http://zornet.ru/CSS-ZORNET/Skript/bottom_shadow.png) no-repeat bottom center;  
}  
.sliderContent {  
float:left;  
/* Ширина слайдера */  
width:600px;  
/* Высота слайдера */  
height:350px;  
clear:both;  
position:relative;  
overflow:hidden;  
}  
.sliderArrows a {  
display:block;  
text-indent:-9999px;  
outline:none;  
z-index:50;  
background-image:url(http://zornet.ru/CSS-ZORNET/Skript/prev_next.png);  
width:42px;  
height:42px;  
position:absolute;  
top:50%;  
margin-top:-34px;  
}  
.prev {  
background-position:0 0;  
left:15px;  
}  
.prev:hover {  
background-position:0 -44px;  
}  
.next {  
right:15px;  
background-position:-44px 0;  
}  
.next:hover {  
background-position:-44px -44px;  
}  
.sliderContent .item {  
position:absolute;  
/* Ширина слайдера */  
width:600px;  
/* Высота слайдера */  
height:350px;  
background:#fff;  
}  
.sliderBullets {  
position:absolute;  
bottom:0;  
left:50%;  
z-index:50;  
margin-left:-45px;  
}  
.sliderBullets a {  
display:block;  
float:left;  
text-indent:-9999px;  
outline:none;  
margin-left:5px;  
width:10px;  
height:11px;  
background:url(http://zornet.ru/CSS-ZORNET/Skript/bullets.png) no-repeat;  
}  
.sliderBullets .active {  
background-position:0 -11px;  
}  
.sliderContent a {  
outline:none;  
}  
</style>  
<div class="slider dsslider">  
<div class="sliderContent">  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
<div class="item">  
<img src="ссылка на картинку" alt="" />  
</div>  
</div>  
</div>  
<script src="http://zornet.ru/CSS-ZORNET/Skript/mobilyslider.js" type="text/javascript">  
</script>  
<script type="text/javascript">  
$('.dsslider').mobilyslider({  
// Тип воспроизведения (vertical) или удалить всю строку  
transition: 'fade',  
// Скорость перелистывания  
animationSpeed: 800,  
// Автовоспроизведение включено  
autoplay: true,  
// Скорость автовоспроизведения  
autoplaySpeed: 3000,  
// Остановка во время наведения курсора (false)  
pauseOnHover: true,  
// Показывать кнопки вперёд назад (false)  
bullets: true,  
// Показывать нижние кнопки управления (false)  
arrowsHide: true  
});  
</script>


Чтобы вывести слайдер на центр, в самый верх скрипта поставьте это:

Код
<div align="center"><style>
05.03.2014 Просмотров: 2206 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
avatar
Tones 06.09.2014 14:481
0
Супер
Kosten
Kosten 06.09.2014 16:202
0
Tones, можно глануть как в работе он?
Dimstrik
Dimstrik 06.09.2014 16:423
0
Вот смотри "битая ссылка"
Kosten
Kosten 06.09.2014 17:354
0
С тенями на светлом шаблоне.. просто шикарно.
avatar
Tones 07.09.2014 09:175
0
а как сделать что бы на одной странице было например 3 таких слайдера подскажите???
Dimstrik
Dimstrik 07.09.2014 09:386
0
Тебе нужно всего 3 картинки в слайдере или полностью три слайдера?
Если полностью три слайдера просто ставь каждый раз код слайдера в то место где нужно и не забывай менять путь к картинкам если это нужно !
Kosten
Kosten 07.09.2014 19:267
0
Tones, думаю одного слайдера будет в самый раз. А то сильно грузить будет.
avatar
andr8070 11.10.2016 21:238
0
Здравствуйте. Понравился слайдер. Подскажите пожалуйста как адаптировать для мобильных устройств, на смартфонах не показывается. Что изменить или добавить в код? За ранее спасибо
Brung
Brung 11.10.2016 22:379
0
Нужно найти человека, который занимается мобильной адаптацией под мобильные устройства, а код и стили не кто не даст, нужно все делать на сайте.
avatar