<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<!-- Swiper -->
<div class="swiper-container">
  <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-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
<div class="swiper-slide">Slide 15</div>
<div class="swiper-slide">Slide 16</div>
<div class="swiper-slide">Slide 17</div>
<div class="swiper-slide">Slide 18</div>
<div class="swiper-slide">Slide 19</div>
<div class="swiper-slide">Slide 20</div>
<div class="swiper-slide">Slide 21</div>
<div class="swiper-slide">Slide 22</div>
<div class="swiper-slide">Slide 23</div>
<div class="swiper-slide">Slide 24</div>
<div class="swiper-slide">Slide 25</div>
<div class="swiper-slide">Slide 26</div>
<div class="swiper-slide">Slide 27</div>
<div class="swiper-slide">Slide 28</div>
<div class="swiper-slide">Slide 29</div>
<div class="swiper-slide">Slide 30</div>
<div class="swiper-slide">Slide 31</div>
<div class="swiper-slide">Slide 32</div>
<div class="swiper-slide">Slide 33</div>
<div class="swiper-slide">Slide 34</div>
<div class="swiper-slide">Slide 35</div>
<div class="swiper-slide">Slide 36</div>
<div class="swiper-slide">Slide 37</div>
<div class="swiper-slide">Slide 38</div>
<div class="swiper-slide">Slide 39</div>
<div class="swiper-slide">Slide 40</div>
<div class="swiper-slide">Slide 41</div>
<div class="swiper-slide">Slide 42</div>
<!-- <div class="swiper-slide">Slide 43</div> -->
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
<!--   naviga -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

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

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container', {
    direction:  'horizontal',
    slidesPerView: 5,
    slidesPerColumn: 4,
    slidesPerGroup:5,
    slidesPerColumnFill: "row",
    spaceBetween: 30,
    
    pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
    
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  });
</script>

.swiper-slide{
  background: skyblue;
  line-height: 50px;
/*   height: 20%; */
  
}
.swiper-pagination{
  position: relative;
  top: 350px;
  left: 0;
  font-size: 30px;
}

.swiper-wrapper{
  padding-bottom: 100px;
}