Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I created an auto sliding carousel using swiper js. Now I want to restart the carousel from beginning by clicking a button. How can I do it? Please help.

var swiper2 = new Swiper(".lawnsArtificialTurfSlider", {
    initialSlide: 0,
    spaceBetween: 10,
    autoplay: {
          delay: 4000,
          disableOnInteraction: false,
    navigation: {
      nextEl: ".hero-slider-next",
      prevEl: ".hero-slider-prev",
<button onclick="resetSlider()">Reset</button>
const resetSlider = () => { swiper2.reset(); }
On click slide to slide 0 (start) by slideTo method.
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0);
Speed 0 (Moves without animation):
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0,0);
Snippet:
var swiper = new Swiper(".mySwiper", {
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
/* click event */
document.getElementById("restart").addEventListener("click", restart);
function restart() {
  swiper.slideTo(0);
html,
body {
  position: relative;
  height: 100%;
#restart{
  background: blue;
  color: white;
  font-size: 2rem;
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
.swiper {
  width: 100%;
  height: 100%;
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
<!-- Link Swiper's CSS -->
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
<button id="restart">Restart</button>
<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
</script>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.