Адаптивный вертикальный слайдер на jQuery - Скачать для фотошопа и сайта

Регистрация Вход

Главная сайта

Форум Все для фотошопа и сайта

Страница 1 из 1
1

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

diamont1977 Контакты diamont1977

Дата: Пятница, 22.12.2023, 23:57 | Сообщение # 1

Администраторы

Сообщений:: 1542

Замечания:: 0

Offline

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

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

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

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

Установка:

В HEAD данной страницы, где находится слайд:

Код

HTML

Код

CSS

Код

.akopedsag {
  padding: 32px;
  color: #fff;
}
.akopedsag .swiper-container {
  width: 100%;
  height: 100%;
}
.akopedsag__flex {
  display: flex;
  align-items: flex-start;
}
.akopedsag__col {
  display: flex;
  flex-direction: column;
  width: 150px;
  margin-right: 32px;
}
.akopedsag__prev,
.akopedsag__next {
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.akopedsag__prev:focus,
.akopedsag__next:focus {
  outline: none;
}
.akopedsag__thumbs {
  height: calc(400px - 96px);
}
.akopedsag__thumbs .akopedsag__image {
  transition: 0.25s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}
.akopedsag__thumbs .akopedsag__image:hover {
  opacity: 1;
}
.akopedsag__thumbs .swiper-slide-thumb-active .akopedsag__image {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}
.akopedsag__images {
  height: 400px;
}
.akopedsag__images .akopedsag__image img {
  transition: 3s;
}
.akopedsag__images .akopedsag__image:hover img {
  transform: scale(1.1);
}
.akopedsag__image {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
.akopedsag__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .akopedsag__flex {
  flex-direction: column-reverse;
  }
  .akopedsag__col {
  flex-direction: row;
  align-items: center;
  margin-right: 0;
  margin-top: 24px;
  width: 100%;
  }
  .akopedsag__images {
  width: 100%;
  }
  .akopedsag__thumbs {
  height: 100px;
  width: calc(100% - 96px);
  margin: 0 16px;
  }
  .akopedsag__prev,
  .akopedsag__next {
  height: auto;
  width: 32px;
  }
}

Код

// Инициализация превью слайдера
const sliderThumbs = new Swiper('.akopedsag__thumbs .swiper-container', { // ищем слайдер превью по селектору
  // задаем параметры
  direction: 'vertical', // вертикальная прокрутка
  slidesPerView: 3, // показывать по 3 превью
  spaceBetween: 24, // расстояние между слайдами
  navigation: { // задаем кнопки навигации
  nextEl: '.akopedsag__next', // кнопка Next
  prevEl: '.akopedsag__prev' // кнопка Prev
  },
  freeMode: true, // при перетаскивании превью ведет себя как при скролле
  breakpoints: { // условия для разных размеров окна браузера
  0: { // при 0px и выше
  direction: 'horizontal', // горизонтальная прокрутка
  },
  768: { // при 768px и выше
  direction: 'vertical', // вертикальная прокрутка
  }
  }
});
// Инициализация слайдера изображений
const sliderImages = new Swiper('.akopedsag__images .swiper-container', { // ищем слайдер превью по селектору
  // задаем параметры
  direction: 'vertical', // вертикальная прокрутка
  slidesPerView: 1, // показывать по 1 изображению
  spaceBetween: 32, // расстояние между слайдами
  mousewheel: true, // можно прокручивать изображения колёсиком мыши
  navigation: { // задаем кнопки навигации
  nextEl: '.akopedsag__next', // кнопка Next
  prevEl: '.akopedsag__prev' // кнопка Prev
  },
  grabCursor: true, // менять иконку курсора
  thumbs: { // указываем на превью слайдер
  swiper: sliderThumbs // указываем имя превью слайдера
  },
  breakpoints: { // условия для разных размеров окна браузера
  0: { // при 0px и выше
  direction: 'horizontal', // горизонтальная прокрутка
  },
  768: { // при 768px и выше
  direction: 'vertical', // вертикальная прокрутка
  }
  }
});

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

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

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

Прикрепления: 8835974.jpg (26.2 Kb) · 4715080.jpg (15.7 Kb)

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

Страница 1 из 1
1