Как создать слайдер с навигацией для сайта

Слайдер весьма удобная штука на сайте где дизайнер хочет донести информацию до читателя с помощью графика, красивая организация, лаконичный дизайн позволяет поместить множество информации в достаточно небольшом пространстве, при этом слайдер не останется без внимания посетителя, так как всегда находится на видном месте. В сегодняшнем уроке речь пойдет о процессе создания замечательного слайдера с множеством полезных функций, которые сделают ваш сайт уникальным.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В этом слайдере помещены все необходимые и возможные функции, мы постарались максимально упростить его разработку, при этом добавив все новые возможности. У нас будет 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>

</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);
}

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>

$(document).ready(function() {

$("#jl2").jliderSlide({

� : "random",

� : 6000,

� : false,

� : "800px",

� : "420px",

photoCaption : true,

visiProgress : true,

� : true,

� : "hover",

� : "line",

� : function (curSlide) {

console.log('Loaded...!');

� : function (curSlide) {

console.log('Pressed Play button...!');

� : function (curSlide) {

console.log('Pressed Pause button...!');

}

});

</script>

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

Вот и все. Готово!

Интересно:

Print article

Опубликовал admin 28.05.2015 в 18:55, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Стасон Ударцев

При переключении картинок вылазить с низу вот такая гадость!
- serj_ben
  
  Странно, в мозилле все отлично работает.
Chipsed

Превосходный слайдер. Все работает.

Как создать слайдер с навигацией для сайта

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Опрос блога

Наши партнеры

Популярные статьи

Как создать слайдер с навигацией для сайта

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Опрос блога

Наши партнеры

Популярные статьи