Manual Slideshow

<!DOCTYPE html>
<html>
<head>
	<title>Manual Slideshow | 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="Manual Slideshow">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="index,follow">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" type="text/css">  
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
<div class="row">
	<div class="col-lg-6 mt-5">
		<h2 class="text-center">Manual Slideshow</h2>
		<div class="col-lg-12">
			<img class="Slideshow" src="../../assets/imgs/menu/citation-motivation.jpg" >
			<img class="Slideshow" src="../../assets/imgs/menu/problematique.jpg" >
			<img class="Slideshow" src="../../assets/imgs/menu/e-learning-developpement.jpg" >
			<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
			<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
		</div>
	</div>		
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
.Slideshow{
    width: 100%;
    height: 400px;
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("Slideshow");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style02

Timeline style02

Timeline style01

Timeline style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Profile page with b4

Profile page with b4

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Créer une input search animée

Créer une input search animée

Card Bootstrap4 02

Card Bootstrap4 02

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select