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

View this post on Instagram

A post shared by ROBOROSX (@roborosx)

Thank you

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...

RoborosX

Search This Blog