Слайдеры являются одними из основных компонентов, которые используются на сайтах для различных целей. Мы можем создавать слайдеры изображений, видео или контента, использую  JQuery. JQuery является самой большой библиотекой JavaScript, которая используется для создания слайдеров. Почти все слайдеры можно разделить на несколько категорий, в которых будет отличаться техника перелистывания слайдов. 

Ниже приведены некоторые общие тенденции и методы, которые используют разработчики:

• Многоуровневые слайдеры - это последнее дополнение к ползунки с эффектом параллакса.
• Слайдеры с эффектами Fade In / Out  - такие слайдеры не имеют управления. Содержимое будет исчезать одно за другим.
• Ротатор баннеров - слайдеры, которые работают по круговой траектории.

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

Скачать Zip-файлы

Недостатки использования нескольких слайдеров JQuery 

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

• Каждый слайдер будет иметь множество скриптов и CSS файлов. Значительное количество скриптов и CSS файлов в свою очередь будут замедлять время загрузки вашего сайта, что отобразится на SEO.
• Для разных слайдеров могут потребоваться различные версии jQuery. Поэтому JQuery-файлы будут дублироваться.
• возможность конфликтов в кодах с другими слайдерами.

Учитывая вышеизложенные пункты, на одной странице желательно использовать один слайдер. Но это не есть обязательным. Также можно создавать различные конструкции, используя один слайдер. Для этого нужно просто выбрать гибкий слайдер, иметь некие навыки работы с JQuery и CSS, чтобы настроить его. В этом уроке рассмотрим  Rhino Slider, поскольку он является одним из самих гибких доступным слайдеров.

Введение в Rhino Slider

Rhino Slider представляет собой двойной слайдер JQuery под лицензией MIT. Более подробную информацию вы можете почитать здесь . Следующее изображение показывает вид Rhino слайдера. 

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

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

Мы можем достаточно легко изменить внешний вид слайдера. В этом уроке мы ознакомимся с тем, как изменить основные стили навигации. Давайте приступим.

Определение кнопок управления 

Rhino Slider имеет три кнопки навигации — следующий, предыдущий слайд и разбивка на страницы. Эти элементы представлены отдельными классами CSS, так что они могут быть определены достаточно легко.

Предыдущий слайд – rhino-prev

Следующий слайд – rhino-next

Пагинация – rhino-bullets

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

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

Демо

Шаг 1 — Управление Prev/Next

Как вы можете видеть, расположение кнопок prev/ next было изменено. Они теперь стоят в середине, а не снизу и размещены на черном фоне. Давайте посмотрим на изменение стилей:

.rhino-btn{

    background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
    z-index:10;
    display:block;
    text-indent:-999%;
    -webkit-user-select:none;
    -moz-user-select:none;
 user-select:none;

        /* Modified Styles */
    width:30px;
    height:25px;

}

.rhino-prev, .rhino-next {/* Modified Styles */ bottom:150px; }

.rhino-prev {
         /* Modified Styles */
     background: url("../img/prev-arrow.png") no-repeat scroll 13px 10px #000000;
         padding: 10px 5px;
         left : -45px;
}

.rhino-next {
        /* Modified Styles */
    background: url("../img/next-arrow.png") no-repeat scroll 15px 10px #000000;
        padding: 10px 5px;
        right:-45px;
}

.rhino-prev:hover { /* Modified Styles */}

.rhino-next:hover { /* Modified Styles */}
.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;
    /* Removed Style */
        /* background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat; */
}
.rhino-bullets {
    position: absolute;
    bottom: -3px;
    margin:0 0 0 -50px;
    z-index: 10;
    background: #fff;
    padding:0;
        /* Modified Styles */
        left: 45%;

}

.rhino-bullets li {
    float:left;
    display:inline;
    /* Modified Styles */
    padding:10px;
    background :#000;
    /*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
    display: block;
    width: 16px;
    cursor: pointer;
    background: white;
    font-size: 10px;
    text-align: center;
    padding: 6px 0 5px 0;
    color: #333;
    text-decoration:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
        /* Modified Styles */
    background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
        height: 3px;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
    color:#999;
    /* Removed Style */
        /* background:#eee; */
}
.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
    color:#fff;
    /* Removed Style */
        /* background:#5cd4e8; */
        /* Modified Style */
    background-position:0px -14px;
}

Создание превью

Эта часть будет немного сложнее. Здесь мы рассмотрим, как сделать поле с превьшками изображений, которые буду размещены вместо нумерации. Мы будем использовать комбинацию CSS и JQuery.

Демо

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

.rhino-bullets{

    position: absolute;
    bottom: -3px;
    z-index: 10;
    background: #fff;
    padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles 11 left: 45%; 12 margin: 0 0 0 -50px; 13 */

}

.rhino-bullets li {
    float:left;
    display:inline;
    /* Modified Styles */
    padding:1px;
    background :#000;
    /*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
    display: block;
    cursor: pointer;
    background: white;
    font-size: 10px;
    text-align: center;
    padding: 6px 0 5px 0;
    color: #333;
    text-decoration:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;

        /* Modified Styles */
        height: 55px;
        width: 102px;
        padding: 0;
        border:5px solid #eee;

        /* Removed Styles 45 background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28; 46 */
}
img{
max-width:100%;
}

Как только вы примените стили CSS, слайдер будет выглядеть следующим образом. 

Давайте поработаем с небольшим кодом  JQuery код для генерации изображений  для предварительного просмотра.

$('#slider li').each(function(){
    var image_src = $(this).find("img").attr("src");
    var panel_id = $(this).attr("id");
    $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' />");
});

• Возможно, вы отметили, что элементы  слайдера изображения имеют свои  ID.
• Таким образом, мы получим изображение SRC помощью SRC атрибутов  и  ID элементов Li над изображением.
• Затем мы находим соответствия   ID и определяем изображения для  предварительного просмотра.

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

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

Слайдер с вертикальным расположением превью

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

 Демо

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

.rhino-bullets{

    background: none repeat scroll 0 0 #FFFFFF;
    left: -136px;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    z-index: 10;

    /* Removed Styles 10 bottom: -3px; */

    /* Added Styles */
    top: -3px;
    border:1px solid #A7A5A5;

}

.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;

    /* Removed Styles 27 background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat; 28 */
}
.rhino-bullets li {
    margin: 0 2px;

    /* Modified Styles */
    display: block;
    border-bottom: 1px solid #eee;

    /* Removed Styles 38 float: left;*/
}

.rhino-bullets li a.rhino-bullet {
    -moz-user-select: none;
    background: none repeat scroll 0 0 white;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 10px;

    text-align: center;
    text-decoration: none;

    /* Modified Styles */
    height: 50px;
    padding: 5px;
    width: 170px;

}
.rhino-bullets li img{
    width:75px;
    height: 50px;
    float: left;
}

.rhino-bullets li p{
    font-family: helvetica;
    font-size: 12px;
    font-weight: bold;
}

Помимо уменьшенных изображений можно также добавить краткое описание или заголовок. Вы должны определить заголовки в массив JavaScript, как показано в коде ниже.

var info = ["Image Tagging","Rhino Slider","Tweet Book","Reward Tweet","Sliding Menu"];

                $('#slider li').each(function(index){
                    var image_src = $(this).find("img").attr("src");
                    var panel_id = $(this).attr("id");
                $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' /><p>"+info[index]+"</p>");
});

Использование слайдеров на одной странице 

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

Демо

Сначала нам нужно реализовать  Rhino Slider отдельно, определив различные  ID.

<ulid=«slider1»class=«slider»>

                <li><img src="img/slider/1.jpg" alt="" /></li>
                <li><img src="img/slider/2.jpg" alt="" /></li>
                <li><img src="img/slider/3.jpg" alt="" /></li>
                <li><img src="img/slider/4.jpg" alt="" /></li>
                <li><img src="img/slider/5.jpg" alt="" /></li>
            </ul>

            <ul id="slider2" class="slider">
               <li><img src="img/slider/4.jpg" alt="" /></li>
                <li><img src="img/slider/5.jpg" alt="" /></li>
                <li><img src="img/slider/1.jpg" alt="" /></li>
                <li><img src="img/slider/2.jpg" alt="" /></li>
                <li><img src="img/slider/3.jpg" alt="" /></li>
            </ul>

Следующий код JQuery будет добавить класс к навигации

$('#slider1').parent().addClass("slider1");
$('#slider2').parent().addClass("slider2");

Каждый слайдер будет иметь свои собственные стили для каждого класса.Рассмотрим следующий пример.

.slider1 .rhino-bullets {
    position: absolute;
    bottom: -3px;
    z-index: 10;
    background: #fff;
    padding:0;
        /* Modified Styles */
        bottom: -70px;
        /* Removed Styles 11 left: 45%; 12 margin: 0 0 0 -50px; 13 */
}
.slider2 .rhino-bullets {
    position: absolute;
    bottom: -3px;
    margin:0 0 0 -50px;
    z-index: 10;
    background: #fff;
    padding:0;
        /* Modified Styles */
        left: 45%;
}

Автор:  Rakhitha Nimesh

Перевод — Дежурка