Responsive Slider

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

Usage

<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. Example: `fade`
`data-easing`	Easing of the Slide Animation. Example: `easeInQuad`
`data-direction`	Direction of the Slide Animation. Example: `horizontal`
`data-slideshow`	Enables/Disables Auto Slideshow. Example: `true`
`data-pause`	Time Interval between Slide Animations when Auto Slideshow enabled in milliseconds. Example: `6000`
`data-speed`	Speed of the Slide Animation in milliseconds. Example: `800`
`data-video`	Set to true if a Slide in the Slider contains a Embedded Video. Example: `true`
`data-reverse`	For Animate the Slides in Reverse Direction Example: `true`
`data-touch`	Enable/Disable Touch on Mobile Devices. Example: `true`
`data-smooth-height`	Enables/Disables Slider's Smooth height Functionality. Example: `true`
`data-pagi`	Enables/Disables Slider's Pagination. Example: `true`
`data-arrows`	Enables/Disables Slider's Arrow Navigation. Example: `true`
`data-thumbs`	Enables/Disables Slider's Thumb Navigation. Example: `true`
`data-thumb`	Note: If `data-thumbs` is set to true, then you will need to include `data-thumb` for Each Slide. Example: `path/your-slide-thumb-image.jpg`

Code Snippets

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>

Related docs

Carousel