swiper вертикальный слайдер

Источник https://codepen.io/danishlaeeq/pen/RwyQJaW

<link rel=»stylesheet» href=»https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css»>
<script src=»https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js»></script>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<section class="slider">
  <div class="slider__flex">
    <div class="slider__col">
 
      <div class="slider__prev">Prev</div> <!-- Кнопка для переключения на предыдущий слайд -->
 
      <div class="slider__thumbs">
        <div class="swiper-container">
          <!-- Слайдер с превью -->
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="slider__image"><img src="//into-the-program.com/demo/images/sample002.jpg" alt="" /></div>
            </div>
            <div class="swiper-slide">
              <div class="slider__image"><img src="//into-the-program.com/demo/images/sample005.jpg" alt="" /></div>
            </div>
            <div class="swiper-slide">
              <div class="slider__image"><img src="//into-the-program.com/demo/images/sample007.jpg" alt="" /></div>
            </div>
            <div class="swiper-slide">
              <div class="slider__image"><img src="//into-the-program.com/demo/images/sample008.jpg" alt="" /></div>
            </div>
            <div class="swiper-slide">
              <div class="slider__image"><img src="//into-the-program.com/demo/images/sample009.jpg" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
 
      <div class="slider__next">Next</div> <!-- Кнопка для переключения на следующий слайд -->
 
    </div>
 
    <div class="slider__images">
      <div class="swiper-container">
        <!-- Слайдер с изображениями -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="slider__image"><img src="//into-the-program.com/demo/images/sample002.jpg" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="//into-the-program.com/demo/images/sample005.jpg" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="//into-the-program.com/demo/images/sample007.jpg" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="//into-the-program.com/demo/images/sample008.jpg" alt="" /></div>
          </div>
          <div class="swiper-slide">
            <div class="slider__image"><img src="//into-the-program.com/demo/images/sample009.jpg" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
 
  </div>
</section>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
.slider .swiper-container {
  width: 100%;
  height: 100%;
}
.slider__flex {
  display: flex;
  align-items: flex-start;
}
.slider__col {
  display: flex;
  flex-direction: column;
  width: 150px;
  margin-right: 32px;
}
.slider__prev,
.slider__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;
}
.slider__prev:focus,
.slider__next:focus {
  outline: none;
}
.slider__thumbs {
  height: calc(400px - 96px);
}
.slider__thumbs .slider__image {
  transition: 0.25s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}
.slider__thumbs .slider__image:hover {
  opacity: 1;
}
.slider__thumbs .swiper-slide-thumb-active .slider__image {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}
.slider__images {
  height: 400px;
}
.slider__images .slider__image img {
  transition: 3s;
}
.slider__images .slider__image:hover img {
  transform: scale(1.1);
}
.slider__image {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
.slider__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .slider__flex {
    flex-direction: column-reverse;
  }
  .slider__col {
    flex-direction: row;
    align-items: center;
    margin-right: 0;
    margin-top: 24px;
    width: 100%;
  }
  .slider__images {
    width: 100%;
  }
  .slider__thumbs {
    height: 100px;
    width: calc(100% - 96px);
    margin: 0 16px;
  }
  .slider__prev,
  .slider__next {
    height: auto;
    width: 32px;
  }
}

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Инициализация превью слайдера
const sliderThumbs = new Swiper(".slider__thumbs .swiper-container", {
  // ищем слайдер превью по селектору
  // задаем параметры
  direction: "vertical", // вертикальная прокрутка
  slidesPerView: 3, // показывать по 3 превью
  spaceBetween: 24, // расстояние между слайдами
  navigation: {
    // задаем кнопки навигации
    nextEl: ".slider__next", // кнопка Next
    prevEl: ".slider__prev" // кнопка Prev
  },
  freeMode: true, // при перетаскивании превью ведет себя как при скролле
  breakpoints: {
    // условия для разных размеров окна браузера
    0: {
      // при 0px и выше
      direction: "horizontal" // горизонтальная прокрутка
    },
    768: {
      // при 768px и выше
      direction: "vertical" // вертикальная прокрутка
    }
  }
});
// Инициализация слайдера изображений
const sliderImages = new Swiper(".slider__images .swiper-container", {
  // ищем слайдер превью по селектору
  // задаем параметры
  direction: "vertical", // вертикальная прокрутка
  slidesPerView: 1, // показывать по 1 изображению
  spaceBetween: 32, // расстояние между слайдами
  mousewheel: true, // можно прокручивать изображения колёсиком мыши
  navigation: {
    // задаем кнопки навигации
    nextEl: ".slider__next", // кнопка Next
    prevEl: ".slider__prev" // кнопка Prev
  },
  grabCursor: true, // менять иконку курсора
  thumbs: {
    // указываем на превью слайдер
    swiper: sliderThumbs // указываем имя превью слайдера
  },
  breakpoints: {
    // условия для разных размеров окна браузера
    0: {
      // при 0px и выше
      direction: "horizontal" // горизонтальная прокрутка
    },
    768: {
      // при 768px и выше
      direction: "vertical" // вертикальная прокрутка
    }
  }
});