<div class="swiper-container">
    
  <div class="swiper-wrapper">
    <div class="swiper-slide"><h3>1</h3></div>
    <div class="swiper-slide"><h3>2</h3></div>
    <div class="swiper-slide"><h3>3</h3></div>
    <div class="swiper-slide"><h3>4</h3></div>
    <div class="swiper-slide"><h3>5</h3></div>
    <div class="swiper-slide"><h3>6</h3></div>
    <div class="swiper-slide"><h3>7</h3></div>
    <div class="swiper-slide"><h3>8</h3></div>
    <div class="swiper-slide"><h3>9</h3></div>
    <div class="swiper-slide"><h3>10</h3></div>
  </div>

</div>
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background:rgba(0,0,0,0.4)
}

body {
    display: flex;
    height: 100vh;
    width: 100%;
}
.swiper-container {
    width: 100%;
}
View Compiled
var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
  on: {
    click(event) {
        console.log('event.target',this.clickedIndex);
        mySwiper.slideTo(this.clickedIndex);	
    },
  },
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js