Как создать простой слайдер картинок
Слайдер изображений на 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 :

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

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

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

  •   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.

      Ответить

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

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