Mobile-friendly Image Carousel in jQuery

Yet another jQuery plugin to create a mobile-friendly image carousel. The “carouselLineArrow” is a lightweight jQuery image carousel plugin that comes with arrows button navigation and an autoplay feature. It helps you to play multiple images/slide items with a progress bar/line indicator.

You are not limited to place only images, you can also put videos, HTML elements, and iframes inside the slider items. The implementation of the plugin is really simple and time-saving. Therefore, you just need to place your images into HTML code and your carousel will be ready after plugin initialization.

Furthermore, you can control the carousel through its available configuration options. Similarly, you can also customize its layout using additional CSS according to your needs. It allows you to set the line indicator to the top or bottom of the carousel with custom bar thickness/size. Likewise, you can also set custom duration for sliding and delay of images.

How to Create a Mobile-friendly Image Carousel

After downloading this carousel plugin, include the "carousel-line-arrow" and "style" CSS file into the head tag of your HTML document.

<!-- Image Carousel CSS -->
<link rel="stylesheet" href="css/jquery.carousel-line-arrow.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">

Now, create a div element with a class name "your-slider-item" and place your sliding item (image, video, or text, etc) inside it. You can create multiple items as per your requirements. Wrap all these slide items into a div element and define its class name "your-slider". So, a basic HTML structure for your carousel is as follows:

<div class="your-slider">
   <div class="your-slider-item">
      <img src="https://source.unsplash.com/VtZdkY6NmRg/400x300" alt="">
   </div>
   <div class="your-slider-item">
      <img src="https://source.unsplash.com/Jj6cvZECh5c/400x300" alt="">
   </div>
   <div class="your-slider-item">
      <img src="https://source.unsplash.com/3izJtPG85Uk/400x300" alt="">
   </div>
   <div class="your-slider-item">
      <img src="https://source.unsplash.com/CatfPqdtW6c/400x300" alt="">
   </div>
</div>

After that, load the jQuery JavaScript library and "jquery.carousel-line-arrow.js" file just before the closing of the body tag.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Carousel JS -->
<script src="js/jquery.carousel-line-arrow.js"></script>

Finally, initialize the carouselLineArrow() plugin in the jQuery document ready function.

$(document).ready(function(){
    $('.your-slider').carouselLineArrow();
});

Plugin Configuration Options

The following are some advanced configuration options to create an image carousel with an autoplay indicator line/progress bar.

$('.your-slider').carouselLineArrow({
	slideDur : 500,
});

$('.your-slider').carouselLineArrow({
	lineDur : 5000,
});

$('.your-slider').carouselLineArrow({
	heightIsProportional : true,
});

$('.your-slider').carouselLineArrow({
	linePosition : 'bottom',
});

$('.your-slider').carouselLineArrow({
	lineHeight : '5px',
});

$('.your-slider').carouselLineArrow({
	lineColor : 'red',
});

That’s all! hopefully, you have successfully integrated with this jQuery plugin to create an image carousel. If you have any questions or need further help, let us know by comment below.