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',
  },
});
Timeline style04

Timeline style04

Timeline style03

Timeline style03

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Page 404 exemple 01

Page 404 exemple 01

Login Bootstrap3

Login Bootstrap3

Lightbox gallery style01

Lightbox gallery style01

Input file style01

Input file style01

Header with background animate 01

Header with background animate 01

Form Création de compte style animée

Form Création de compte style animée

Card Bootstrap4 02

Card Bootstrap4 02

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery