ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная карусель слайдера на HTML + CSS

Адаптивная карусель слайдера на HTML + CSS

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

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

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

Рассмотрим как выглядит на мобильном операторе:

При открытие страницы монитора в светлом и темной палитре.

1.

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

2.

2.2.

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

HTML

Код

CSS

Код

.kegatudegenabled {
  max-width: 658px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.dongadevug {
  width: 100%;
}

.sumbnag {
  margin: 0 20px;
}

.sumbnag img {
  width: auto;
  height: 60px; /* Set logo height */
}

.slick-prev {
  left: -40px;
  right: auto;
}

.slick-next {
  right: -40px;
  left: auto;
}

.slick-prev, .slick-next {
  background-color: transparent;
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 15px;
  height: 15px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
}

.slick-prev {
  border-top: 2px solid #585858;
  border-left: 2px solid #585858;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
}

:focus {
  outline: 0;
}

.slick-next {
  border-bottom: 2px solid #585858;
  border-right: 2px solid #585858;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  transform: rotate(-45deg) translate(5px, calc(-50% + 5px));
}

.slick-prev:before, .slick-next:before {
  content: '';
}

@media (max-width: 767px) {
  .sumbnagcontainer {
  max-width: 80%;
  }
  .sumbnagcontainer .dongadevug > button {
  display: none !important;
  }
  .sumbnag {
  margin: 0 10px;
  width: calc(20vw - 20px);
  }
  .sumbnag img {
  width: 100%;
  height: auto; /* Set logo height */
  }
}

@media (max-width: 480px) {
  .sumbnag {
  margin: 0 20px;
  width: calc(40vw - 40px);
  }
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}

.slick-list.draggable {
  cursor: pointer;
  cursor: hand;
}

.slick-sumbnagr .slick-track,
.slick-sumbnagr .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-sumbnag {
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-sumbnag {
  float: right;
}
.slick-sumbnag img {
  display: block;
}
.slick-sumbnag.slick-loading img {
  display: none;
}
.slick-sumbnag.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-sumbnag {
  display: block;
}
.slick-loading .slick-sumbnag {
  visibility: hidden;
}
.slick-vertical .slick-sumbnag {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

/* PURELY COSMETIC */

body {
  background: #141E30;
  background: -webkit-linear-gradient(to right, #243B55, #141E30);
  background: linear-gradient(to right, #243B55, #141E30);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.gadavuden {
  padding: 50px 90px;
  border-radius: 7px;
  -webkit-box-shadow: 2px 2px 14px 0px rgba(106, 119, 136, 0.5);
  -moz-box-shadow: 2px 2px 14px 0px rgba(106, 119, 136, 0.5);
  box-shadow: 2px 2px 14px 0px rgba(106, 119, 136, 0.5);
  background-color: rgba(249, 246, 246);
  border: 10px solid rgba(96, 108, 123, 0.5);
  box-sizing: border-box;
}

Код

$(document).ready(function(){
  $('.dongadevug').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: true,
  swipeTosumbnag: true,
  touchMove: true,
  ltr: true,
  infinite: true,
  variableWidth: true,
  dots: false,
  pauseOnHover: false
  });
});

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

В стилистике CSS есть тема поменять полностью палитру цвета под свой основной дизайн, как пример, если устанавливать на темную площадку, то и сам слайдер должен соответствовать.

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

24 Января 2019 Загрузок: 6 Просмотров: 8628 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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