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

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
Набор всевозможных скриптов
View More
2 671 17:22

Полноэкранный слайдер с вертик...
Оригинальный адаптивный шаблон полноэкранного слайде...
View More
0 770 23:35

Вид похожих материалов [для uC...
Данная функция часто встречается на кино сайтах, вид...
View More
4 2065 22:19

Слайдер контента на CSS3 и jQu...
В интернете можно часто встретить слайдеры изображен...
View More
0 735 00:11

Feedback: 0