Классный слайдер на jQuery

Здравствуйте. В этом уроке мы займемся созданием оригинального слайдера с помощью плагина на jQuery - Coda-Slider. Ниже вы можете просмотреть демонстрацию получившегося у меня слайдера и скачать исходные файлы урока:

demosourse

Шаг 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="К пятой панели">&#171; Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая &#187;</a></p>
</div>			
</div>			
<div class="panel" title="Вторая панель">				
<div class="wrapper">					
<h3>Вторая панель</h3>					
<p>Здесь будет текст Вашей второй панели.</p>					
<p><a href="#1" class="cross-link" title="К первой панели">&#171; Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая &#187;</a></p>				
</div>			
</div>					
<div class="panel" title="Третья панель">				
<div class="wrapper">					
<h3>Третья панель</h3>					
<p>Здесь будет текст Вашей третьей панели.</p>					
<p><a href="#2" class="cross-link" title="Ко второй панели">&#171; Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая &#187;</a></p>				
</div>			
</div>			
<div class="panel" title="Четвертая панель">				
<div class="wrapper">					
<h3>Четвертая панель</h3>					
<p>Здесь будет текст Вашей четвертой панели.</p>					
<p><a href="#3" class="cross-link" title="К третьей панели">&#171; Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая &#187;</a></p>				
</div>			
</div>			
<div class="panel" title="Пятая панель">				
<div class="wrapper">					
<h3>Пятая панель</h3>					
<p>Здесь будет текст Вашей пятой панели.</p>					
<p><a href="#4" class="cross-link" title="К четвертой панели">&#171; Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая &#187;</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>

Заключение.

Наш слайдер готов. Теперь Вы можете посмотреть, что получилось у Вас. А у меня на этом все. До новых встреч.

С искренним уважением Ваш jQuery-проводник - М. К.Wink

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ndoherty.com
Перевел: Максим Курочкин
Урок создан: 12 Июня 2009
Просмотров: 128291
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Июня 2009 10:14
    Виталий
    По-моему, что-то похожее уже было.
  • 13 Июня 2009 11:02
    МаксимКурочкин
    2Виталий: Возможно, Вы ошибаетесь, Виталий! Ничего похожего на этот слайдер еще не было=)
  • 13 Июня 2009 21:39
    AtonS
    Забыли добавить важный элемент - без которого работать не будет! Вот он - <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() }); </script>
  • 16 Июня 2009 22:18
    МаксимКурочкин
    2 AtonS: Вряд ли, все же работает! И все корректно отображается! Откуда у Вас такая инфа?=)
  • 22 Июня 2009 11:06
    Dop
    а если я хочу два слайдера разместить? кто ни будь пробовал? я бился сутки на разными слайдерами. не выходит ни чего! не работают. http://cssglobe.com/ этого умельца перерыл, там то же народ хотел бы понять как разместить на одной странице несколько слайдеров. умелец молчит как рыба. если уж делать эту библиотеку то делать для людей
  • 26 Сентября 2009 11:38
    shalom
    http://www.hieu.co.uk/blog/index.php/tabswitch/example/ Dor ещё интересно вставить таб в слайдер .
  • 25 Ноября 2009 16:40
    NikSTamb
    Сделал сайт с использованием вашего слайдера http://ratibortambov.ru/ Кодировка не работает. Что нужно сделать?
  • 25 Ноября 2009 16:47
    NikSTamb
    p.s. В Експлоере срабатывает после обновления. На остальных броузерах не работает. На локальном компе работает идеально.
  • 21 Декабря 2009 15:30
    btstudio
    Действительно классный слайдер но, сменил путь к файлам, всем пути переделат, а вот с прелоадером лажа. Не могу найти где изменить к нему пути. Подскажите, пожалуйста. P.S. я его перенес в папку img/Victotia/
  • 12 Января 2010 13:03
    Sinhrofazatron
    Как изменить цвет кнопок и сделать закруглённые углы ?
  • 24 Июня 2010 11:17
    Александр
    чтобы раскодировать файл coda-slider.1.1.1.pack.js нужно вместо eval написать alert и заменить полученный код, тогда можно будет сменить пути и тд.
  • 2 Июля 2010 23:39
    jackkuk
    А как добавить ещё вкладку?
  • 14 Июля 2010 10:15
    dmitry
    Хорошо бы было сделать ещё один урок по этому слайдеру. По настройке, у меня почему то в разных браузерах по разному отображается. Щас вот решаю проблемму. А так людям бы полезно было почитать, тем более уже давно вторая версия вышла
  • 14 Июля 2010 16:14
    dmitry
    Dop Пример вывода двух слайдеров есть на сайте: http://www.ndoherty.biz/demos/coda-slider/2.0/#1 (Пример номер 3)
  • 22 Октября 2010 11:43
    new_forward
    Пытаюсь поставить два таких слайдера рядом прописываю второму <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider2").codaSlider() }); </script> Получается див slider2 но нечего не получается... И еще интересует как заставить крутится автоматом....
  • 7 Ноября 2010 17:28
    kuper
    Для эксперимента пытался поставить этот слайдер в шапку сайта с этими же закладками. Результат: 1. боковые кнопочки для листания убрать-убрал, но вверху и низу слайда появились кликабельные надписи left и rigth - как ни пробовал не получается от них избавиться. Переискал во всех файлах и не нашёл. Где и как это сделать? 2. Размер слайдера и добавления новых вкладок нашёл как изменять и всунуть в них картинки. Но пока не удаётся эти вкладки привязать к определённым разделам сайта. Но с этим ещё поработаю. А вот как эти вкладки опустить в низ то же так и не понял где и в каком файле это можно сделать. Может кто подскажет? И вообще может кто расскажет или сделает как урок по поводу того, что же всё таки написано в фалах типа coda-slider.1.1.1.pack.js. Что можно в них менять и как это правильно делать?
  • 23 Марта 2011 09:54
    Deemonikus
    А как сделать так, чтобы при переходе от от одной панели к другой содержимое панели обновлялось?
  • 29 Июня 2011 18:11
    sadchenko
    Полезная вещь, искал искал и вот нашел... Спасибо автору!!!
  • 2 Сентября 2011 16:17
    shurik330
    Как можно совсем убрать верхние кнопки, но чтобы остался эффект прокрутки???
  • 1 Октября 2011 14:03
    lke1980
    Автору большое спасибо! В Firefoxe при добавлении вкладки сверху происхоит перенос вкладки на следущую строчку. Есть мысли, как от этого избавиться?
    • 15 Июля 2012 03:03
      webivan
      там ширина задана в атрибуте к примеру style="907px", поэтому и происхдит перенос новых вкладок, чтобы избавить от этого надо прописать стиль .объект {width: XXXpx !important;}
  • 26 Октября 2011 13:23
    alexreactor
    А как сделать чтобы слайдер автоматически через определенное время листался? Спасибо.
    • 17 Июля 2012 10:17
      webivan
      просто пропишите функцию рода:
      $.fn.slide = function()
      { $(this).click();
      }
      window.setInterval(function()
      { $('.stripNavR a').slide();
      }, 3000);
      Так же можно различные условия использовать)
  • 9 Февраля 2012 11:13
    Татьяна Иванова
    В IE9 все панели выстраиваются в столбик. Обратила внимание, что так во всех слайдерах, какие я только не смотрела!
  • 15 Июля 2012 02:59
    webivan
    Просто потрясающий слайдер! Спасибо огромное автору!)
  • 27 Октября 2012 19:04
    gurinov
    Вопрос по "внутренностям" этого слайдера. Как убрать title у панелей? Если просто убрать атрибут то при выводе будет писать undefined. Не знаете как поправить? И еще там при смене слайдера в адресной строке добавляется #, Можно как-то пофиксить? Заранее спасибо
  • 26 Января 2013 16:05
    alecs_al
    Для того, чтобы убрать TITLE у панелей можно добавить такую строчку в конец JS файла: setTimeout(function(){$('div.panel').attr('title','');},1000); Встречный вопрос: Как сделать так, чтобы во время прокрутки нельзя было нажимать на вкладки и стрелки (то есть игнорировать нажатия во время анимации)
  • 2 Июня 2013 20:24
    metelt57
    После установки слайдера страница сайта сместилась влево. Что исправить в css?
    • 9 Сентября 2013 21:10
      UraN32
      Я использовал код $.fn.slide = function() { $(this).click(); } window.setInterval(function() { $('.stripNavR a').slide(); }, 3000); как было сказано выше, все работает хорошо, но только при нажатии на перемотку мышью автопрокрутка не отключается и получается двойеая прокрутка, как бы это остановить по нажатию на перелистование мышью. Буду благодарен за подсказку.
    • 9 Сентября 2013 21:18
      UraN32
      И еще, подскажите пожалуйста можно сделать вращение по кругу, а то после пятого элемента перематывается в начало с мельканием предыдущих слайдов.
  • 11 Февраля 2014 12:49
    bad_negative
    странно, но в в фаерфоксе вкладки сверху налазиют друг на друга в ИЕ все окей)) как исправить знает кто?!))
  • 14 Августа 2014 00:09
    Viktoria Virchenko
    Подскажите, как поменять ссылки типа #1,#2 на обычные ссылки, чтобы прописать им a href ="demo.php"; a href ="demo2.php" Заранее спасибо!
^ Наверх ^