Simple jQuery Image Slider with Next Previous Buttons

Are you tired with heavy loaded jQuery slider plugins? Check out this simple & basic slider with Next/Prev buttons. It also supports the autoplay function.

It’s an image carousel/slider plugin which written in HTML, CSS, and Javascript. Due to its minimal coding, it’s lightweight which you can easily use on any kind of website.

Above all, the plugin requires nothing except link src of the image. Then it will dynamically build simple UI for the slider.

Moreover, the plugin “Carrousel” comes with built-in fading animation. It can be fully customized with additional CSS to fit on your needs.

How to Create a Simple jQuery Image Slider

By simpling loading the slider Javascript and CSS files, you can easily start with building a basic slider. As it’s work with jQuery so you also need to load the jQuery library.

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

<!-- Carroussel CSS -->
<link rel="stylesheet" href="styles/styles.css">

<!-- Carroussel JS -->
<script src="js/carroussel.js"></script>

After that, simply create a div element with a unique id without having any content or images. All the images will be load dynamically from the Javascript function.

<div id="basic-slideshow"></div>

Now, initialize the jQuery function by using the document ready and add your images using the src tag in the plugin’s option. You can use the animation and mode options to fade it and make it autoplay.

It also supports the sliding image effect which you can use by just adding “slide” inside of fade in the animation option.

$(document).ready(function(){
let options = {
      animation: 'fade',
      mode: 'auto',
      items: [
        { 'src': 'path/img/image1.jpg' },
        { 'src': 'path/img/image2.jpg' },
        { 'src': 'path/img/image3.jpg' }
      ]
    };
    $('#basic-slideshow').carroussel(options);
});

Note: You don’t need to create the HTML structure for adding images. It automatically gets the image src path from the Javascript. So, no need to add anything manually.