Press "Enter" to skip to content

A Custom Dynamic Slideshow Slider in JQuery

Custom JQuery Slider is a custom JQuery slider, capable of consuming data from local or remote JSON files. Multiple jobs were performed on the same page.

jquery carousel slider dynamic content, jquery image slider, jquery carousel slider example, how to create dynamic image slider in javascript, jquery image slider example with source code

Easy Responsive Ideal Image Slider Carousel in vanilla JS

How to make use of it:

1. Create a container to hold the slide shows.

<div class="galleries image>Slider"></div>

2. Define your image data in images.json.

// 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"
      },
      // ...
    ],
  ]
}

3. Load the main script slider after jQuery.

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

4. Necessary 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;
}

5. Use a remote data source instead.

const remoteJson =  {
    url: 'http://localhost:5000/images',
    method: 'post',
    headers: {"Content-Type": "application/json"},
    dataType: 'json'
}
const imageResource = remoteJson

Simple Dynamic Slideshow With jQuery And JSON, Custom JQuery Slider Plugin/Github, jquery image auto slider, jquery simple image slider, jquery slider carousel


See Demo And Download

Official Website(miklos-sz): Click Here

This superior jQuery/javascript plugin is developed by miklos-sz. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *