Слайдер Swiper для сайта — установка, использование, параметры

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

Достаточно разместить готовый слайдер под названием Swiper, указать настройки и привлекать больше клиентов!

Свипер адаптирован под мобильные устройства — android, iOS, iPhone и других. Он прекрасно выглядит на больших и маленьких экранах. Слайдер Swiper сам занимается адаптацией, ему достаточно указать количество слайдеров для разного разрешения экрана. Для больших мониторов можно указать больше, для маленьких экранах, например, для мобильных телефонов, можно указать 1-2 слайда. Swiper имеет множество настроек, все они легко используются и хорошо документированы.

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

Начало работы с Swiper

Десктопный и мобильный слайдер Swiper для сайта — установка, использование, параметры

1a. Загрузка и установка слайдера Swiper

Прежде всего, мы должны скачать необходимые файлы Swiper:

Мы можем загрузить их из репозитория Swiper GitHub
Или мы можем установить их через Bower, введите в терминал:
```
$ bower install swiper
```
Или, используя Atmosphere as Meteor package:
```
$ meteor add nolimits4web:swiper
```
Или, используя NPM
```
$ npm install swiper
```

В загруженном / установленном пакете нам нужны файлы из dist/папки.

Как использование Swiper из CDN

Если вы не хотите подключить Swiper к сайту, вы можете использовать его из Swiper на cdnjs . Доступны следующие файлы:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

Не забудьте изменить версию 4.xx на версию Swiper

2. Включите файлы Swiper на сайт / приложение.

После этого нам нужно включить CSS и JS-файлы Swiper на наш сайт / приложение. В вашем html-файле:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

3. Добавить Swiper HTML Layout

Теперь нам нужно добавить базовый макет Swiper в наше приложение:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

4. Swiper CSS Styles / Size

После этого нам может потребоваться установить размер Swiper в файле CSS:

.swiper-container {
    width: 600px;
    height: 300px;
}

Инициализирование слайдера для сайта Swiper

Наконец, нам нужно инициализировать Swiper в JS (подключение к сайту). Есть несколько вариантов / мест для этого:

Лучший вариант будет в встроенном скрипте или в файле сценария, который включен в самый конец тела (прямо перед закрывающим </body>тегом):

<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>
</body>

Если вы используете jQuery / Zepto на своем сайте, вы можете инициализировать его в любом из ваших JS-файлов, но убедитесь, что вы делаете это в document.readyсобытии:
```
  $(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })
  });
```

В противном случае (но не рекомендуется) вы можете инициализировать его в окне window.onload event:

  window.onload = function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })
  };

Как модуль CommonJs

Swiper полностью совместим с модулями CommonJs и может использоваться в среде Node.js:

var Swiper = require('swiper');

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

Как модуль ES

Пакет Swiper поставляется с версией ES-модуля, которую можно использовать там, где поддерживается или с такими поставщиками, как Webpack или Rollup:

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

Если вы используете его в качестве модуля ES, убедитесь, что:

вы включили Бабель или Buble для transpile его синтаксис ES5,
вы разрешили разрешать узлы для Swiper, поскольку в качестве зависимостей используются пакеты Dom7 и ssr-window .

Пример настройки Webpack для babel-loaderSwiper и Dom7:

module: {
  rules: [
    {
      test: /\.js$/, // Check for all js files
      exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      loader: 'babel-loader'
    }
  ]
}

Что дальше?

Как вы видите, очень легко интегрировать слайдер Swiper в ваш сайт или приложение. Итак, вот ваши следующие шаги:

Перейдите к документации API (полное описание свойств) чтобы узнать больше обо всех API Swiper и о том, как управлять им.
Посмотрите доступные демо слайдера .
Если у вас есть вопросы о Swiper, не стесняйтесь спрашивать их на нашем сайте!