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