Javascript, Jquery: Простой и легкий слайдер

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

Слайдер мы будет создавать с использованием библиотеки JQuery. В наш слайдер мы заложим функционал настроек (сделаем опциональное автопереключение).
Первый этап — создаем верстку. Обратите внимание на жирное выделение. Данным атрибутом мы будем назначать id элементов для навигации по слайдам. Главное что нужно сделать — указать размеры нашего слайдера. Все остальные стили не обязательны. Вы можете оформить слайдер как Вам угодно.

<style>
.fs-slider { border: 1px solid #000; width: 400px; height: 200px; } /*задаем размеры слайдера */
.fs-slider .image {  width: 400px; height: 200px; background-size: cover; background-position: center center; } /* задаем стиль содержимого слайда */
</style>

<a id="fsl" href="javascript:;" title="Назад">Назад</a>
<a id="fsr" href="javascript:;" title="Вперед">Вперед</a>

<div data-nav-left="fsl" data-nav-right="fsr" id="fs-slider" class="fs-slider">
<div class="fs-slides">
   <div class="fs-slide">
       <div class="image" style="background-image:url('/wp-content/uploads/samples/8c5c9b8ba323.jpg')"></div>
   </div>
   <div class="fs-slide">
       <div class="image" style="background-image:url('/wp-content/uploads/samples/1225141003_1-21.jpg')"></div>
   </div>
   <div class="fs-slide">
       <div class="image" style="background-image:url('/wp-content/uploads/samples/1225141006_1-11.jpg')"></div>
   </div>
</div>
</div>

Шаг второй — создаем скрипт слайдера с использованием jquery.

$.fn.fsSlider = function(settings) {
    settings = settings || {}; //settings не обязательный параметр
    var $this = this; //сохраним ссылку на текущий объект
    $this.settings = { //зададим настройки по умолчанию
        autoPlay: 10 //Автоматически слайды меняем через 10 секунд (по умолчанию)
    };
    $.extend($this.settings, settings); //соединим настройки из параметра с настройками по умолчанию

    function _fsSliderNav(offset) { //функция листания слайдов
        $this.current += offset;
        $this.current = $this.current < 0 ? $this.count - 1 : $this.current % $this.count; //считаем какой слайд следующий
        $this.find('.fs-slides').animate({ left: '-' + ($this.width() * $this.current) + 'px' }, 'fast'); //сдвигаем блок слайдов влево до текущего слайда
    }

    function _clearAutoPlay() { //останавливаем автосмену слайдов
        if($this.autoPlayTimer != null) {
            clearInterval($this.autoPlayTimer);
            $this.autoPlayTimer = null;
        }
    }

    $this.current = 0; //первый слайд
    $this.count = this.find('.fs-slides .fs-slide').length; //считаем число слайдов
    $this.autoPlayTimer = $this.settings.autoPlay > 0
        ? setInterval(function() { _fsSliderNav(1); }, $this.settings.autoPlay * 1000)
        : null; //если настройка autoPlay больше нуля, запускаем автосмену

    //задаем стили слайдеру, пусть они создаются автоматом.
    //это позволит экономить время, чтобы не писать одни и те же стили каждый раз
    //заметьте, что здесь жесткая привязка к классам html тегов
    $this.css({
        overflow: 'hidden',
        position: 'relative',
    });
    $this.find('.fs-slides').css({
        width: ($this.count * $this.width()) + 'px',
        height: $this.height() + 'px',
        position: 'absolute',
        top: '0px',
        left: '0px',
    });
    $this.find('.fs-slide').css({
        position: 'relative',
        height: $this.height() + 'px',
        float: 'left',
        width: $this.width() + 'px'
    });

    //если указан id стрелки влево и она существует, повесим событие клика на нее
    if($this.data('nav-left') && $('#' + $this.data('nav-left')).length == 1) {
        $('#' + $this.data('nav-left')).click(function() {
            _fsSliderNav(-1);
            _clearAutoPlay(); //отключаем автопереключение, если нажали на навигацию
        });
    }

    //если указан id стрелки вправо и она существует, повесим событие клика на нее
    if($this.data('nav-right') && $('#' + $this.data('nav-right')).length == 1) {
        $('#' + $this.data('nav-right')).click(function() {
            _fsSliderNav(1);
            _clearAutoPlay(); 
        });
    }
}

//Создаем слайдер
$('#fs-slider').fsSlider();

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

Назад | Вперед