[FlexSlider 2] How to implement a slider that flows horizontally at a constant speed

2023-09-29

Here's how to implement a slideshow that flows horizontally at a constant speed using the jQuery slider plugin "FlexSlider 2".

Sample

You can create something like this.

However, it stops when the window loses focus on PC. We will also explain how to deal with this later.

JS

Specify the following options for FlexSlider.

$(".flexslider").flexslider({
	animation: "slide",
	slideshowSpeed: 0, // Set stop time to 0
	animationSpeed: 4000, // Speed (adjust as desired)
	easing: "linear", // Required
	useCSS: false, // Required
	directionNav: false, // Turn off left/right buttons
	pauseOnAction: false, // Turn off pause on hover
	touch: false // Turn off touch operations
});

This will make the slider move at a constant speed.

For how to show a glimpse of the slides on both sides, as in the sample above, please refer to the following article.

[FlexSlider 2] How to show a glimpse of the slides on both sides

Notes

In the first sample, you'll notice that the slider stops when the window loses focus on PC.

This seems to be the standard behavior of FlexSlider.

Reference : jquery - Flexslider stops working when browser window is off focus - Stack Overflow

To fix this, around line 1145 of flexslider.js

Comment out the following description.

// Ensure the slider isn't focussed if the window loses focus.
$( window ).blur( function ( e ) {
  focused = false;
}).focus( function ( e ) {
  focused = true;
});

Like this:

// Ensure the slider isn't focussed if the window loses focus.
//$( window ).blur( function ( e ) {
//  focused = false;
//}).focus( function ( e ) {
//  focused = true;
//});

Here's the result after applying that; it no longer stops even when the window loses focus.

If you cannot load the iframe correctly, click here.

That concludes the method for creating a slider that flows horizontally at a constant speed with FlexSlider, along with its notes.

Comments

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

If this was helpful, we'd appreciate your support!
Any support received will be used for childcare.

Or support us by buying something from the buttons below
(You don't have to buy the linked product.)

Amazon

楽天市場

Yahoo!ショッピング