<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Пример стилизации Slick слайдера (часть 2)

Пример стилизации Slick слайдера (часть 2)

На прошлом уроке мы сделали верстку слайдера, на этом уроке настроим и стилизуем Slick слайдер.

Настройки Slick слайдера

Просматривая демо-страницу плагина, выбираем наиболее подходящий нам вариант слайдера. Всех лучше под наш макет подходит слайдер с классом multiple-items.

Пример стилизации Slick слайдера.

Инициализируем слайдер

Название класса для инициализации должно совпадать у элемента в HTML разметке и в JS коде. Добавляем класс multiple-items ко flex-контейнеру.

<div class="wedding multiple-items"></div>

Копируем JS код с базовыми настройками, который идет вместе с демо и вставляем в main.js, между функцией по загрузке DOM-дерева. Но как правило первоначальных настроек недостаточно, поэтому изучаем остальные настройки на странице плагина и нужные из них добавляем через запятую.

$(document).ready(function(){
    $('.multiple-items').slick({
        infinite: true, // бесконечная прокрутка слайдов
        slidesToShow: 3, // показывать по 3 слайда
         slidesToScroll: 3, // прокручивать по 3 слайда за раз
         next setting..
    });
});

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

В макете нет стрелок для перелистывания слайдов, зато есть точки индикаторы. Добавим для них свой класс slick-dots и чуть позже их стилизуем.

Адаптивный Slick слайдер

Для адаптивного слайдера, нужно настроить брейкпоинты (контрольные точки). Если этого не сделать, то на маленьких устройствах, слайды будут некрасиво обрезаться.

Пример стилизации Slick слайдера.

Когда размер экрана по ширине достигнет 1025 пикселей, то показывать и скроллить по 2 слайда.

Пример стилизации Slick слайдера.

Когда размер экрана по ширине достигнет 688 пикселей, то оставить только 1 слайд.

Пример стилизации Slick слайдера.

slidesToScroll: 3,
arrows: false, // не показывать стрелки
dots: true, // показывать точки индикаторы
dotsClass: 'slick-dots', // название класса для точек
responsive: [{
    breakpoint: 1025, // максимальная ширина экрана
    settings: {
        slidesToShow: 2, // показывать по 2 слайда
        slidesToScroll: 2, // скроллить по 2 слайда
    }
}, {
    breakpoint: 688,
    settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
    }
}]
});

Стилизация Slick слайдера

С настройками мы закончили, осталось только стилизовать индикаторные точки (сделать их, как на макете). По умолчанию индикаторные точки являются кнопками в маркированном списке.

Пример стилизации Slick слайдера.

В настройках Slick слайдера имеется параметр dotsClass, которому можно присвоить собственное название класса для ul контейнера slick-dots. Но мы уже сделали это раньше, смотрите выше в настройках. Теперь приступим к стилизации точек.

.slick-dots {
    text-align: center;
    display: flex; // поставить кнопки в ряд
    justify-content: center; // выровнять по центру
    list-style: none; // убираем черные маркеры
}

У flex-контейнера slick-dots, есть flex-элементы button, стилизуем их под точки.

.slick-dots button {
    background: #eddfd477; // цвет фона
    border: none; // без рамки
    border-radius: 50%; // радиус закругления
    height: 15px; // высота точки
    width: 15px; // ширина точки
    margin: 5px; // отступы между точками
    outline: none; // убираем обводку
}

На макете активный индикатор слайдера покрашен в более темный цвет. Заглянем в инструменты разработчика, чтобы посмотреть, какие ещё есть классы у плагина: slick-active (это то, что нам надо).

Пример стилизации Slick слайдера.

Покрасим активную кнопку в другой цвет.

.slick-dots li[class="slick-active"] button {
    background: #eac8be;
}

Для нормальной работы с плагинами, которые используют библиотеку jQuery, необходимы знания, которые можно подчерпнуть в моём видео-курсе.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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