SwiperJS style02 avec 6 colonnes

<!DOCTYPE html>
<html>
  <head>
    <title>SWIPERJS | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="SWIPERJS">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="" rel="stylesheet" type="text/css">
	  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/solution-technique.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/problematique.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/e-learning-developpement.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/CDN.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/media-digital.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/cours-web.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/data-json.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/services-en-ligne.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/citation-motivation.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/icones-svg-gratuit.jpg"></div>
      <div class="swiper-slide"><img src="https://www.nglesson.com/assets/imgs/menu/Les-metier-du-web.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 
  <script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #FFF;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;

}
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  height: calc((100% - 30px) / 2);

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img{
width: 50%;
  height: 200px;
border: 1px solid #000;
}
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    slidesPerColumn: 2,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
Timeline style08

Timeline style08

Timeline style03

Timeline style03

Timeline style01

Timeline style01

SwiperJS style01

SwiperJS style01

Planète animée style01

Planète animée style01

Pie Charts

Pie Charts

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Nav Menu style02

Nav Menu style02

Loading Style snake

Loading Style snake

Lightbox gallery style01

Lightbox gallery style01

Image hover 02

Image hover 02

Blog post card 01

Blog post card 01