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

Адаптивный слайдер-карусель на jQuery

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

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

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

При открытии страницы или интернет портала, как на главной и также на отдельной странице:

Больше всего идет под планшет, ведь все проверял в ручном режиме.

Здесь такой вид смотрится с мобильных гаджетов.

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

Приступаем к установке:

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

Код

HTML

Код

<div class="kabuilding-vanemaintun">
  <div class="ainingcub-ampaiges owl-carousel">
  <div class="lesamagcub-gtedopaaig kartunsa-vasupan-1">
  <div class="konobecg-uvespaaig">
  <h1>Первое название 1</h1>
  </div>
  </div>
  <div class="lesamagcub-gtedopaaig kartunsa-vasupan-2">
  <div class="konobecg-uvespaaig">
  <h1>Второе ключевое слово 2</h1>
  </div>
  </div>
  <div class="lesamagcub-gtedopaaig kartunsa-vasupan-3">
  <div class="konobecg-uvespaaig">
  <h1>Третье название 3</h1>
  </div>
  </div>
  </div>
  </div>
  </section>

CSS

Код

.lesamagcub-gtedopaaig {
  position: relative;
  height: 100vh;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.kartunsa-vasupan-1 {
  background-image: url(Ссылка на изображение №1);
}
.kartunsa-vasupan-2 {
  background-image: url(Ссылка на изображение №2);
}
.kartunsa-vasupan-3 {
  background-image: url(Ссылка на изображение №3);
}

.ainingcub-ampaiges {
  position: relative;
}
.konobecg-uvespaaig {
  position: absolute;
  color: #fff;
  text-align: center;
  width: 100%;
  top: 50%;
  text-transform: uppercase;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lesamagcub-gtedopaaig:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#585353), to(#131212));
  background: -webkit-linear-gradient(#585353, #131212);
  background: -o-linear-gradient(#585353, #131212);
  background: linear-gradient(#585353, #131212);
  opacity: .65
}

a.home-btn {;
  border: 2px solid #f1eded;
  display: inline-block;
  padding: 9px 23px;
  margin-top: 28px;
  color: #f1eded;
  text-decoration: none;
  transition: linear .3s;
}
a.home-btn:hover, .owl-nav div:hover {
  background-color: #000;
}

.owl-nav div {
  border: 2px solid #888888;
  color: #dedada;
  height: 43px;
  width: 43px;
  position: absolute;
  z-index: 9;
  top: 50%;
  margin-top: -19px;
  left: 25px;
  line-height: 43px;
  text-align: center;
  -webkit-transition: linear .3s;
  -o-transition: linear .3s;
  transition: linear .3s;
  background: rgba(20, 20, 21, 0.64);
  border-radius: 100px;
}
.owl-nav div.owl-next {
  left: auto;
  right: 10px;
}

.owl-nav h1 {
  font-weight: 900;
}

Код

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

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

Резиновый слайдер с фиксированной высотой

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

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

Так как многим не нравятся другие формы, что теперь самостоятельно могут выставить все как они посчитают нужным. Где и на них присутствует эффект при наведении клика, что он меняется в ту палитру цвета, которую вам нужно, но по умолчанию поставил немного темнее, что идет при открытии.

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

24 Апреля 2019 Загрузок: 3 Просмотров: 1637 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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