ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайдер bxSlider на CSS3

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

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

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

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

Что такое карусель?

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

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

При открытии сайта или страницы на большом мониторе:

Слайдер карусель на CSS для сайта на чистом CSS

Здесь видим обзор с мобильного гаджет, к примеру смартфон:

Такой вид можно наблюдать с мобильного аппарата с небольшим экраном:

Мобильный слайдер для сайта на CSS и JS

Установочный процесс:

Устанавливаем библиотеку и плагин.

Код

HTML

Код

<div class="adaptivnym-polzunok">
  <ul>
  <li style="background-image: url(http://zornet.ru/_fr/56/1052296.png);">
  <div class="adaptivnym-polzunok-wrp">
  <div class="adaptivnym-polzunok-title">Слайд 1</div>
  <div class="adaptivnym-polzunok-text">Маркетинг в социальных сетях - одна из крупнейших в мире платформ для маркетинга ваших продуктов, услуг или контента.</div>
  </div>
  </li>
  <li style="background-image: url(http://zornet.ru/_fr/56/9592768.jpg);">
  <div class="adaptivnym-polzunok-wrp">
  <div class="adaptivnym-polzunok-title">Слайд 2</div>
  <div class="adaptivnym-polzunok-text">Список социальных сетей растет с каждым днем, и вы можете использовать их для маркетинга своего бренда.</div>
  </div>
  </li>
  <li style="background-image: url(http://zornet.ru/_fr/56/4748483.jpg);">
  <div class="adaptivnym-polzunok-wrp">
  <div class="adaptivnym-polzunok-title">Слайд 3</div>
  <div class="adaptivnym-polzunok-text">По мнению аналитиков и экспертов по маркетингу в соцсетях, Snapchat в ближайшие годы может стать крупным рынком.</div>
  </div>
  </li>
  </ul>
</div>

CSS

Код

.adaptivnym-polzunok ul {
  margin: 0;
  padding: 0;
}

.adaptivnym-polzunok li {
  margin: 0;
  padding: 0;
  height: 320px;
  background-position: 50% 0;
  background-size: cover;
}

/* Контент в слайдере */
.adaptivnym-polzunok-wrp {
  width: 450px;
  margin: 0 auto;
  padding: 50px 80px;
}
.adaptivnym-polzunok-title {
  font-size: 35px;
  color: #fff;
  height: 80px;
  font-weight: 600;
  margin-bottom: 15px;
}
.adaptivnym-polzunok-text {
font-size: 18px;
color: #fff;
  text-align: justify;
  /* font-weight: bold; */
margin-bottom: 15px;
}

/* Управление слайдером */
.adaptivnym-polzunok .bx-wrapper {
  position: relative;
}
.adaptivnym-polzunok .bx-controls {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.adaptivnym-polzunok .bx-controls-direction {
  width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 500;
}
.adaptivnym-polzunok .bx-prev, .adaptivnym-polzunok .bx-next {
  position: absolute;
  top: 140px;
  width: 37px;
  height: 37px;
  overflow: hidden;
  text-indent: -999px;
}
.adaptivnym-polzunok .bx-prev {
  left: 0;
  background: url(https://snipp.ru/img/slide-prev.png) 0 0 no-repeat;
}
.adaptivnym-polzunok .bx-next{
  right: 0;
  background: url(https://snipp.ru/img/slide-next.png) 0 0 no-repeat;
}

.adaptivnym-polzunok .bx-controls-direction{
  max-width: 600px;
  width: 100%;
}

.adaptivnym-polzunok-wrp{
  max-width: 450px;
  width: 100%;
}

@media screen and (max-width: 1220px){
.adaptivnym-polzunok .bx-controls-direction{
width: 90%;
height: auto;
padding: 0px;
}
}

@media screen and (max-width: 860px){
.adaptivnym-polzunok-wrp {
width: 90%;
padding: 50px 0px 0px 0px;
}
}

@media screen and (max-width: 860px){
.adaptivnym-polzunok-text {
width: 100%;
text-align: justify;
font-size: 12px;
}
}

Код

$(document).ready(function(){
  $('.adaptivnym-polzunok ul').bxSlider({
  pager: false,
  controls: true,
  mode: 'fade',
  auto: true,
  pause: 4000,
  touchEnabled: false
  });
});

Традиционные слайдеры обычно упакованы с JavaScript и кодом JQuery, что этот стал не исключением. Где задействуем HTML, который делает все представленные слайды доступными для всех популярных поисковых систем, ведь много зависит от использования эффективного и легкого решения.

Демонстрация

Источник: bxslider.com

11 Сентября 2019 Загрузок: 3 Просмотров: 1440 Комментариев: (7)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 7
Порядок вывода комментариев: Kosten 11 Сентября 2019 02:48¹ 0 Как можно скачать файл bxslider.js, чтоб разместить в архиве, так как сегодня ссылка рабочая, а завтра битой окажется. Это идет на слайдер, где пытался через ссылка скачать на рабочий стол, с него ФМ сделать ссылкой для проверки, и здесь оказывается, что она не рабочая. Как правильно скачать, так, чтоб файл был рабочий? С официального сайта папку скачивал, там уже нет такого, какие были проревел через ссылки, и слайдер не показывает, только на этом файле, что идет ссылкой. -SAM- 11 Сентября 2019 07:57² 0 Не понял вопроса, если честно. Библиотека скачивается с оф. сайта. Если где в демо не работает - может, что нужно подключать ту версию библиотеки, код под которую на странице написан был (есть разные версии js). Также уже обсуждалось про неё, когда разбирали подключение в системных шаблонах uCoz, в том же поисковике Google вбить: site:zornet.ru bxslider (кто системные шаблоны ставит, то в некоторых слайдер идёт с этой библиотекой, что подключать ничего не нужно... это если на uCoz кто ставить будет, то библиотека эта залита на серверы системы уже). Kosten 11 Сентября 2019 15:21³ 0 Как пример, вот ссылка, что нужно скрипт устанавливать на страницы, и просто хочу узнать, как файл отдельно скачать и поместить а архив. Код <script src="https://snipp.ru/cdn/bxslider/4.2.14/src/js/jquery.bxslider.js"></script> First 11 Сентября 2019 20:45⁴ 0 Перейти по ссылке и нажать ctrl+s чтоб скачать файл на комп ) Kosten 11 Сентября 2019 23:16⁵ 0 Дело в том, скачать не проблема, но почему то загружаю на сайте ФМ и выставляю на проверку, то JS уже не работает. Но как то же переводят на свои ссылки эти плагины, и делают корректно, что все работает, вот в материале, где ссылка не с официально сайта, и все корректно показывает. Только стоит ее выпрямить под свой домен, то здесь не чего не получается, где выпрямив ее при установке ноль эффекта. -SAM- 12 Сентября 2019 01:59⁶ 0 В папке dist лежит цельный html-документ, с подключенными библиотеками (по ссылкам на сайтах удалённых). Я скачал их себе на комп, поменял пути и проверил файл html - слайдер работает. Возможно, что вы когда качали файл jquery.min.js - вам браузер поменял имя его на jquery_min.js [!] Или я сути не уловил... где и чего не работает, куда чего нужно докачать... у меня он работает. Если заливать так само на сайт uCoz, как я залил на комп - библиотеки вообще не нужно заливать. Как выше и написал, что можно просто ставить ссылку серверную на bxslider.js ... то же самое и с jquery - две библиотеки, если разных версий навесить, допустим, то только конфликтовать между собой будут (и та, что ниже в исходном коде идёт, то будет перекрывать по умолчанию выше прописанную системную). Kosten 12 Сентября 2019 02:31⁷ 0 Все правильно, так как файла с названием не нашел, а с приставками к названию были, что пришлось их проверять.