jQuery Automatic Image Slider auto Playing Carousel

Yet another carousel slider based on jQuery and CSS that helps you to create automatic image slider (auto playing carousel). The plugin has straight forward logic to add the simple image sliding functionality with auto playing option.

This simple carousel slider can be fully customize with CSS to change its look.

Plugin Overview

Plugin: jquery-slider-auto
Author: Stanislav Andreev
Licence: MIT Licence
Published: January 20, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (Image, HTML, CSS & JavaScript )
Package Size: 439 KB

How to Make Automatic Image Slider

1. First of all load the jQuery and jquery-slider-auto‘s JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Slider JS -->
<script src="js/index.js"></script>

2. Create HTML structure for jQuery automatic image slider and put your image’s links in it.

      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="img/slide-1.jpg" alt="slide_01" />
            <div class="slide slide-2">
              <img src="img/slide-2.jpg" alt="slide_02"  />
            <div class="slide slide-3">
              <img src="img/slide-3.jpg" alt="slide_03"  />
            <div class="slide slide-4">
              <img src="img/slide-4.jpg" alt="slide_04"  />
        <div class="slide-buttons"></div>

3. Style your carousel slider with CSS.

/********** SLIDER **********/
.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;}

.slide-viewer {
    position: relative;
    overflow: hidden;
    height: 430px;}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}

.slide:first-child {
    display: block;}

/********** BUTTONS **********/
.slide-buttons {
  text-align: center;}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #009900;
  cursor: pointer;}

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link