Responsive Slider

You can add a Responsive Slider on any Page inside any Container using the Code below:

Code Example

<div class="fslider">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
		</div>
	</div>
</div>

Settings

Setting Description
data-animation

Defines the Animation Style of the Slider.

Option(s): slide or fade

Ex: data-animation="fade"
data-easing

Easing of the Slide Animation.

Ex: data-easing="easeInQuad"
data-direction

Direction of the Slide Animation.

Option(s): horizontal or vertical

Ex: data-direction="horizontal"
data-slideshow

Enables/Disables Auto Slideshow.

Option(s): true or false

Ex: data-slideshow="true"
data-pause

Time Interval between Slide Animations when Auto Slideshow enabled in milliseconds.

Option(s): 5000 for 5 Seconds

Ex: data-pause="6000"
data-speed

Speed of the Slide Animation in milliseconds.

Option(s): 600 for 0.6 Seconds

Ex: data-speed="800"
data-video

Set to true if a Slide in the Slider contains a Embedded Video.

Option(s): true or false

Ex: data-video="true"
data-reverse

For Animate the Slides in Reverse Direction

Option(s): true or false

Ex: data-reverse="true"
data-touch

Enable/Disable Touch on Mobile Devices.

Option(s): true or false

Ex: data-touch="true"
data-smooth-height

Enables/Disables Slider's Smooth height Functionality.

Option(s): true or false

Ex: data-smooth-height="true"
data-pagi

Enables/Disables Slider's Pagination.

Option(s): true or false

Ex: data-pagi="true"
data-arrows

Enables/Disables Slider's Arrow Navigation.

Option(s): true or false

Ex: data-arrows="true"
data-thumbs

Enables/Disables Slider's Thumb Navigation.

Option(s): true or false

Ex: data-thumbs="true"
data-thumb

Note: If data-thumbs is set to true, then you will need to include data-thumb for Each Slide.

Ex: data-thumb="path/your-slide-thumb-image.jpg"

Using Thumbs Scaling

You can use the Scaling Thumbs feature to divide the Thumb’s Width into equal widths relative to the Slider’s Width. For Example, if your Slider’s Width is 800px, then the Thumb’s Width for a 4 Columns Grid will be 200px and for a 8 Columns Grid will be 100px and so on…

You can use grid-3, grid-5, grid-6, grid-8, grid-10, grid-12 for your Thumbs Grid.

Note: You will need to add the .flex-thumb-grid Class to the .fslider Element along with the Grid’s Class. Also, there is no need to use any Class for a 4 Columns Grid since it is set by default.

<div class="fslider flex-thumb-grid grid-6" data-arrows="false" data-animation="fade" data-thumbs="true">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
		</div>
	</div>
</div>

Inside a Container

You can add the Flex Slider inside any Container or Grid with any Width and the Images will adapt accordingly. Example:

<div class="col-md-6">
	<div class="fslider">
		<div class="flexslider">
			<div class="slider-wrap">
				<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
			</div>
		</div>
	</div>
</div>

Inside Custom Width DIV

<div style="max-width: 300px;">
	<div class="fslider">
		<div class="flexslider">
			<div class="slider-wrap">
				<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
			</div>
		</div>
	</div>
</div>

Last Modified: February 7, 2020

Need Help?