SwiperJS style01

<!DOCTYPE html>
<html lang="en">
<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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 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 >
	<!-- Swiper -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" width="250px" height="250px">
			</div>
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/solution-technique.jpg" width="250px" height="250px">
			</div>
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/e-learning-developpement.jpg" width="250px" height="250px">
			</div>
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/media-digital.jpg" width="250px" height="250px">
			</div>
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/services-en-ligne.jpg" width="250px" height="250px">
			</div>
			<div class="swiper-slide">
				<img src="https://www.nglesson.com/assets/imgs/menu/citation-motivation.jpg" width="250px" height="250px">
			</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
	<!-- Swiper JS -->
	<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: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
    background: #fff;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  img{
      margin-right:10px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* 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;
    
    
  }

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  slidesPerGroup: 3,
  loop: false,
  loopFillGroupWithBlank: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
Vidéo background en html5 style02

Vidéo background en html5 style02

Table Responsive with css 01

Table Responsive with css 01

Simple Table With UIKIT

Simple Table With UIKIT

Input range slider HTML style02

Input range slider HTML style02

Image hover effects style

Image hover effects style

Image hover 05

Image hover 05

Form login with background image changed style01

Form login with background image changed style01

Form Création de compte style animée

Form Création de compte style animée

Card Bootstrap4 01

Card Bootstrap4 01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter multiple input dynamique

Ajouter multiple input dynamique