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',
  },
});
Vers le haut

Vers le haut

Timeline style07

Timeline style07

SwiperJS style01

SwiperJS style01

Profile page with b4

Profile page with b4

Input range slider HTML style04

Input range slider HTML style04

Image hover effects style

Image hover effects style

Geocoded Locations

Geocoded Locations

Form login 03

Form login 03

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Convertir une div en image

Convertir une div en image

ChartJS style01

ChartJS style01

Asidebar Menu Style01

Asidebar Menu Style01