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,
    },
  });
page scroll progress bar

page scroll progress bar

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style07

Timeline style07

Tablet style code texte

Tablet style code texte

Nav Menu style01

Nav Menu style01

Loading style book loader

Loading style book loader

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Blog post card 01

Blog post card 01

Bloc resizable with jquery

Bloc resizable with jquery

Arrows Defense Game

Arrows Defense Game

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table