Как сделать, чтобы слайды менялись автоматически в свайпере?

без свайпа, без клика по кнопком

  const swiper = new Swiper('.swiper', {
  loop: false,
  spaceBetween: 40,
  slidesPerView: 7,
    
 breakpoints: {
      340: {
          slidesPerView: 2,
      },
      480: {
          slidesPerView: 3,
      },
      740: {
          slidesPerView: 4,
      },
      1050: {
          slidesPerView: 5,
          spaceBetween: 40,
      },
      1250: {
          slidesPerView: 6,
      },
      1350: {
          slidesPerView: 7,
      },
  }
} );
.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 45px;
}

.work__item {
    width: 100%;
    background-color: red;
    height: 0px;
    border-radius: 50%;
    padding: 0 20px;
    padding-top: 100%;
}

.work__item img {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: calc(100% - 40px);
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.7;
}


*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.css" rel="stylesheet"/>


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

Автор решения: Simon

Просто добавьте autoplay как описано в документации. Если я конечно же верно понял что Вам требуется.

const swiper = new Swiper('.swiper', {
  loop: false,
  spaceBetween: 40,
  slidesPerView: 7,
  autoplay: {
   delay: 2000,
  },
    
  breakpoints: {
      340: {
          slidesPerView: 2,
      },
      480: {
          slidesPerView: 3,
      },
      740: {
          slidesPerView: 4,
      },
      1050: {
          slidesPerView: 5,
          spaceBetween: 40,
      },
      1250: {
          slidesPerView: 6,
      },
      1350: {
          slidesPerView: 7,
      },
  }
} );
.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 45px;
}

.work__item {
    width: 100%;
    background-color: red;
    height: 0px;
    border-radius: 50%;
    padding: 0 20px;
    padding-top: 100%;
}

.work__item img {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: calc(100% - 40px);
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.7;
}


*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>

    <div class="swiper-slide">
      <div class="work__item">
        <img src="https://svgshare.com/i/awm.svg" alt="">
      </div>

    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.css" rel="stylesheet"/>

→ Ссылка