Mobile-friendly Image Carousel in jQuery

Category: Slideshow | February 16, 2021
Mobile-friendly Image Carousel in jQuery
Author: Alexaltrex
Official Page: Go to Website
Last Update:February 16, 2021
License:MIT

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.

OptionDefaultTypeDescription
slideDur500NumberIt defines the duration of toggle slide animation (ms).

Example:

$('.your-slider').carouselLineArrow({
	slideDur : 500,
});
lineDur5000NumberIt defines the duration of line-time animation (ms). So, you can set the number or string value in this option.

Example:

$('.your-slider').carouselLineArrow({
	lineDur : 5000,
});
heightIsProportionaltrueBooleanDecide whether to set the height of the slider is proportional to the width when resized. Basically, it’s a useful option to make the slider responsive. So, keep it true to make it mobile-friendly.

Example:

$('.your-slider').carouselLineArrow({
	heightIsProportional : true,
});
linePosition‘bottom’StringThis option specifies the position of line-time. Therefore, possible options are ‘bottom’ and ‘top’.

Example:

$('.your-slider').carouselLineArrow({
	linePosition : 'bottom',
});
lineHeight‘5px’StringUseful to set the custom height of the line-time (in px, em, rem, %).

Example:

$('.your-slider').carouselLineArrow({
	lineHeight : '5px',
});
lineColor‘red’StringIt set the custom color for the line. So, you can pass any valid HTML color in this string option.

Example:

$('.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.

You May Also Like

Leave a Comment

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