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

Адаптивный слайдер с функциями на jQuery

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

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

А вот в правом идет функция остановки карусели и запуска, это 2 кнопки, которые иногда очень нудны на слайдах, что все проверенно и работает отлично. Так как такой стиль полноэкранных плагинов jQuery расширит интерфейс вашего сайта и сделает его более профессиональным или более просматриваемым.

Приведу несколько скринок, которые сделаны при проверки:

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

Если у вас планшет или ноутбук, то это примерно аналогичные запросы по размерам экрана.

Простой слайдер изображений для сайта на CSS и чистом JavaScript

Остается мобильные аппараты, которые показывают вид вертикально и в горизонтальном, что все в аналогичном плане произведено, и вод один из многих снимков.

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

Установка:

В head на страницах нужно прописать js, что закреплен за материалом.

Код

HTML

Код

CSS

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

Код

.prostoy_slayd_kasunod img {
  width: 100%;
  height: 40em;
  object-fit: cover;
}

.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxprostoy_slayd_kasunod {
  margin: 0;
  padding: 0;
  -webkit-perspective: 1000;
}
ul.bxprostoy_slayd_kasunod {
  list-style: none;
}
.bx-viewport {
  -webkit-transform: translateZ(0);
}

.bx-wrapper {
  -moz-box-shadow: 0 0 5px #bfbfbf;
  -webkit-box-shadow: 0 0 5px #bfbfbf;
  box-shadow: 0 0 5px #bfbfbf;
  border: 5px solid #fbfbfb;
  background: #fbfbfb;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}

.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('http://zornet.ru/Abavaga/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #5d5b5b;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #5d5b5b;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #151515;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}

.bx-wrapper .bx-prev {
  left: 10px;
  background: url('http://zornet.ru/Abavaga/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('http://zornet.ru/Abavaga/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('http://zornet.ru/Abavaga/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('http://zornet.ru/Abavaga/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}

.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(93, 93, 93, 0.6);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #efecec;
  font-family: Arial;
  display: block;
  font-size: 16px;
  padding: 12px;
}

Код

$(document).ready(function(){
  $('.prostoy_slayd_kasunod').bxSlider(
  {
  controls: true,
  auto: true,
  adaptiveHeight: false,
  responsive: true,
  infiniteLoop: true,
  pager: true,
  mode: 'fade',
  captions: true,
speed: 1000,
  autoControls: true,
  stopAutoOnClick: true,
  slideWidth: 2000,
  });

  });

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

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

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

09 Марта 2020 Загрузок: 1 Просмотров: 830 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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