Create Product Slideshow Using HTML And CSS

Our Products

Its features:

  • It is automatic product slideshow card.

  • The back image has a length of 1901 pixels and a width of 901 pixels.

  • You can use your company's ads on each of the five slides.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Step 2) Add to html :
<h2>Create Product Slideshow Using HTML And CSS</h2> <h2 class="w3-center">Our Products</h2> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides" src="001.png" style="width:100%"> <img class="mySlides" src="002.png" style="width:100%"> <img class="mySlides" src="003.png" style="width:100%"> <img class="mySlides" src="005.png" style="width:100%"> <img class="mySlides" src="006.png" style="width:100%"> </div>
Step 3) Add to css :
.mySlides { display:none; } .w3-section{ border-top:20px solid #bbb; border-radius:50px 50px 0 0; border-width:45px; border-left:5px solid #bbb; border-right:5px solid #bbb; border-bottom:5px solid #bbb; } .w3-center{ margin-bottom:-60px; }
Step 4) Add to script :
<script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script>



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.