Классный слайдер на jQuery
http://www.ruseller.com/lessons/les273/example/index.html#4
Здравствуйте. В этом уроке мы займемся созданием оригинального слайдера с помощью плагина на jQuery - Coda-Slider. Ниже вы можете просмотреть демонстрацию получившегося у меня слайдера и скачать исходные файлы урока:
Шаг 1. HTML-каркас слайдера.
Для начала мы должны составить html-каркас нашему будущему слайдеру. Она обязательно должна состоять из всех основных пунктов, которые у нас будут присутствовать. Ниже я привожу код такого каркаса:
HTML:
<div class="slider-wrap"> <div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="Первая панель">
<div class="wrapper">
<h3>Первая панель</h3>
<p>Здесь будет текст Вашей первой панели.</p>
<p><a href="#5" class="cross-link" title="К пятой панели">« Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Вторая панель">
<div class="wrapper">
<h3>Вторая панель</h3>
<p>Здесь будет текст Вашей второй панели.</p>
<p><a href="#1" class="cross-link" title="К первой панели">« Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Третья панель">
<div class="wrapper">
<h3>Третья панель</h3>
<p>Здесь будет текст Вашей третьей панели.</p>
<p><a href="#2" class="cross-link" title="Ко второй панели">« Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Четвертая панель">
<div class="wrapper">
<h3>Четвертая панель</h3>
<p>Здесь будет текст Вашей четвертой панели.</p>
<p><a href="#3" class="cross-link" title="К третьей панели">« Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Пятая панель">
<div class="wrapper">
<h3>Пятая панель</h3>
<p>Здесь будет текст Вашей пятой панели.</p>
<p><a href="#4" class="cross-link" title="К четвертой панели">« Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая »</a></p>
</div>
</div>
</div>
</div>
</div>
Шаг 2. Дизайн слайдера
Теперь, как и полагается, мы должны преобразить наш слайдер, т. е. немного его улучшить со стороны дизайна. Все те стили, которые мы применяли выше, в html-коде, на всех элементах нашего слайдера теперь мы просто их вставим между тегами <head> и </head> Ниже я привожу весь список этих стилей:
CSS:
<style type="text/css">
* { margin: 0; padding: 0
}
p { text-align: left; margin: 15px 0
}
p, ul { font-size: 13px; line-height: 1.4em
}
p a, li a { color: #39c; text-decoration: none
}
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100%
}
p#cross-links { text-align: center
}
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px
}
a:focus { outline:none
}
img { border: 0
}
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
body {
font-family: Verdana, Arial;
background: #ebebeb url("images/body-bg.png") repeat-y center;
color: #000;
width: 800px;
margin: auto;
text-align: center;
padding-bottom: 20px;
}
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap {
margin: 20px 0;
position: relative;
width: 100%;
}
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #000;
margin: auto;
width: 700px;
height: 460px;
clear: both;
background: #fff;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel {
float:left;
height: 100%;
position: relative;
width: 700px;
}
.stripViewer .panelContainer .panel .wrapper {
padding: 10px;
}
.stripNav {
margin: auto;
}
.stripNav ul {
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 2px;
}
.stripNav a {
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #fff;
text-decoration: none;
display: block;
padding: 0 15px;
}
.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }
.stripNav li a:hover {
background: #333;
}
.stripNav li a.current {
background: #000;
color: #fff;
}
.stripNavL, .stripNavR {
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
.stripNavL {
background: url("images/arrow-left.gif") no-repeat center;
}
.stripNavR {
background: url("images/arrow-right.gif") no-repeat center;
}
</style>
Шаг 3. "Прикрутка" основного фреймворка jQuery
Конечно же, как и в любом уроке по jQuery, мы не обойдемся без основного фреймворка. Этот файл я выложил также в исходниках в папку js. "Прикручивать" его к нашему документу со слайдером будем следующим образом между тегами <head> и </head>:
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
Шаг 4. "Прикрутка" всех нужных JavaScript'ов
На данном этапе работа нам понадобится не один и не два, а целых три JavaScript 'a, Ниже я перечисляю название каждого из них и его свойства:
* query-easing.1.2.pack.js - отвечает за плавное передвижение содержимого вкладок при нажатии на любую из них;
* jquery-easing-compatibility.1.2.pack.js - имеет те же функции, что и предыдущий JavaScript, однако вместе они дают более четкий и красивый эффект;
* coda-slider.1.1.1.pack.js - основной JavaScript этого слайдера, именно он правильно рассортировует вкладки в правильном порядке.
Все эти JavaScript'ы находятся в исходниках, которые я выложил выше, а конкретнее в папке js. Теперь нам всего лишь навсего остается прикрутить данные JavaScript'ы. Делаем это следующим образом, вставляя нижеприведенный код между тегами <head> и </head>:
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>