Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Слайдер с навигацией для сайта

Дата добавления: 03.06.2015 - 06:07
Добавил: Buger
Количество просмотров: 1140
Количество комментариев: 6
Размер файла: 1.23Mb
Рейтинг материала: 5.0 / 4
Слайдер с навигацией для сайта
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 4
В данном уроке речь пойдет о процессе создания замечательного слайдера с множеством полезных функций, которые сделают ваш сайт уникальным. В этом слайдере помещены все необходимые и возможные функции, мы постарались максимально упростить его разработку, при этом добавив все новые возможности. У нас будет 7 слайдов, с возможностью быстрой навигаций, как стрелками, так и панелями. Кроме этого есть функция автоматического проигрывания, а также развертывание на весь экран, что весьма хорошо скажется на улучшении отображения.



Шаг 1. HTML
Разметка будет достаточно простой, так как большую часть функций берет на себя плагин jlider, то нас остается создать неупорядоченный список, при этом обвернув все это в класс jlide:

Код
<ul class="jlider" id="jl2">
  <li><img src="nfs/1.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 1"/></li>
  <li><img src="nfs/2.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 2"/></li>
  <li><img src="nfs/3.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 3"/></li>
  <li><img src="nfs/8.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 4"/></li>
  <li><img src="nfs/5.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 5"/></li>
  <li><img src="nfs/6.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 6"/></li>
  <li><img src="nfs/7.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 7"/></li>
  </ul>


Также мы добавили ссылки для изображений и подписи, для отображения подписи у нас будет прозрачная плашка, которая будет отображаться в низу слайдера.

Шаг 2. CSS
Теперь займемся стилями, как мы говорили ранее, за большую часть работы отвечает плагин, это относится и к стилям, нам достаточно определить общие параметры контейнера , добавить параметры для плашки и правила при наведении на курсоры навигации:
Код
body {
  font-family: Arial, sans-serif;
  background: #294555;
  color: #fff;
}
h2 {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
pre {
  max-width: 600px;
  width: 100%;
  max-height: 300px;
  margin: 20px auto;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
  background-color: rgba(0,0,0,0.5);
  padding: 10px 0;
}
#checkout {
  background: #fff;
  padding: 10px;
  color: #333;
  font-size: 18px;
  width: 260px;
  display: block;
  text-align: center;
  margin: 100px auto;
}

.jlider_frame {
  position: relative;
  margin: 20px auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}


Шаг 3. JS
В плагине уже будут скомпилированы все параметры слайдера, нам достаточно вызвать данный плагин, при этом вас стоит ранее подключить его простым указанием пути в шапке документа, затем добавляем следующие строчки в место на сайте где у вас будет слайдер:
Код
<script type="text/javascript">
$(document).ready(function() {
$("#jl2").jliderSlide({
slideEffect : "random",
visiTime : 6000,
autoPlay : false,
width : "800px",
height : "420px",
photoCaption : true,
visiProgress : true,
noCopy : true,
hideControl : "hover",
navType : "line",
Loaded : function (curSlide) {
console.log('Loaded...!');
},
pressPlay : function (curSlide) {
console.log('Pressed Play button...!');
},
pressPause : function (curSlide) {
console.log('Pressed Pause button...!');
}
});
});
</script>


Здесь вы можете изменить несколько основным параметров, таких как размер, эффекты, и автоматическое воспроизведение. В результате простых действий и плагина jlide мы получили замечательный слайдер.

Готово!

Источник: Не указан
Timur-kavkazec
05.06.2015 - 14:18
если чуть уделить времени, можно из такого сделать и переключатель серий для плеера)
Бармен
03.06.2015 - 19:42
Мне нравиться biggrin
Buger
04.06.2015 - 15:43
Ну да, не плохой, жаль что не адаптивный. Так что подойдет для фиксированных сайтов
Fatur
05.06.2015 - 09:19
Но ты ведь можешь исправить столь огорчительный фактор! Сделай его адаптивным! Как время будет... biggrin
Buger
05.06.2015 - 09:22
Даже не собираюсь если честно, и так дел полно. Насколько ты знаешь, я мало внимания уделяю паблику
Fatur
05.06.2015 - 10:00
Есть такое! Ну и ладно, кому надо сам сделает!
Добавлять комментарии могут только зарегистрированные пользователи.