Simple Dynamic Slideshow With jQuery And JSON – Slider.js

slideshow
File Size: 3.89 KB
Views Total: 556 views
Last Update:January 1, 1970
Publish Date: October 2, 2021
Official Website: Go to website
License: MIT
Plugin Author: miklos-sz
Demo    Download

A custom slider in jQuery able to consume data from local or remote json file. Multiple instances on same page functionality implemented. A simple jQuery plugin to dynamically generate image slideshow with jQuery from either local or remote JSON file.

Features:

  • Easy to implement.
  • Responsive design.
  • Allows multiple slideshow instances on a page.
  • Beautiful loader.

How to use :

Add the jQuery and slider.js.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="slider.js"></script>

Create a container to hold the slideshows.

<div class="galleries image<a href="https://www.jquerypost.com/category/slider-carousel/">Slider</a>"></div>

Define your own image data in the images.json as follows.

// images.json
{
  "data": [
    // slideshow 1
    [
      {
        "url": "1.jpg",
        "alt": "Image Alt 1"
      },
      {
        "url": "2.jpg",
        "alt": "Image Alt 2"
      },
      {
        "url": "3.jpg",
        "alt": "Image Alt 3"
      },
      // ...
    ],
    // slideshow 2
    [
      {
        "url": "4.jpg",
        "alt": "Image Alt 4"
      },
      {
        "url": "5.jpg",
        "alt": "Image Alt 52"
      },
      {
        "url": "6.jpg",
        "alt": "Image Alt 6"
      },
      // ...
    ],
  ]
}

Add Slideshow CSS styles.

.galleries {
  width: 100%;
  margin-top: 150px;
}

/* Loader */

@keyframes glowAnim {
    0% { 
      opacity: 1;
      background-color: #ff4500;
      transform: scale(100%);
    }
    50% { 
      opacity: 0.8;
      background-color: #ff3c00;
      transform: scale(125%);
    }
    100% { 
      opacity: 1;
      background-color: #ff4500;
      transform: scale(100%);
    }
}

@keyframes rotateAnim {
    0%   { transform: rotate(-360deg);}
    100% { transform: rotate(0deg);}
}

@keyframes traversalAnim {
    0%   { transform: rotate(-360deg) translate(0, 0);}
    50%  { transform: translate(30px 10px);}
    100% { transform: rotate(0deg) translate(0, 0); }
}

.loader-container {
  height: calc(60vh - 150px);
  display: flex;
  align-items: center;
}

.loader {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateAnim 3s linear infinite;
}

.loader__sun,
.loader__earth,
.loader__earth::after,
.loader__jupiter {
  border-radius: 50%;
}

.loader__sun {
  width: 50px;
  height: 50px;
  background-color: orangered;
  animation: glowAnim 3s ease-in-out infinite;
}

.loader__jupiter {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: rgb(218, 142, 30);
  content: '';
}

.loader__earth {
  position: absolute;
  top: 50px;
  right: 40px;
  width: 15px;
  height: 15px;
  background-color: #20859e;
  content: '';
  animation: rotateAnim 3s backwards infinite;
}

.loader__earth::after {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 8px;
  height: 8px;
  background-color: #3a3a3a;
  content: '';
}

/* Loader end */

.slider {
  position: relative;
  height: calc(100vh - 150px);
  margin: 0 auto 50px;
  background-color: #000;
}

.slider .image,
.slider .image .image__caption {
  transition: 0.8s ease-in-out;
}

.slider .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image__caption {
  position: absolute;
  bottom: 3%;
  right: 3%;
  padding: 10px 20px;
  font-size: 20px;
  background-color: #fff;
}

.image__caption h3 {
  margin: 0;
}

.image:not(.active),
.image__caption:not(.active) {
  opacity: 0;
}

.slider .image.active img,
.slider .image.active .image__caption {
  opacity: 1;
}

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.slider button::after {
  position: relative;
  content: url('./arrow.svg');
}

.slider button.prev {
  transform: rotate(180deg) translateY(25px);
}

.slider .next {
  right: 0;
}

.slider button[disabled],
.slider button[disabled=disabled] {
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

Done

Thanks for make jQuery plugin is developed by miklos-sz For more Helpfull for users, please check the demo page or visit the official website.

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like