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

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Login with Envato

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>