<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Мобильный сенсорный слайдер Swiper

Мобильный сенсорный слайдер Swiper

На этом уроке я расскажу как подключить и настроить самый современный сенсорный слайдер Swiper. Есть несколько причин, почему Swiper лучший слайдер для сайта:

  1. Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. Это значит, что у вас не будет лишнего запроса к серверу.
  2. Его API позволяет создавать собственную разбивку на страницы и кнопки навигации.
  3. Swiper использует для построения макетов с гибкой сеткой технологию Flexbox
  4. Swiper использует технику ленивой загрузки. Он задерживает загрузку изображений на неактивных слайдах, пока пользователь не проведет по ним пальцем. Это ускоряет загрузку страницы.
  5. Swiper абсолютно бесплатен и имеет открытый исходный код

Подключение слайдера Swiper к проекту


1) Переходим на официальный сайт Swiper

2) В разделе Get Started переходим по ссылочке и скачиваем два минифицированных файла swiper-bundle.min.css и swiper-bundle.min.js.

3) Оба файла подключаем к нашему проекту в HTML файле. Помимо скачанных файлов, создадим и также подключим два пустых CSS и JS файла для инициализации и кастомизации слайдера.

// в теге head
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="css/main.css">

// перед закрывающим тегом body
<script src="js/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>

Добавить базовый HTML-макет

Создаем простую HTML структуру и прописываем стандартные классы слайдера. Вместо Slide 1, 2, 3 и.т.д, прописываете ваш контент, это может быть текст, картинки и вообще любые теги.

<!-- Общий контейнер -->
<div class="swiper-container">
    <!-- Оболочка для слайдера -->
    <div class="swiper-wrapper">
        <!-- Оболочка для отдельного слайда -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

Инициализация Swiper

Для этого в main.js пропишем следующий код.

new Swiper('.swiper-container');

Чтобы увидеть как работает слайдер, нужно потянуть мышкой за картину на десктопах или пальцем на мобильных устройствах.

Настройка слайдера Swiper

Однако базовых настроек слайдера не всегда бывает достаточно, особенно если вы работаете по техническому заданию заказчика. Предусмотрена возможность добавлять дополнительные настройки в HTML разметку кастомный JS файл (main.js). Все дополнительные параметры должны отделяться друг от друга запятой.

Добавление стрелок навигации

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

<!-- Добавление стрелочек в HTML код -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

// JS файл
new Swiper('.swiper-container', {
    // Вывод стрелок навигации
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },

     ....
})

Вывод пагинации для слайдов

Дефолтный буллиты сделаны в виде кружков и они показываю на каком слайде мы сейчас находимся.

<!-- Добавление буллитов в HTML код -->
<div class="swiper-pagination"></div>

// JS код вывода пагинации
pagination: {
    el: '.swiper-pagination',
},

Добавление скроллбара

Включим возможность перетаскивания ползунка у скроллбара.

<!-- Добавление скроллбара в HTML код -->
<div class="swiper-scrollbar"></div>

// JS код вывода скроллбара
scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true
},

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

master284 master284 30.11.2020 18:32:07

Отличный и лёгкий плагин. Всегда читаю публикации Михаила Юрьевича. В этом слайдере важной особенностью есть возможность подстройка его в адаптивном варианте всего пары селекторов. И наступает полная адаптация. Достаточно прописать .swiper-container { max-width:600px; height: auto; } .swiper-slide img { max-width:100%; } И не надо мучиться с кучей CSS стилей. Если хотите вставить текст вместо картинок или совместно с ним, есть особенности. Размер шрифта сильно масштабируется вместе с адаптированием картинки!? Писать текст через теги Р не получается, только делить через тег ВR. При этом размещение картинки в тексте делит текст пополам, обтекания нет. Но, можно сделать картинку блоком и центрировать как угодно. Вообще слайдер Swiper очень гибкая штука и простая.

Ответить

Djonivan Djonivan 25.05.2021 10:50:46

Уже давно использую плагин Swiper. Сейчас возникла тупиковая проблема с этим плагином. Возможно дело в том, что я очень плохо знаю JS. В документации указано, что достаточно прописать observer: true, чтобы плагин автоматически отслеживал динамическое изменение html-контента. Но у меня так не работает: при клике на комбинацию подтягиваются другие фото в эту же структуру HTML, остаются и кнопки навигации, но уже скрипт не работает, не листает слайды: http://prntscr.com/13dvsfj .Что я только не пробовал как новичок в JS, ничего не помогло, я подозреваю, что проблема очень примитивная, но не для меня. Буду благодарен за любую помощь. Страница: http://new.forco.com.ua/ru/elektrika-i-elektronika-ford-fyuzhn-fusion-2013-2020/4-175-zadnij-fonar-pravyj-ford-escape-2017-ford-eskejp.html#/1-test-2011_2015

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.