Background Image

Автоматический слайдер для контента

Script

by — Category Script on

CSS

#slider {color:#2980b9;position:relative;font-size:16px;}
#slider p {padding:2px 0 7px;margin:0;}
#slider .slide {padding:0 50px;background:url(/icon/bq2.png) 0 0 no-repeat;}
.flex-direction-nav,.flex-direction-nav li {padding:0;margin:0;list-style:none;}
.flex-direction-nav a {
z-index:20;
position:absolute;
cursor:pointer;
display:block;
width: 15px;
height: 28px;
top:16px;
right:0;
background:url(/icon/blog-arrows.jpg);
overflow:hidden;
text-indent:100%;
white-space:nowrap;
}
.flex-direction-nav a:hover {background-position:0 -28px;}
.flex-direction-nav a.flex-prev {right:30px;}
.flex-direction-nav a.flex-next {background-position:-15px 0;}
.flex-direction-nav a.flex-next:hover {background-position: -15px -28px;}

Разметка

        <div id="slider">
                <div class="slide">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra in dui sit amet consequat.</p>
                 <p>- John Doe, creative director</p>
                </div>
                <div class="slide">
                 <p>Praesent vestibulum commodo mi eget congue. Ut pretium vel lectus vel consectetur.</p>
                 <p>- John Doe, creative director</p>
                </div>
                <div class="slide">
                 <p>Etiam quis aliquam turpis. Etiam in mauris elementum, gravida tortor eget, porttitor turpis.</p>
                 <p>- John Doe, creative director</p>
                </div>
        <div class="clr"></div>
        </div>

JavaScript

        <script type="text/javascript" src="/.s/t/1291/jquery.flexslider-min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#slider').flexslider({
                 selector: ".slide",
                 slideshowSpeed: 5000,
                 pauseOnHover: true,
                 controlNav: false
              });
            });
          </script>

Готово!


Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Мини скрипты для uCoz

    Мини скрипты для uCoz

    Набор всевозможных скриптов

    View More
    1 394 17:22
    Полноэкранный слайдер с вертикальной прокруткой

    Полноэкранный слайдер с вертик...

    Оригинальный адаптивный шаблон полноэкранного слайде...

    View More
    0 521 23:35
    Вид похожих материалов [для uCoz]

    Вид похожих материалов [для uC...

    Данная функция часто встречается на кино сайтах, вид...

    View More
    4 1455 22:19
    Слайдер контента на CSS3 и jQuery

    Слайдер контента на CSS3 и jQu...

    В интернете можно часто встретить слайдеры изображен...

    View More
    0 493 00:11
Метки: UCOZ, Content, Slider, Auto
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu