Создание сенсорной карусели на Bootstrap

Слайдеры — неплохой элемент дизайна, а иногда и необходимый, особенно на продающих лендингах. Его основное преимущество в удобном размещении элементов. При их просмотре у пользователя не возникнет напряжение.

Пояснения к терминам:

  1. "JQuery", "Bootstrap", "Ajax" — специальные веб-библиотеки, которые значительно расширяют возможности веб-разработчиков.
  2. <Link>, <style>, <div>, <ol> и <li> — HTML теги.
  3. Скрипты — JavaScript файлы, которые состоят из набора функций и команд, отвечающих за работу отдельных элементов или все страницы.

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

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

Для создания нам понадобится HTML, CSS и JavaScript, а также некоторые библиотеки. Основной частью является Bootstrap, но также потребуется библиотека JQuery, в частности плагин Swipe Carousel. Он предназначен для создания таких элементов.

Также нам понадобится плагин "Ajax".

Теги и свойства

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

Для начала теги <link> и <style>. Они используются для подключения внешних стилей и скриптов. Для подключения стилей необходимо ввести ссылку на него в атрибуте "href", тега <link>.

Скрипты подключаются в теге <script>, при помощи атрибута "src". Можно вписывать и внутренние скрипты. То же самое работает и со скриптами.

Основным блоком будет служить тег <div>. Он же будет использоваться для создания внутренних блоков слайда, в которых будут размещаться кнопки.

Основой для каждого слайда послужит элемент нумерованного списка <ol>, тег <li>. Каждый такой тег будет содержать в себе 1 слайд.

Картинки также будем добавлять через HTML, при помощи тега <img>.

Из CSS стилей будут использоваться общие стили форматирования текста, разметки слайдера, элементы позиционирование, изменение фона и так далее.

Создание сенсорного карусельного слайдера. HTML, CSS & JavaScript.

Для начала давайте подключим все необходимое. В тегах <link> подключим файл style.css, в котором будут содержаться основные стили. Во втором таком теге подключим стили из bootstrap.

После этого создадим 4 тега <script>, в которым подключим основные JS скрипты, bootstrap, jquery, ajax и swipe carousel.

Сделать слайдер на сайте

Далее делаем разметку страницы в HTML.

Создаем блок <div>, в нем будет размещен слайдер. Внутри создадим ещё несколько блоков < div> и 1 нумерованный список.

В список занесем основное содержимое, а блоки <div> оставим пустыми. Им нужно будет присвоить классы, как показано на картинке. С помощью этого мы будем стилизовать их при помощи наших библиотек.

Создание слайдера на сайте
<body>
<div class="container">
  <div id="carouselExampleIndicators" class="carousel slide my-carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/3.jpg" height="550" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/1.jpg" height="550" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/2.jpg" height="550" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Назад</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Вперед</span>
  </a>
</div>
</div>
</body>

После этого, нам необходимо провести инициализацию плагина "Swipe Carousel" и установить чувствительность нажатия при перелистывании слайдов.

Карусельный слайдер для сайта
<script>
  const carouselEl = $('.my-carousel');

// Bootstrap карусель должна быть загружена в первую очередь
carouselEl.carousel().swipeCarousel({
  sensitivity: 'high' // low, medium или high
});
</script>

Далее сделаем небольшую стилизацию. Для этого используем общие теги форматирования, позиционирования и другие свойства для изменения дизайна.

Заключение

Создание слайдера на сайт

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

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

Предупреждение! Если вы имеете плохие знания в области JavaScript программирования, то не следует изменять код скриптов. Это может негативно отразиться на общей работе слайдера.

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


Скачать слайдер

Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *