How to create an image slide show using HTML, CSS and JavaScript.

How to create an image slide show using HTML, CSS and JavaScript.

Are you interested in learning how slide shows are made?

Are you interested in how to make an image slide show using HTML, CSS and JavaScript?

 If the answer to your question is yes. Yes! Then this article is for you. I will teach basic image slides in this content. And I will give you the source code as a gift.

Create image slide shows using HTML, CSS and JavaScript.

How to key and how to customize. I will try to explain everything in this tutorial.

First take a look at the source code and I will explain below.

🍃

Source Code:|css|html|js|

<style> .mySlides {display: none;} img {vertical-align: middle;} .slideshow-container { max-width: 1000px; position: relative; margin: auto; display:flex; flex-direction:rows; text-align:center; justify-content:center; border-radius:10px; } .myImg { border-radius: 25px cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 25;} .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #49b8f4; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #787878; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } @media only screen and (max-width: 300px) { .text {font-size: 11px} } </style> <div id="loader" class="circle"></div> <div class="slideshow-container"> <div class="mySlides fade"> <img class="myImg" src="/priyo.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo2.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo3.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo4.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo5.jpg"/> </div> </div> <br/> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 1000); // } </script>

1. CSS

You can change a lot of things in the CSS section. However, it should be seen that there is no mistake. For example: You wanted me to make the border-radius more radius but you gave 10px to 500px. What do you think it will show? Let me know in the comment box.

Example css : .dot {

background-color: #49b8f4;

}

If you don't want to give #49b8f4, you can choose the color you want. No one will tell you anything.

2. HTML

Here you can add more photos and dots if you want. How to add more photos:

    <div class="mySlides fade">

         <img class="myImg" src="/priyo.jpg"/>

    </div>

Copy and paste it. And add the image address to src.

How to add more dots -

<span class="dot"></span>

Copy and paste it.

Special Note: You have to add exactly the number of dots that you add to the photos to look good.

3. Java script

You can do some customization here. But yes you can, if you have javascript skills. I will only teach you here. To schedule the image slide show. That is how long your photo will show.

In the JavaScript part □ setTimeout(showSlides, 1000); Find it out. I'll take a second to explain here. You can say one second but here 1000 why? I am giving the answer in short 1000 means 1 second. 2000 means 2 seconds. 10000 means 10 seconds. Then you change to 1000 and set the time as per your requirement.

Example:

setTimeout(showSlides, 2000);

Result:

Last words:

If you can complete the task correctly. Then using this source code you can easily slide show any photo on your website. There will be no problem.

Special Note:

There is no error in the source code because it has been tested and you are seeing the above result.

My Talk:

Thank you for reading this blog. Assalamu Alaikum! I am Sheikh Zubayer. I want to say something. In fact I have written this article or content or blog by taking a lot of pains, thinking, gaining knowledge about every topic and spending a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. However, if there is any problem, let me know in the comment box. I will try to answer your question properly. Hope it will be useful. I didn't write anything like hope in vain I believe it.

🍃

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!