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

Адаптивный слайдер и галерея для сайта

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

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

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

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

Адаптивные слайдеры и галереи изображений

2. Здесь уже немного меньше по объемам, и это больше подойдет под планшет.

3. Это все примерно, и также можно заключить под просмотр со смартфона.

4. Но больше всего интересует с мобильного телефона, где идет без изменений.

Основные характеристики:

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

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

HTML

Код

CSS

Код

.outer-wrapper {
  width: 80%;
  margin: 50px auto;
}

.pogedunakin {
  width: 100%;
  margin-bottom: 50px;
  padding-bottom: 55%;
  position: relative;
  border: 10px solid #fff;
  background-color: #efefe8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.pogedunakin > input {
  display: none;
}
.pogedunakin .masacetuloves {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  font-size: 0;
  list-style: none;
  transition: transform 1s;
}
.pogedunakin .nudas-kived {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.pogedunakin .logesamidag-1 {
  background-image: url("Ссылка на картинку изображение #1");
}
.pogedunakin .logesamidag-2 {
  background-image: url("Ссылка на картинку изображение #2");
}
.pogedunakin .logesamidag-3 {
  background-image: url("Ссылка на картинку изображение #3");
}
.pogedunakin .logesamidag-4 {
  background-image: url("Ссылка на картинку изображение #4");
}
.pogedunakin .logesamidag-5 {
  background-image: url("Ссылка на картинку изображение #5");
}

.desanulag-1 .klovestesag {
  position: absolute;
  bottom: 18px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  transition-timing-function: ease-out;
}
.desanulag-1 .klovestesag > label[class^="kasulinskun-"] {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #868383;
  background-color: #efefe8;
  cursor: pointer;
}
.desanulag-1 .casukolas label {
  display: none;
  position: absolute;
  top: 50%;
  padding: 5px 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.desanulag-1 .casukolas label::before, .desanulag-1 .casukolas label::after {
  content: "";
  display: block;
  width: 8px;
  height: 24px;
  background-color: #f9f9f9;
}
.desanulag-1 .casukolas label::before {
  margin-bottom: -12px;
}
.desanulag-1 .casukolas label.left {
  left: 20px;
}
.desanulag-1 .casukolas label.left::before {
  transform: rotate(45deg);
}
.desanulag-1 .casukolas label.left::after {
  transform: rotate(-45deg);
}
.desanulag-1 .casukolas label.right {
  right: 20px;
}
.desanulag-1 .casukolas label.right::before {
  transform: rotate(-45deg);
}
.desanulag-1 .casukolas label.right::after {
  transform: rotate(45deg);
}
.desanulag-1 #degopes-1:checked ~ .masacetuloves {
  transform: translateX(0%);
}
.desanulag-1 #degopes-1:checked ~ .klovestesag .kasulinskun-1 {
  background-color: #424141;
}
.desanulag-1 #degopes-1:checked ~ .casukolas .gtekopad-1 {
  display: block;
}
.desanulag-1 #degopes-2:checked ~ .masacetuloves {
  transform: translateX(-20%);
}
.desanulag-1 #degopes-2:checked ~ .klovestesag .kasulinskun-2 {
  background-color: #424141;
}
.desanulag-1 #degopes-2:checked ~ .casukolas .gtekopad-2 {
  display: block;
}
.desanulag-1 #degopes-3:checked ~ .masacetuloves {
  transform: translateX(-40%);
}
.desanulag-1 #degopes-3:checked ~ .klovestesag .kasulinskun-3 {
  background-color: #424141;
}
.desanulag-1 #degopes-3:checked ~ .casukolas .gtekopad-3 {
  display: block;
}
.desanulag-1 #degopes-4:checked ~ .masacetuloves {
  transform: translateX(-60%);
}
.desanulag-1 #degopes-4:checked ~ .klovestesag .kasulinskun-4 {
  background-color: #424141;
}
.desanulag-1 #degopes-4:checked ~ .casukolas .gtekopad-4 {
  display: block;
}
.desanulag-1 #degopes-5:checked ~ .masacetuloves {
  transform: translateX(-80%);
}
.desanulag-1 #degopes-5:checked ~ .klovestesag .kasulinskun-5 {
  background-color: #424141;
}
.desanulag-1 #degopes-5:checked ~ .casukolas .gtekopad-5 {
  display: block;
}

.desanulag-2 .masacetuloves {
  animation: slider-animation 50s ease-in-out infinite;
}
.desanulag-2 .masacetuloves:hover {
  animation-play-state: paused;
}

@keyframes slider-animation {
  0%,
  7% {
  transform: translateX(0%);
  }
  12.5%,
  19.5% {
  transform: translateX(-20%);
  }
  25%,
  32% {
  transform: translateX(-40%);
  }
  37.5%,
  44.5% {
  transform: translateX(-60%);
  }
  50%,
  57% {
  transform: translateX(-80%);
  }
  62.5%,
  69.5% {
  transform: translateX(-60%);
  }
  75%,
  82% {
  transform: translateX(-40%);
  }
  87.5%,
  94.5% {
  transform: translateX(-20%);
  }
}

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

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

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

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

01 Мая 2019 Загрузок: 3 Просмотров: 1435 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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