01 июн 2015
Слайдер с навигацией для сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Слайдер с навигацией для сайта .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Слайдер с навигацией для сайта

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

Готово!

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.