You can add a Responsive Slider on any Page inside any Container using the Code below:
<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>
Setting | Description |
---|---|
|
Defines the Animation Style of the Slider. Option(s): slide or fade Ex: |
|
Easing of the Slide Animation. Ex: |
|
Direction of the Slide Animation. Option(s): horizontal or vertical Ex: |
|
Enables/Disables Auto Slideshow. Option(s): true or false Ex: |
|
Time Interval between Slide Animations when Auto Slideshow enabled in milliseconds. Option(s): 5000 for 5 Seconds Ex: |
|
Speed of the Slide Animation in milliseconds. Option(s): 600 for 0.6 Seconds Ex: |
|
Set to true if a Slide in the Slider contains a Embedded Video. Option(s): true or false Ex: |
|
For Animate the Slides in Reverse Direction Option(s): true or false Ex: |
|
Enable/Disable Touch on Mobile Devices. Option(s): true or false Ex: |
|
Enables/Disables Slider's Smooth height Functionality. Option(s): true or false Ex: |
|
Enables/Disables Slider's Pagination. Option(s): true or false Ex: |
|
Enables/Disables Slider's Arrow Navigation. Option(s): true or false Ex: |
|
Enables/Disables Slider's Thumb Navigation. Option(s): true or false Ex: |
|
Note: If Ex: |
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>
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>
<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