Swiper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.2/css/swiper.min.css">
<div class="swiper-pagination"></div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual1" alt="">#F4F1C1</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual2" alt="">#DCDDDE</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual3" alt="">#ECEBDF</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual4" alt="">#F2E3E3</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual5" alt="">#D0EFF0</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual6" alt="">#E9EDD8</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual7" alt="">#C3D2EB</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual8" alt="">#EDEDED</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual9" alt="">#B4D6DB</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual10" alt="">#999999</div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/376x544?text=Visual11" alt="">#999999</div>

  </div>
</div>

<div id="swiper-pagination-arrows">
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

CSS

.swiper-button-next,
.swiper-button-prev {
  color: #000 !important;
  z-index: 0 !important;
  background-repeat: no-repeat;
  height: 30px !important
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
  outline: none;
  box-shadow: none;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "" !important;
}

.swiper-button-prev {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 860.2 562.9' style='enable-background:new 0 0 860.2 562.9;' xml:space='preserve'%3E%3Cpath d='M281.2,0c12.4,12.6,24.8,25.1,37.2,37.6c3.3,3.3,6.6,6.5,10.3,10C260,114,191.8,180,122.7,246.8c246.4,0,491.8,0,737.5,0 c0,23.3,0,46,0,69.1c-245.5,0-490.9,0-736.2,0c-0.2,0.4-0.5,0.7-0.7,1.1c68,65.8,136,131.5,204.2,197.4 c-15.8,16.2-31.2,32-47.3,48.5C186.7,468.5,93.6,374.4,0,279.9C92.4,187.5,186.3,93.8,280.2,0C280.5,0,280.8,0,281.2,0z'/%3E%3C/svg%3E%0A");
}

.swiper-button-next {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 862.3 563' style='enable-background:new 0 0 862.3 563;' xml:space='preserve'%3E%3Cpath d='M579.7,563c-16.1-15.6-32.2-31.3-48.6-47.3c69.4-67,137.6-132.9,206.9-200c-246.9,0-492.4,0-738,0c0-23.2,0-45.5,0-68.5 c245.6,0,491.1,0,736.6,0c0.2-0.4,0.3-0.7,0.5-1.1C669.1,180.3,601,114.6,532.9,48.8C548.4,32.9,564,16.9,580.5,0...

JavaScript

var swiper = new Swiper('.swiper-container', {
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
     slidesPerView: 1,
     spaceBetween: 30,
     speed: 300,
     effect: 'fade',
     fadeEffect: {
       crossFade: true
     },
     loop: true,
     pagination: {
       el: '.swiper-pagination',
       clickable: true,
     },
   });

   /* change body's background color */
   swiper.on('transitionEnd', function(e) {
     if (this.activeIndex == 1) {
       document.querySelector("body").style.background = '#F4F1C1';
     }
     if (this.activeIndex == 2) {
       document.querySelector("body").style.background = '#DCDDDE';
     }
     if (this.activeIndex == 3) {
       document.querySelector("body").style.background = '#ECEBDF';
     }
     if (this.activeIndex == 4) {
       document.querySelector("body").style.background = '#F2E3E3';
     }
     if (this.activeIndex == 5) {
       document.querySelector("body").style.background = '#D0EFF0';
     }
     if (this.activeIndex == 6) {
       document.querySelector("body").style.background = '#E9EDD8';
     }
     if (this.activeIndex == 7) {
       document.querySelector("body").style.background = '#C3D2EB';
     }
     if (this.activeIndex == 8) {
       document.querySelector("body").style.background = '#EDEDED';
     }
     if (this.activeIndex == 9) {
       document.querySelector("body").style.background = '#B4D6DB';
     }
     if (this.activeIndex == 10) {
       document.querySelector("body").style.background = '#999999';
     }
     if (this.activeIndex == 11) {
       document.querySelector("body").style.background = '#999999';
     }
   });