• map-iconQatar
  • email-iconinfo@sugaiinstitute.com

YouTube : Sugai Institute

Slider Image using Javascript

Slider Image using Javascript

  • Teacher
    Gayathri Sudhakar
  • Category
  • Views

Slider Image using Javascript

In this video you will learn about how to create slider image using javascript and CSS.

Javascript Slider Image Example

(Use Ctrl+c to copy this coding)

Javascript Tutorial</title>
.slider { display: none; } .slideshow { position: relative; } .prev, .next { position: absolute;top: 50%; cursor: pointer; padding: 15px; font-size: 20px; color: white; margin-top: -30px; } .next { right: 0; } .prev:hover, .next:hover { background-color: black; } .dot { height: 15px; width: 15px; background-color: gray; display: inline-block; border-radius: 50%; } .active { background-color: black; } </style>
Slider Image using Javascript</h1>
<div class="slideshow">
<div class="slider">
<img src="1.png" style="width:100%;height: 300px;">
<div class="slider">
<img src="2.png" style="width:100%;height: 300px;">
<div class="slider">
<img src="3.png" style="width:100%;height: 300px;">
<a class="prev" onclick="nextSlide(-1)">
<a class="next" onclick="nextSlide(1)">
<div style="text-align:center;">
<span class="dot" onclick="gotoslide(1)">
<span class="dot" onclick="gotoslide(2)">
<span class="dot" onclick="gotoslide(3)">
<script type="text/javascript">
var slide=1; show(slide); function nextSlide(n) { show(slide += n); } function gotoslide(n) { show(slide = n); } function show(n) { var i; var slider_img=document.getElementsByClassName("slider"); var dots=document.getElementsByClassName("dot"); for(i = 0; i<slider_img.length ; i++) { slider_img[i].style.display="none"; } for(i=0; i<dots.length;i++) { dots[i].className=dots[i].className.replace(" active",""); } if(n>
slider_img.length) { slide=1; } if(n<1) { slide=slider_img.length; } slider_img[slide-1].style.display="block"; dots[slide-1].className +=" active"; } </script>

Click output to view the output of the coding

  • Reviews
    A.m.a. Mujahith
    08-03-2023 08:34:28

    I am how to front end development learn. I learn you pls said sister .i am in sri lanka

  • Reviews
    08-03-2023 08:32:16

    I am how to front end developmer corse doing . I learn you pls .i am sri lanka

Leave A Comment

Other Playlist

  • HTML : 7 Classes
  • CSS : 8 Classes
  • HTML Questions : 2 Videos
Free Courses Watch Now