Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach

 <!-- Link Swiper-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="externes Nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="external nofollow" />

 <Stil>
    .swiper-container {
    //Hier können Sie Breite und Höhe einstellen width: 50%;
      Höhe: 50%;
    }
    .swiper-slide {
      Textausrichtung: zentriert;
      Schriftgröße: 18px;
      Hintergrund: #fff;
      /* Folientext vertikal zentrieren */
      Anzeige: Flex;
      -WebKit-Box-Pack: Mitte;
      -ms-flex-pack: Mitte;
      -webkit-justify-content: zentrieren;
      Inhalt ausrichten: zentriert;
      -webkit-box-align: zentriert;
      -ms-flex-align: zentriert;
      -webkit-align-items: zentrieren;
      Elemente ausrichten: zentrieren;
    }
    img{
      Breite: 250px;
    }
  </Stil>

<div Klasse="Swiper-Container">
  <div Klasse="swiper-wrapper">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //Bild hinzufügen</div>
  <!-- Seitennummerierung hinzufügen -->
  <div Klasse="swiper-pagination"></div>
  <!-- Pfeile hinzufügen -->
  <div Klasse="swiper-button-next"></div>
  <div Klasse="swiper-button-prev"></div>
</div>

<Skript>
  var swiper = neuer Swiper('.swiper-container', {
    Abstand zwischen: 30,
    zentrierte Folien: true,
    Autoplay:
      Verzögerung: 2500,
      disableOnInteraction: false,
    },
    Pagination:
      el: '.swiper-pagination',
      anklickbar: wahr,
    },
    Navigation:
      nächstesEl: '.swiper-button-next',
      vorheriges: '.swiper-button-prev',
    },
  });
</Skript>

Freimodus:true,

Autoplay:

Verzögerung:0

}

.swiper-container-freier-Modus>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*Früher war es „ease-out“*/
  -moz-Übergangszeitfunktion: linear;
  -ms-Übergangszeitfunktion: linear;
  -o-Übergangszeitfunktion: linear;
  Übergangszeitfunktion: linear;
  Rand: 0 automatisch;
}

<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="externes nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script> 

 // Diashow – nach links und rechts schieben und wechseln var mySwiper = new Swiper('.swiper-container',{
    Paginierung: '.pagination',
    Schleife:falsch,
    Modus: 'horizontal',
    Freier Modus:false,
    Berührungsverhältnis: 0,5,
    langes Wischverhältnis: 0,1,
    Schwellenwert: 50,
    followFinger:false,
    Beobachter: true, //Wenn Swiper selbst oder seine untergeordneten Elemente geändert werden, wird Swiper automatisch initialisiert.
    observeParents: true, //Wenn das übergeordnete Element von Swiper geändert wird, wird Swiper automatisch initialisiert
    onSlideChangeEnd:function(swiper){ // Wenn die Folie endet, wechseln Monat und Datum synchron nach links und rechts changeMonth();
    }
  });