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',
  },
});
Bootstrap4 datepicker

Bootstrap4 datepicker

Cards box with title

Cards box with title

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Form login 03

Form login 03

Image hover effects style

Image hover effects style

Input range slider HTML style02

Input range slider HTML style02

Lightbox gallery style01

Lightbox gallery style01

Simple Table With UIKIT

Simple Table With UIKIT

Texte Block Posts Style01

Texte Block Posts Style01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

page scroll progress bar

page scroll progress bar

up down tr in table with js

up down tr in table with js