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";  
}
toggle switch style01

toggle switch style01

input radio checkbox b4 style

input radio checkbox b4 style

bootstrap4 tabs

bootstrap4 tabs

Timeline style07

Timeline style07

SwiperJS style01

SwiperJS style01

Responsive image grid

Responsive image grid

Radio button style

Radio button style

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Image hover 02

Image hover 02

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Card Bootstrap4 01

Card Bootstrap4 01