Skip to main content

Auto-Image Slider using Javascript

 

Introduction

Image Slider is a way of displaying multiple images, videos or graphics which is created using javascript.

Preview


HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-Image Slider</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
    <link rel="stylesheet" href="ImageSlider.css">
    <script src="ImageSlider.js"></script>
</head>
<body>
    <div class="container">
        <div class="slides">
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/20/01/10/glacier-5760277_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2015/07/09/22/45/tree-838667_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2019/10/25/06/07/sky-4576072_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mountain-477832_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2015/11/07/11/46/holly-1031472_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/19/14/43/christmas-tree-5758765_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/12/10/16/19/waterfall-5820721_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/12/09/21/39/city-5818738_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/22/07/11/river-5765785_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/24/22/46/prague-5774045_960_720.jpg" alt=""></div>
            <div class="slide"><img src="https://cdn.pixabay.com/photo/2020/10/23/06/23/empire-state-building-5677823_960_720.jpg" alt=""></div>
        </div>
    </div>

    <i id="prev" class="fas fa-arrow-left"></i> <i  id="next" class="fas fa-arrow-right"></i>
   
    <script>
        
       
    </script>
</body>
</html>

CSS Code

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #ec2F4B;
}

.slides {
  display: flex;
  width: 900px;
  height: 70vh;
  margin-top: 50px;
  overflow: hidden;
}

.slide {
  width: 900px;
  min-width: 900px;
  text-align: center;
}

img {
  height: 100%;
  box-shadow: -2px -2px 12px rgba(0, 0, 0, 0.5), 2px 2px 12px rgba(0, 0, 0, 0.5);
}

#prev, #next {
  position: absolute;
  top: 40%;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  transition: ease 0.6s;
}

#prev:hover, #next:hover {
  color: rgba(43, 43, 43, 0.918);
}

#prev {
  left: calc(50% - 35%);
}

#next {
  left: calc(50% + 33%);
}

Javascript Code

var slide, prev, next;

slide = document.getElementsByClassName("slide");
prev = document.getElementById("prev");
next = document.getElementById("next");

let slide_count = 0, size = slide[0].clientWidth;  
let length = slide.length;

prev.addEventListener("click", prevMove);
next.addEventListener("click", nextMove);

window.setInterval(nextMove, 3000);

function prevMove() 
{
    if (slide_count == 0) 
      {
            for (let i = 0; i < length; i++) 
                slide[i].style.transition = "none";
      } 
      else 
      {
            for (let i = 0; i < length; i++) 
                slide[i].style.transition = "ease 0.6s";
      }

      slide_count--;

      if (slide_count < 0) 
        slide_count = length - 1;

      for (let i = 0; i < length; i++)
        slide[i].style.transform = "translateX( " + (-size * slide_count)+ "px)";
}

function nextMove() 
{
    if (slide_count == length - 1) 
    {
      for (let i = 0; i < length; i++) 
        slide[i].style.transition = "none";
    } 
    else 
    {
      for (let i = 0; i < length; i++) 
        slide[i].style.transition = "ease 0.6s";
    }

    slide_count++;

    if (slide_count >= length) 
        slide_count = 0;

    for (let i = 0; i < length; i++)
      slide[i].style.transform = "translateX( " + (-size * slide_count) + "px)";
}


Follow us on Instagram


Thank you

Comments

Post a Comment

Popular posts from this blog

Voice controlled Bulb by Bluetooth using Relay Module in Adruino.

  Description In this project we are using Bluetooth, Voice Control App and Relay Module to control the bulb. The App we are using is Aduino Bluetooth Voice Controller to send the commands to the Arduino using Bluetooth. Relay module is a electrically operated switch which requires power supply of 5V to turn ON/OFF. There are terminals mainly--NO(Normally open),NC(Normally closed),COM(Common). NO supply current when relay is activated. NC do not supply current when relay is activated. COM is common between NO and NC and it is a moving part in relay module. Demo Video Working Using App we send voice command to ON/OFF the bulb and it is send through bluetooth connection where HC - 05 Bluetooth Module will recieve the command and pass it to the arduino.  And After Receiving the command, current is supplied from arduino to relay module, Inside a relay module the COM part will move due to Induction of electromagnetic field. This will make it work by turning ON/OFF by the given Inst...
Post a Comment
Read more

Instagram Post Downloader using JQuery and Ajax

  Introduction In this project, we will learn to get the data from Instagram using the link given by the user. First the given link is modified and passed to the instance of XMLHttpRequest. Using instance of XMLHttpRequest, we will get JSON data and Access the required data such as image url, video url and create image and video tag respectively. Now you can download image as well as video as shown in the preview video. Pre-Requisite you should know to use JSON data, to access the required data ( object, arrays, string etc ). you should know to use XMLHttpRequest, to send the request, to get the data from the response. basic of JQuery is enough. Preview HTML Code <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < link rel = "stylesheet" ...
1 comment
Read more

Register form through OTP Verification using Firebase (Android Studio).

Android is an operating system that was developed by Google which is designed for touchscreen mobile devices such as smartphone and tablets. Description In this project we will build an app using A ndroid Studio. T his app will take your username and phone number.By this phone number you will receive an OTP and after entering OTP you will be able to register your phone number with the Firebase. Android Studio it is a integrated development environment (IDE) for  Android operating system, built on JetBrains' IntelliJ IDEA software and designed specifically for Android development.It is available for download on Windows, macOS and Linux based operating systems. Firebase Firebase Authentication is a service that can authenticate users using only client-side code. It supports social login providers Facebook, GitHub, Twitter and Google as well as other service providers like Google Play Games, Apple, Yahoo, and Microsoft. Additionally, it includes a user manag...
1 comment
Read more