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

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

RoborosX

Search This Blog