<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

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

Подписавшись по 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):

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