1 595 Slider

Слайдер текста


Для перелистывания текста используется плагин Carousel. Смена слайдов вручную при нажатии на стрелочку.

HTML

Сразу для трех секций:

<article>
    <section class="first">
        <a href="#slider1" class="next">Вперед</a>
        <a href="#slider1" class="prev">Назад</a>
        <div class="slidewrap">
            <ol class="slider" id="slider1">
                <li class="intro">
                    <h2>Слайдер 1</h2>
                    <div class="copy col-3">
                        <p>Контент</p>
                    </div>
                </li>
                <li>
                    <h2>Слайдер 2</h2>
                    <div class="copy col-2">
                        <p>Контент</p>
                    </div>
                </li>
            </ol>
        </div>
    </section>
    
    <section class="second twothirds">
        <div class="slidewrap">
            <ol class="slider" id="secondSlider">
                <li class="intro">
                    <h2>Слайдер 1</h2>
                    <div class="copy col-2">
                        <p>Контент</p>
                    </div>
                </li>
                <li>
                    <h2>Сладер 2</h2>
                    <div class="copy">
                        <p>Контент</p>
                    </div>
                </li>
                <li>
                    <h2>Слайдер 3</h2>
                    <div class="copy">
                        <p>Контент</p>
                    </div>
                </li>
            </ol>
        </div>
        <ul class="nextprev">
            <li><a href="#secondSlider" class="next">Вперед</a></li>
            <li><a href="#secondSlider" class="prev">Назад</a></li>
        </ul>
    </section>
    
    <section class="third onethird">
        <ul class="nextprev">
            <a href="#hambone" class="next">Вперед</a>
            <a href="#hambone" class="prev">Назад</a>
        </ul>
        <div class="slidewrap">
            <ol class="slider" id="hambone">
                <li class="intro">
                    <h2>Слайдер 1</h2>
                    <div class="copy">
                        <p>Контент</p>
                    </div>
                </li>
                <li>
                    <h2>Слайдер 2</h2>
                    <div class="copy col-2">
                        <p>Контент</p>
                    </div>
                </li>
            </ol>
        </div>
    </section>
    
</article>

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
    font-size: 62.5%;
    font-family: arial, helvetica, sans-serif;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: #ad2222;
    text-decoration: none;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
    transition: color .1s linear;
}
a:hover {
    color: #d92b2b;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
body {
    background: url(img/bg.jpg) repeat;
}
article {
    padding: 10px 30px;
}
article.note {
    background: #fff;
    background: rgba(255,255,255, .8);
}
section {
    float: left;
    position: relative;
    padding: 5px;
    margin: 15px 0 0 0;
    background-color: #dddedf;
    background-image: -webkit-gradient(
        linear, 
        0 90%,
        0 100%, from(rgba(255,255,255, .5)), to(#d1d1d1)
    );
    background-image: -moz-linear-gradient(
        top, 
        rgba(250,250,250,.4), 
        rgba(255,255,255,.0)
    );
    
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
section.twothirds { width: 54%; }
section.onethird { width: 30%; float: right; }
section ol {
    list-style: none;
    background: #fff;
    background: rgba(255,255,255,.9);
}
li {
    padding: 10px 0;
}
.slidewrap {
    border: 1px solid #deddde;
    overflow: hidden !important;
    position: relative;
    width: 100%;
}
.copy, h2 {
    padding: 0 10px;
}
.col-2 {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}
.col-3 {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
.prev,
.next { 
    display: block;
    text-indent: -9999px;
}
.prev { 
    background-image: url(img/icon_left.gif);
    background-position: center center;
    background-repeat: no-repeat; 
}
.next {
    background-image: url(img/icon_right.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
.first { position: relative; width: 100%; padding: 5px 0; }
.first .slidewrap { width: 92.6%; margin: 0 auto; }
.first .prev,
.first .next {
    float: left;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;
    width: 3.5%;
    height: 100px;
    display: block;
}
.first .prev { left: 0; background-position: 60% 50%; }
.first .next { right: 0; background-position: 40% 50%; }
.second .nextprev { padding: 8px 0 4px 0; clear: both; float: left; width: 100%; }
.second .nextprev li { display: inline; }
.second .prev,
.second .next {
    display: block;
    width: 15px;
}
.second .prev { float: left; }
.second .next { float: right; }
.third .nextprev {
    position: absolute;
    left: -30px;
    top: 0px;
    background-color: #dddedf;
    background-image: -webkit-gradient(
        linear, 
        0 90%,
        0 100%, from(#dddedf), to(#d1d1d1)
    );
    background-image: -moz-linear-gradient(
        top, 
        rgba(250,250,250,.4), 
        rgba(255,255,255,.0)
    );
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-radius: 3px 0 0 3px;
    -webkit-box-shadow: -1px 0 2px rgba(0,0,0,.15);
    -moz-box-shadow: -1px 0 2px rgba(0,0,0,.15);
    box-shadow: -1px 0 2px rgba(0,0,0,.15);
}
.third .next,
.third .prev {
    display: block;
    height: 25px;
    width: 25px;
    margin-left: 5px;
}
.third .next { border-bottom: 1px solid #d1d1d1; }
.third .prev { border-top: 1px solid #ededed; background-position: 7px center; }
h2 {
    font-size: 1.3em;
}
p { 
    font: 1.2em/1.4 arial, helvetica, sans-serif;
    padding: 5px 0;
}

JS

Подключаем jQuery, плагин Карусель и вызываем его:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/plugin.js" type="text/jаvascript"></script>
<script type="text/jаvascript">
    $(document).ready(function() {
        $('.slidewrap').carousel({
            slider: '.slider',
            slide: 'li',
            nextSlide: '.next',
            prevSlide: '.prev',
            speed: 300 // ms.
        });            
    });
</script>
Все доступные опции при вызове плагина показаны выше.
Скачать 1683Загрузок 11,54 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи