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

Carousel Bootstrap4

Carousel Bootstrap4

Input file style01

Input file style01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Responsive image grid

Responsive image grid

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Triangle Background css 01

Triangle Background css 01

Vers le haut

Vers le haut

toggle switch style01

toggle switch style01

toggle switch style03

toggle switch style03