Создаем свой слайдер для сайта

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

Что такое слайдер

Что такое слайдер

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

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

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

другими визуальными эффектами

Особое распространение слайдеры получили на ресурсах, занимающихся интернет-продажами.

С точки зрения психологии, визуальное представление товара в нескольких ракурсах во много раз увеличивает вероятность покупки:

увеличивает вероятность покупки

Некоторые специализированные конструкторы сайтов предоставляют пользователям на выбор несколько версий слайдеров для создаваемых шаблонов. Одним из самых популярных сервисов Рунета является ucoz. В зависимости от предназначения ресурса шаблон конструктора комплектуется определенным типом слайдера.

Несколько слайдеров, популярных в сети:

  • Tilted Content Slideshow – крутой слайдер, выводящий все изображения в случайном порядке с эффектом 3D анимации:
Tilted Content Slideshow
  • Anything Slider – позволяет отображать в своем окне не только картинки, но и видео, транслируемое через проигрыватель:
Anything Slider
  • Morphing Devices – слайдер с эффектом морфинга изображений. При этом один рисунок медленно перетекает (трансформируется) в другой. Два последних выводимых изображения можно поворачивать:
Morphing Devices

На чем пишутся слайдеры?

По архитектуре построения слайдер располагается ближе всего к веб-приложению, работа которого осуществляется на клиентской машине. Скрипт слайдера загружается браузером вместе с основным кодом страницы. Стиль может задаваться внутри кода. Но чаще всего характеристики внешнего вида устанавливаются с помощью каскадных таблиц стилей (CSS).

Построение внутреннего механизма слайдера происходит на одном из языков программирования. Чаще всего используется javascript. Для более полного понимания процесса создания слайдера рассмотрим пример его реализации:

<script type="text/javascript">
        var locations = new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg" );
        var currentImage = 0;

        function nextImage() {
            currentImage++;
            if (currentImage == locations.length) 
                currentImage = 0;                
            document.images["picture"].src = locations[currentImage];
            return false;
        }
    </script>
<body>
	<img src="img/1.jpg" name="picture" />
    <br />
    <a href="#" onclick="return nextImage()">Следующее изображение</a>

</body>
пример его реализации

Механизм смены изображения в коде этого простого примера задается с помощью javascript. Сначала методом Array () создается новый массив. В скобках задаются элементы массива (изображения). После него идет инициализация глобальной переменной currentImage.

Весь механизм смены изображений внутри слайдера заключен в функции function nextImage(). Внутри ее тела значению переменной currentImage каждый раз после вызова функции прибавляется 1. Затем ее значение сравнивается с длинной массива (locations.length). Если длина массива равняется переменной, то показ изображений начинается с первого элемента.

Строкой скрипта document.images[«picture»].src = locations[currentImage] через объектную модель документа происходит обращение к источнику рисунка. Значением currentImage устанавливается, какой из рисунков будет отображен. Перелистывание слайдера осуществляется нажатием на ссылку с помощью события onclick.

Ссылку можно легко поменять на html кнопку:

<input type="button" onclick="return nextImage()" value="Следующее изображение"/>
Ссылку можно легко поменять

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

Вот пример карусели на ее основе. Смена картинок происходит автоматически:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./carousel_files/jquery.min.js"></script>

        <style>
            #carousel{
                width:500px;
                height:300px; 
                overflow-x:hidden;
border: 4px double #33CCFF;
            }
            #track{
                width:2500px;
                position:relative;
            }
            #track div{
                width:500px;
                height:300px;
                float:left;
                position:relative;
            }

            div.red{
                background-image:url(img/1.jpg);
            }
            div.blue{
                background-image:url(img/2.jpg);
            }
            div.yellow{
                background-image:url(img/3.jpg);
            }
            div.green{
                background-image:url(img/4.jpg);
            }
			div.white{
                background-image:url(img/5.jpg);
            }
        </style>

    <script type="text/javascript">
      $(function(){

        var width = $('#track div').width();

        function carousel(){

                $('#track').delay(1000).animate({right: '+=' + width},1000, function(){

                    var first = $('#track div:first-child');

                    first.remove();

                    $(this).append(first);

                    $(this).css({right: '-=' + width});

                    carousel();

                });

        }

        carousel();

    });
    </script>

    </head>
    <body>
        <div id="carousel">
            <div id="track" style="right: 0px;">
            <div class="yellow">
			</div><div class="green">
			</div><div class="red">
			</div><div class="blue">
			</div><div class="white">
			</div>
			</div>
        </div>  
</body>
Карусель изображений

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

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

Решение вопроса

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

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