проблемы со Swiper

Question

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

<div class="image-slider swiper">
            <div class="image-slider__wrapper swiper-wrapper">
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                        <img src="images/slider/slider1.jpg" alt="">
                    </div>
                </div>
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                        <img src="images/slider/slider2.jpg" alt="">
                    </div>
                </div>
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                        <img src="images/slider/slider1.jpg" alt="">
                    </div>
                </div>
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                        <img src="images/slider/slider2.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

и тут JS

$(function() {
    var swiper = new Swiper('.image-slider');
});

Answer 1

Не понимаю что у Вас не получается, пользовался стандартной документацией

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1<br>Slide 2<br>Slide 3<br>Slide 4</div>
    <div class="swiper-slide">Slide 5<br>Slide 6<br>Slide 7<br>Slide 8</div>
    <div class="swiper-slide">Slide 9<br>Slide 10<br>Slide 11<br>Slide 12</div>
  </div>
</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
  });
</script>

Answer 2

new Swiper('.swiper', {
  direction: 'vertical',
  loop: true, // <--- обратите внимание 

  pagination: {
    el: '.swiper-pagination',
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

 scrollbar: {
    el: '.swiper-scrollbar',
  },
});

.swiper {
  width: 400px;
  height: 200px;
}

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>


<div class="image-slider swiper">
    <div class="image-slider__wrapper swiper-wrapper">
        <div class="image-slider__slide swiper-slide">
            <div class="image-slider__image">
                <img src="https://media.istockphoto.com/photos/cozy-backyard-patio-picture-id1308305574?b=1&k=20&m=1308305574&s=170667a&w=0&h=rSvgGnowePjmy9NYCZEb_Sud2ykoKKS02K6luPyVD6U=" alt="">
            </div>
        </div>
        <div class="image-slider__slide swiper-slide">
            <div class="image-slider__image">
                <img src="https://media.istockphoto.com/photos/artificial-flowers-in-pots-on-shelves-against-the-white-wall-picture-id1295971901?b=1&k=20&m=1295971901&s=170667a&w=0&h=cUaGq4MRz3m6FoI-9PiE5mALFGCdT_EDANgS1M-L4Dg=" alt="">
            </div>
        </div>
        <div class="image-slider__slide swiper-slide">
            <div class="image-slider__image">
                <img src="images/slider/slider1.jpg" alt="">
            </div>
        </div>
        <div class="image-slider__slide swiper-slide">
            <div class="image-slider__image">
                <img src="https://media.istockphoto.com/photos/sliced-figure-picture-id1300035600?b=1&k=20&m=1300035600&s=170667a&w=0&h=_AOKQ_Xnt9CTSYPxao52DUuxtYi9JX8JKz3Hht31IPs=" alt="">
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

БЛОГ НА HUSL

проблемы со Swiper

Ответы (2 шт):