<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Bxslider - настройки и примеры

Bxslider - настройки и примеры

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

Официальный сайт: https://bxslider.com/

Как подключить Bxslider

Первый способ

Скопировать код отсюда https://bxslider.com/install/ и вставить в свой проект.

Bxslider - настройки и примеры.

Код между тегами script вызывает функцию слайдера. Прописываем ссылки на необходимые файлы в теге head. Название класса .slider должно быть одинаковым, как в HTML-разметке, так и в коде вызова. Название slider можно заменить на своё, у меня это будет "bx-slider".

Второй способ

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

Bxslider - настройки и примеры.

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

Создание HTML-разметки

Мы создали маркированный список с классом bx-slider, где каждый пункт списка будет отдельный слайд с картинкой. Этот список мы поместили в контейнер bx-slider.

<div class="bx-wrap">
<ul class="bx-slider">
  <li><img src="images/stil_01.jpg" title="Скандинавский стиль 1"></li>
  <li><img src="images/stil_02.jpg" title="Скандинавский стиль 2"></li>
  <li><img src="images/stil_03.jpg" title="Скандинавский стиль 3"></li>
  <li><img src="images/stil_04.jpg" title="Скандинавский стиль 4"></li>
</ul>
</div>

Оформление слайдера

Для нормального управления внешним видом слайдера, его расположением и размерами картинок, недостаточно файла стилей из архива. Необходимо создать свой файл стилей и прописать ссылку на него в HTML-файле ниже, чем jquery.bxslider.css.

<link rel="stylesheet" href="style.css">

Для адаптивности слайдера, необходимо у его контейнера bx-wrap задать относительную ширину, например в %.

.bx-wrap {
    position: absolute;
    width: 50%;
    left: 20%;
    top: 10%;
}

Свойства для селектора ul разместят картинки в центре.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Что будет, если картинки будут разного размера? Тогда вы увидите в окошке слайд-шоу картинки разного размера. Поможет избавиться от этого безобразия несколько строчек кода для тега img. Даже самая маленькая картинка растянется на ширину всего контейнера, разумеется потеряв при этом в качестве, благодаря min-width: 100%. По высоте наши картинки-слайды автоматически подстроятся сохранив свои пропорции.

.bx-slider img {
    min-width: 100%;
    height: auto;
}

Перейдите по ссылке ниже на демо-страничку и вы увидите пример работы Bxslider-а без всяких дополнительных настроек и адаптивный.

Настройки Bxslider-а

Слайдер уже имеет дефолтные свойства, которые при вызове метода bxSlider уже активированы. Пользователь, прописав новые стройки, автоматически отменяет старые.

Для Bxslider-а можно задать дополнительный настройки в разделе Option. Самый первый параметр слайдера - mode, который определяет как будет двигаться слайдер. По умолчанию стоит horizontal - это то, что прописано в скрипте слайдера. Если мы хотим, чтобы слайды крутились вертикально и немного быстрее (speed) (параметр - vertical), то надо добавить внутри метода bxslider следующий код.

<script>
  $(document).ready(function(){
  $('.bx-slider').bxSlider({
    mode: 'vertical',
    speed: 600
  });
  });
  </script>

Теперь слайды показываются в вертикальном режиме и быстрее.

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

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

Код первого примера и результат

See the Pen Bxslider by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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