Как создать простой слайдер картинок
Слайдер изображений на JavaScript
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

Иногда при создании сайтов нам требуется вывести на его страницах слайдер изображений.

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

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

В слайдере который мы сегодня рассмотрим мы будем использовать html, css стили и JavaScript.

Хотя слайдер очень простой в котором код JavaScript занимает всего 3kb, но он прекрасно справляется с такими функциями как перелистывание слайдов, имеет два вида навигации (стрелочки вправо/влево и навигационные квадратики), присутствует небольшой эффект анимации, есть возможность задавать время перелистывания, делать авто прокрутку или же только перелистывать при клике, ну и другие возможности которые мы опишем на странице ниже.

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

1. И так,  для отображения слайдера пишем такой HTML код:

2. В самом низу страницы добавляем JS код настроек слайдера:

Описание вышеуказанных настроек:

  • id - id элемента где хранится слайдер
  • auto - скорость прокрутки слайдов  (можно указать целое цисло или же false для отключения)
  • resume - продолжать пролистывание после нажатия кнопки (true / false)
  • vertical - вертикальная смена слайдов (true / false)
  • navid - id списка навигации (квадратики)
  • activeclass - название класса который будет добавляться к элементу списка
  • position - стартовая позиция (указывается целое число)
  • rewind - пролистывать слайды бесконечно, или при переходе например к последнему слайду отматывает назад к первому (true / false)
  • elastic - добавляет дергающийся эффект при смене слайдов (true / false)
  • left - id кнопки влево
  • right - id кнопки вправо

3. Ну и последнее это стили CSS :

Ну вот в принципе и все, наш слайдер готов, так же вы можете скачать готовый исходник данного слайдера ниже!

Вас также может заинтересовать

12 комментариев

  •   25.02.2018 в 00:01

    Не рабочий этот скрипт

    Ответить
    • Василий
        25.02.2018 в 00:30

      А Вы то его хоть пробовали? :)
      Если он не рабочий то как же он в исходнике работает… Мистика :)

      Ответить
      •   25.02.2018 в 12:59

        Где в Вашем HTML коде стрелки (prev/next)?

        Ответить
        • Василий
            25.02.2018 в 14:11

          не совсем понял суть вопроса:
          Наверное Вы про это?

          и

          Ответить
  •   02.03.2018 в 15:32

    Добрый день подскажите я скачал предложенный Вами слайдер что нужно сделать и как чтоб добавить его на страници своего сайта?

    Ответить
    • Василий
        02.03.2018 в 19:42

      Если вкратце то вам нужно скопировать из исходника файлы к себе на сайт, и подключить их на требуемой вами странице, по сути перенести файлы и перекопировать файл index..
      Ну или обратится к тому кто понимает что с этим делать. там работы то по сути на пару минут.

      Ответить
  •   20.07.2018 в 12:53

    как увеличить размер картинки в центре

    Ответить
    • Василий
        20.07.2018 в 17:20

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

      Ответить
  •   12.08.2018 в 22:46

    Скрипт работает. но первоначально у меня стоит дисплей none. когда кликаешь блок появляется но картинки не меняются

    Ответить
    • Василий
        12.08.2018 в 23:45

      Там по сути не чему не работать… Проверьте нет ли у Вас конфликтов в JS а так же CSS.

      Ответить
  •   15.12.2018 в 21:17

    При перезагрузке страницы на слайдере справа от фото на короткое время появляется скролл бар. Как от этого избавиться?

    Ответить

Оставить комментарий

Пожалуйста, введите Ваше имя. Пожалуйста, введите действительный адрес электронной почты. Пожалуйста, введите сообщение.