Recommended slider plugins and sample comparisons of popular ones

Table of Contents

• slick
• bxSlider
• Swiper
• FlexSlider 2

slick

First up is my personal favorite slider plugin, "slick".

Its behavior when paging is highly responsive, and it offers a rich and flexible set of options.

The size is 41.8KB for JS and 4.8KB for two CSS files, totaling 46.6KB.

Here's the minimum implementation, including loading necessary files and the slider part.

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- Slider -->
<div class="slick">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(function(){
	//slick
	$(".slick").slick();
});
</script>

Options

slick options are specified as follows.

$(".slick").slick({
	autoplay: true, //Auto start, default is false
	dots: true, //Dots, default is false
	arrows: true, //Turn off previous/next arrows, default is true
	autoplaySpeed: 4000, //Autoplay speed, default is 3000
	speed: 400, //Animation speed, default is 300
	centerMode: true, //Show a glimpse of left/right slides, default is false
	variableWidth: true, //Supports images of various widths, default is false
	pauseOnHover: false, //Pause slider while hovering, default is true
	responsive: [{ //Responsive
		breakpoint: 768, //Breakpoint
		settings: { //Settings for smartphone
			centerMode: false,
			variableWidth: false
		}
	}]
});

Here is the slider with the above options specified.

It supports showing a glimpse of left/right slides, is responsive, and handles images of various widths (variableWidth).

Other features

• Fade
• Vertical slides
• Slider with thumbnails

and more.

Click here for the official slick.js documentation

bxSlider

Next up is the established-feeling bxSlider (has been around for a long time).

It's a popular plugin, but I have the impression that it can be a bit tricky, sometimes having odd timing after paging or not resuming automatically.

The size is 22.9KB for JS, 3.8KB for CSS, and 11.1KB for 2 images, totaling 37.9KB.

Here's the minimum implementation.

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<!-- Slider -->
<div class="bxslider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(function(){
	//bxslider
	$(".bxslider").bxSlider();
});
</script>

Options

bxSlider options are specified as follows.

$(".bxslider").bxSlider({
	auto: true, //Auto start, default is false
	pager: false, //Dots, default is true
	controls: true, //Previous/next arrows, default is true
	pause: 3000, //Autoplay speed, default is 4000
	speed: 400, //Animation speed, default is 500
});

Here is the slider with the above options specified.

Click here for the official bxSlider documentation

It does not support responsiveness, so parts that cannot be done with options need to be forced with CSS or similar.

Glimpse of Left/Right Slides

Showing a glimpse of left/right slides with bxSlider is not possible with the standard specifications, so it needs to be forced with CSS.

Wrap the slider with another div

<div class="bxslider_wrap">
	<div class="bxslider">
		<div class="slide"><img src="img01.jpg"></div>
		<div class="slide"><img src="img02.jpg"></div>
		<div class="slide"><img src="img03.jpg"></div>
		<div class="slide"><img src="img04.jpg"></div>
	</div>
</div>

You can achieve this by writing CSS like this.

.bxslider_wrap {
	overflow: hidden;
}
.bxslider_wrap .bx-wrapper {
	max-width: 640px!important;
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	box-shadow: none;
}
.bxslider_wrap .bx-viewport {
	overflow: visible!important;
}

Other features

• Fade
• Vertical slides
• Slider with thumbnails

and more.

However, bxSlider does not support images of various widths (variableWidth).

Also, it requires a bit of ingenuity to get the active slide.

(Don't you want to make non-active slides semi-transparent?)

The method for this is introduced in this article, so please take a look if you like.

Swiper

From this point on, these are plugins I haven't used myself.

Next up is the slider plugin "Swiper", which does not require jQuery.

The size is 137KB for JS and 18KB for CSS, totaling 155KB.

I've implemented it for now. (You can swipe left and right)

Here's the minimum implementation.

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">

<!-- Slider -->
<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
	</div>
</div>

<!-- JS -->
<script src="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".swiper", {});
</script>

Options, Pager, and Dots

Adding various elements made it look more like a slider.
Showing a glimpse of left/right slides is also possible with the standard specifications.

HTML

The pager and dots are written in HTML.

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
	</div>
	<!-- Dots -->
	<div class="swiper-pagination"></div>
	<!-- Pager -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

CSS

Write the minimum necessary CSS

.swiper {
	position: relative;
	overflow: hidden;
}

JS

Execute Swiper. Options are specified as follows.

const swiper = new Swiper(".swiper", {
	loop: true, //Go back to the beginning after the end, default is false
	speed: 400, //Animation speed, default is 300
	autoplay: { // Autoplay
		delay: 3000, //Autoplay speed
		disableOnInteraction: false, //Prevent autoplay from stopping even when clicking arrows
	},
	//Specify dots
	pagination: {
		el: ".swiper-pagination",
		clickable: true //Enable dot clicks
	},
	//Specify pager
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	//Responsive
	breakpoints: {
		768: { //Apply next if 768px or more
			slidesPerView: 1.5, //Glimpse of left/right slides
			centeredSlides: true, //Glimpse of left/right slides
		}
	}
});

Other features

• Fade (In addition to fade, there are effects like cube)
• Vertical slides
• Slider with thumbnails

and more.

Also, it supports images of various widths (variableWidth).

More details are explained in this article.

[Swiper] How to support slides of various widths (variableWidth)

Click here for the official Swiper documentation

After playing around with it a bit, it feels very responsive and lightweight!

The ".swiper-slide-active" class is also added to the active slide.

However, its size is 155KB, which is a bit larger compared to other plugins, so I probably wouldn't choose it unless there's a special reason, such as not being able to use jQuery.

FlexSlider 2

Next up is "FlexSlider 2".

JS is 22.3KB, CSS is 4.33KB, totaling 26.7KB.

I haven't used it personally, but it seems to be used on major corporate websites. It's apparently a famous plugin. (laughs)

I've seen articles saying "FlexSlider 2 doesn't work with jQuery 3.x", but it seems that you just need to change
$(window).load(function(){ to $(window).on("load", function(){ when executing flexslider.
In the first place, if you're using $(function(){, it doesn't matter.

In fact, my blog's jQuery version is 3.4.1, and it's working fine.

However, the pager is cut off by default...
It seems to be cut off when CSS "line-height" is applied.

Here's the minimum implementation.
Create a `.slides` tag inside `.flexslider` and arrange images within it.

<!-- CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css">

<!-- Slider -->
<div class="flexslider">
	<ul class="slides">
		<li><img src="img01.jpg"></li>
		<li><img src="img02.jpg"></li>
		<li><img src="img03.jpg"></li>
		<li><img src="img04.jpg"></li>
	</ul>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider.min.js"></script>
<script>
$(function(){
	//flexslider2
	$('.flexslider').flexslider({
		animation: "slide" //Slider type, default is fade
	});
});
</script>

$(".flexslider").flexslider({
	animation: "slide", //Slider type, default is fade
	slideshow: true, //Auto start, default is true
	controlNav: true, //Dots, default is true
	directionNav: true, //Previous/next arrows, default is true
	slideshowSpeed: 4000, //Autoplay speed, default is 7000
	animationSpeed: 400 //Animation speed, default is 600
});

<div class="flexslider_wrap">
	<div class="flexslider">
		<ul class="slides">
			<li><img src="img01.jpg"></li>
			<li><img src="img02.jpg"></li>
			<li><img src="img03.jpg"></li>
			<li><img src="img04.jpg"></li>
		</ul>
	</div>
</div>

.flexslider_wrap {
	overflow: hidden;
}
.flexslider {
	max-width: 640px; /*Change according to image width*/
	margin-left: auto;
	margin-right: auto;
}
.flexslider .flex-viewport {
	overflow: visible!important;
}

.flexslider_wrap .flex-direction-nav {
	line-height: 1; /* Fixes the cut-off pager */
}

Other features

• Fade
• Vertical slides
• Slider with thumbnails

and more.

FlexSlider 2 does not support images of various widths (variableWidth).

The plugin size is a very lightweight 26.7KB, and the ".flex-active-slide" class is also added to the active slide.

However, it feels like it doesn't quite hit the mark, as it doesn't resume after pressing the pager, and the pager is cut off from the start, requiring manual adjustments...

Comments

We also welcome reports such as "It worked!".