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";  
}
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Bootstrap4 datepicker

Bootstrap4 datepicker

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Cards box with title

Cards box with title

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Header Aside Footer Admin

Header Aside Footer Admin

Header with background animate 01

Header with background animate 01

Image hover 04

Image hover 04

Scroll to div ID

Scroll to div ID

Timeline style01

Timeline style01

toggle switch style03

toggle switch style03