The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

FlexSlider : Awesome image slider and fully responsive jQuery slider plugin.

Plugin rate :

An awesome, fully responsive jQuery slider plugin.

  • - Simple, semantic markup
  • - Supported in all major browsers
  • - Horizontal/vertical slide and fade animations
  • - Multiple slider support, Callback API, and more
  • - Hardware accelerated touch swipe support
  • - Custom navigation options
  • - Use any html elements in the slides
  • - Basic slider
  • - Slider w/thumbnail controlnav pattern
  • - Slider w/thumbnail slider
  • - Basic carousel
  • - Carousel with min and max ranges
  • - Video & the api (vimeo)
Implementation: 

1. First, include CSS and jQuery files

1
2
3
4
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

2. Build your HTML code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
      <p class="flex-caption">Caption, legend...</p>
    </li>
    <li>
      <img src="slide2.jpg" />
      <p class="flex-caption">Caption, legend...</p>
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

3. Make the plugin call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
 
    //simple FlexSlider call
    $('.flexslider').flexslider();
 
    // more complex call
    $('.flexslider').flexslider({
         animation: "slide",
         controlsContainer: ".flex-container",
         start: function(slider) {
           $('.total-slides').text(slider.count);
         },
         after: function(slider) {
           $('.current-slide').text(slider.currentSlide);
         }
    });
  });
</script>

Multiple Flexslider in your page ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Somewhere in the  of your page -->
<div id="main-slider" class="flexslider">
  <ul class="slides">
    ...
  </ul>
</div>
<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    ...
  </ul>
</div>
 
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });
 
    $('#secondary-slider').flexslider();
  });
</script>
Options: 
namespace
String
Default : "flex-" - Prefix string attached to the class of every element generated by the plugin
selector
String
Default : ".slides > li" - Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation
String
Default : "fade" - Select your animation type, "fade" or "slide"
easing
String
Default : "swing" - Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction
String
Default : "horizontal" - Select the sliding direction, "horizontal" or "vertical"
reverse
Boolean
Default : false - Reverse the animation direction
animationLoop
Boolean
Default : true - Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight
Boolean
Default : false - Allow height of the slider to animate smoothly in horizontal mode
startAt
Integer
Default : 0 - The slide that the slider should start on. Array notation (0 = first slide)
slideShow
Boolean
Default : true - Animate slider automatically
slideshowSpeed
Integer
Default : 7000 - Set the speed of the slideshow cycling, in milliseconds
animationSpeed
Integer
Default : 600 - Set the speed of animations, in milliseconds
initDelay
Integer
Default : 0 - Set an initialization delay, in milliseconds
randomize
Boolean
Default : false - Randomize slide order
pauseOnAction
Boolean
Default : true - Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover
Boolean
Default : false - Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS
Boolean
Default : true - Slider will use CSS3 transitions if available
touch
Boolean
Default : true - Allow touch swipe navigation of the slider on touch-enabled devices
video
Boolean
Default : false - If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
controlNav
Boolean
Default : true - Create navigation for paging control of each slide? Note: Leave true for manualControls usage
directionNav
Boolean
Default : true - Create navigation for previous/next navigation? (true/false)
prevText
String
Default : "Previous" - Set the text for the "previous" directionNav item
nextText
String
Default : "Next" - Set the text for the "next" directionNav item
keyboard
Boolean
Default : true - Allow slider navigating via keyboard left/right keys
multipleKeyboard
Boolean
Default : false - Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel
Boolean
Default : false - Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay
Boolean
Default : false - Create pause/play dynamic element
pauseText
String
Default : "Pause" - Set the text for the "pause" pausePlay item
playText
String
Default : "Play" - Set the text for the "play" pausePlay item
controlsContainer
String
Default : "" - USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls
String
Default : "" - Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync
String
Default : "" - Mirror the actions performed on this slider with another slider. Use with care.
asNavFor
String
Default : "" - Internal property exposed for turning the slider into a thumbnail navigation for another slider
itemWidth
Integer
Default : 0 - Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin
Integer
Default : 0 - Margin between carousel items.
minItems
Integer
Default : 0 - Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems
Integer
Default : 0 - Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move
Integer
Default : 0 - Number of carousel items that should move on animation. If 0, slider will move all visible items.
Methods: 
start
Function
Callback: function(slider) - Fires when the slider loads the first slide
before
Function
Callback: function(slider) - Fires asynchronously with each slider animation
after
Function
Callback: function(slider) - Fires after each slider animation completes
end
Function
Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added
Function
Callback: function(slider) - Fires after a slide is added
removed
Function
Callback: function(slider) - Fires after a slide is removed
Screenshots

Comments

Awesome plugin, and very easy to use and calibrate :)

I can't make a website without this plugin !!

Nice plugin!

Is there a way to adjust the size of the slideshow height/width??

Hi DIYGeek,

Open flexslider.css file at line 42 class .flexslider add width that you want and at line 43 class .flex-viewport change the max-height: 2000px to what you need and thats it.

Hi,

I tried the solution above, and it is not resizing the slider. I realize it is responsive, and I don't want a certain number for the size, I really just want the slider to be 50% of the default height.

Where do I look to change this?

If some one wants expert view about running a blog then i advise him/her to pay a quick visit this blog, Keep up the good job.

I use this plugin too. But I have the problem when I use it my menu function doesn't appear. What's the problem? Check it on my side http://www.sepatuonline-murah.com

I love this slider, but I'm having some problems in getting the layout right... For some reason the slider won't resize if the next image is smaller/larger than the previous one, and that was one of the features I really liked...
Also I can't get it the images or videos to match the size of the slider - I want it to fit 100% to the width and heigth of the slider, as it does in the demo.
If I make the image larger, it'll just show parts of it, as I can't get the image placed at the edges of the slider...

I've uploaded it here:
http://www.rustenspikerfilm.com/index_test.htm

Anyone else got this problem? Any solutions?

Is this finger swipable in smart phones and tablet....
i mean we can rotate it from finger
Thanks

nothing is happening ,please give us the placement for where to insert the code that your are giving, and give a refference not 'place somewhere in the body' this is not the correct process.

He probably didn't give a reference for where to place the code because it's up to you where you want the slider to be located within the page. This video helped me:

http://www.youtube.com/watch?v=TR7GRrJOqhU

Brilliant plugin. Quick question..Is there any way I can add a general header/title to the carousel?

Hi,

You can add a general title before the HTML code but there is no way to add a title into the carousel.

This is indeed a great plugin.

However, I'm having a hard time understanding how to use the callback API, mostly due to my poor Javascript skills.

I'm trying to use the end: function to redirect to a remote URL after a slideshow has finished cycling through the slides. This is what I'm putting inside the tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" charset="utf-8">
 
$(window).load(function() {
   $('#flex-slider-entry-8').flexslider({
 
            end: function(slider) {
             window.location.href = "url-of-another-page";
 
         }
   });
 
 });
</script>

Unfortunately, this is not working for me. Thanks in advance for any help!

Is there a way to add/remove a slide dynamically? Let's say based of user input.

hello,
if i click on the slider to back it becomes completely manual, is it possible to automatically return after a few seconds or minutes?

It works nice. Thanks!

Hi I have one query regarding this slider.
I have 3 different size images e.g width*height (120*12 , 120*40 , 45*23)I am getting spacing issue i.e after sliding image below you are showing some dots as well as showing navigation to move next as well as to move previous slide.
So is there any solution that this slider will adjust as per image size and width no blank space will shown below between slide image and their dots.

Please reply as soon as possible it's very urgent.

Thank you

Hi Kuldeep,

There is all posibilities to change what you want in flexislider.css. See the flex-control-nav classes.

Have a nice day!

Is there a way to adjust the size of the slideshow height/width??

because after slide image there are so much space came between dots and slide image.

Thank you

Hi this is working fine with me:
.flexslider .slides img { max-height:400px width: 100%; display: block;}

flexslider is not working on smartphone when touching the dots.

Thanks in advance

HI Great plug in.

I have a question...
I have placed a swf into my slide show along with images. Is it possible to create a class for the swf slide so I can have a different slideshowspeed just for the swf and keep the rest of the imgs in the slider at the default speed?

Great plug-in. Working really well. Just got one question. How do I change the nav dots to numbers or text?

Thanks,
TripleAre

So I'm using FlexSlider 2, and I have a div with some text and links overlaid on top of the fading images. Every time the animation happens, all of the text shrinks by about one pixel during the animation, then goes back to its original size when the animation is finished. So every five seconds ago, all the text shrinks ever so slightly. This happens in Firefox for Windows and Safari for OSX. No other browsers exhibit this behavior.

Any thoughts???

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
jQuery U.I
>= 1.5
Current version
2.0
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [25]