Для перелистывания текста используется плагин 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;
}

javascript

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/plugin.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.slidewrap').carousel({
            slider: '.slider',
            slide: 'li',
            nextSlide: '.next',
            prevSlide: '.prev',
            speed: 300 // ms.
        });            
    });
</script>

Все доступные опции при вызове плагина показаны выше.

СКАЧАТЬСкачек: 1537
11,54 Kb
Кто скачал?

ДЕМОПосмотреть
пример