Add Flexslider jquery slider to your iWeb site

We’re going to look at adding an amazing jquery slider to your iWeb website called Flexslider. This past year Flexslider was aquired by WooThemes which is also an amazing wordpress theme developer agency and together they have made Flexslider an easy solution to get a slider up and running in no time. This slider, I believe, was one of the first ones to incorporate “responsive” design. Meaning it will adjust to it’s parent container or in our case, the HTML snippet. So lets begin.

Download FlexSlider v2.1 View Demo

Note this demo is written for iWeb users, however, can be adapted for any website design / integration. Also at the time this tutorial was published, it was based on flexslider v2.1.

Steps from start to finish

1. Download Flexslider from the link above or directly from WooThemes (It’s free). The download package above, I have modified to only use what is in this tutorial and the original  has a lot of additional files, including a few different themes and layouts. For this tutorial we’re going to use a simple layout where there are nav arrows and select buttons along with our images. Feel free to play around with the other examples in the downloaded folder and read up one some customizations from Woothemes.

2. We need to upload our files to our hosting server so that iWeb can find the files from the HTML snippet. If you downloaded the package above from me, everything is already done for you. You simply would need to add your slide images and change the URL’s for the HTML snippet. If you are downloading from WooThemes continue with step #3. If you downloaded from the link above, jump to step 8.

3.For our purpose, we will create a new folder called “flex” and add 3 additional folders called, “css”, “js”, and “images”. This is mainly optional or you can upload the entire folder you downloaded to your server. However, by going this route, we will remove a lot of the unnecessary files and code for this tutorial.

4. Find “flexslider.css” and copy that file into your new css folder created in step 3.

5. Find “jquery.flexslider.js” and copy that file into your new js folder created in step 3.

6. Finally, add your images you wish displayed in the slider to the image folder created in step 2 along with the navigation arrows, “bg_direction_nav.png”.

So at this moment, you should have something that looks like the following folder structure. Of course you can name your images anything you want, but lets keep it easy and only name them slide1, slide2, etc.

Flex (main folder for flexslider)
- css (folder)
- - flexslider.css
- images (folder)
- - bg_direction_nav.png
- - slide1.png
- - slide2.png
- - slide3.png
- - slide4.png
- js (folder)
- - jQuery.flexslider.js
7. When you have it ready, go ahead and upload the folder to your hosting server, usually the root (public_html or www, etc).

8. Now lets build our HTML snippet. Go ahead and copy and paste the following code and add it to your HTML snippet. You will need to replace www.your_domain.com with your own domain. Each link to  any css, js, or image files must be the absolute full URL path. Notice the /flex/ is the name of the folder that we created in step 3.

<!-- Flexslider CSS and JS -->
<link rel="stylesheet" href="http://www.your_domain.com/flex/css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.your_domain.com/flex/js/jquery.flexslider.js"></script>

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",  // slide or fade
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

<!-- Slider Container and Images -->
<div style="padding:5px;">
	<div class="flexslider">
 		<ul class="slides">
	 		<li><img src="http://www.your_domain.com/flex/images/slide1.jpg" /></li>
	 		<li><img src="http://www.your_domain.com/flex/images/slide2.jpg" /></li>
	 		<li><img src="http://www.your_domain.com/flex/images/slide3.jpg" /></li>
	 	</ul>
	 </div>
</div>

Lets go over each part of the snippet.

This first part calls the flexslider.css, jquery.min.js that is hosted on google, and the jquery.flexslider.js which runs the slider script.

<!-- Flexslider CSS and JS -->

<link rel="stylesheet" href="http://www.your_domain.com/flex/css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.your_domain.com/flex/js/jquery.flexslider.js"></script>

Next we have the script that activates the slider on our page or within our HTML Snippet.

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",  // slide or fade
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

And finally, the html for the slider contents, in our case the images. Just a minor note, I added a div with a padding of 5px around the flexslider so that the edges would not get cut off from the HTML snippet.

<!-- Slider Container and Images -->
<div style="padding:5px;">
	<div class="flexslider">
 		<ul class="slides">
	 		<li><img src="http://www.your_domain.com/flex/images/slide1.jpg" /></li>
	 		<li><img src="http://www.your_domain.com/flex/images/slide2.jpg" /></li>
	 		<li><img src="http://www.your_domain.com/flex/images/slide3.jpg" /></li>
	 	</ul>
	 </div>
</div>

 

A Few Notes & Extras:

Nav arrows not showing: If your nav arrows do not show, you will find the problem within the flexslider.css file. The css background for these areas are controlled around line 52. Look for .flex-direction-nav a and adjust the  relative URL of the bg_direction_nav.png file. You can also use an absolute URL here to be safe, for example, http://www.your_domain.com/flex/images/bg_direction_nav.png

.flex-direction-nav a {

	background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;

}

 

Slide Captions: If you’re wanting to add captions to your slides, you can do this by adjusting your HTML markup.

<li><img src="image.jpg" /><p class="flex-caption">Captions and brownies. A winning combination.</p></li>

By default, there is no CSS styles for the captions, so the caption will be placed below the image using the paragraph “p” tag. Here is a quick CSS to style the flexslider over the image, with a dark opacity background. Try it for yourself and adjust if wanted.

.flex-caption {
   width: 96%;
   padding: 2%;
   position: absolute;
   left: 0;
   bottom: 0;
   background: rgba(0,0,0,0.6);
   color: #fff;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   font-size: 14px;
   line-height: 18px;
   margin:0;
}

The demo has a caption on the 2nd slide using the above styles.

 

Additional Settings: There are many features which you can override or add to the functionality of flexslider by hooking into their API settings such as pausing on mouse hover, randomizing the slides, smooth height adjustments, and more. You can view these options on the Flexslider website under the “Advanced” tab. The API’s goes into your HTML markup within the JS script that activates the slider. Below is an example of changing the speed of the slider by adding slideshowSpeed. Keep in mind that if you add or adjust these that each one must end with a comma EXCEPT for the last one.

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "slide",  // slide or fade
          slideshowSpeed: 1000, // Time in milliseconds before the the next slide starts
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>
UPDATE (Sept 3, 2013): Since the writing of this post, flexslider has been updated to version 2.2 and includes a number of enhancements and bugs. At the moment, I still recommend using version 2.1 as it just works!

Now if you have added all of the above to your HTML snippet and you have verified that the links to the JS, CSS, and image files are correct, hit apply and you’ll see your flexslider load right in iWeb. When you’re done with the page, you can publish it and view it from your web browser.

Have a question, feel free to ask below.

  1. I was able to make it work, but for some reason, the navigation arrows when I hover the mouse to the side are not shown, although it shows the hand icon as if there where something active, and when I clicked it changes the slide. How can I make the arrows to show up?

    • Hi Mauricio,

      Check your flexslider.css file around line 52 and look for ” .flex-directional-nav a ” You may need to adjust the relative url of the background css which will show your nav arrows. I believe by default this would be:

      background: url(images/bg_direction_nav.png) no-repeat 0 0;

      If you added the directional_nav to the image folder like in the tutorial, then the css would need to be changed to:

      background: url(../images/bg_direction_nav.png) no-repeat 0 0;

      You can also use an absolute URL here to be safe:

      background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;
  2. Thanks for the tutorial. It is very helpful, and everything worked, because there are always some newbies out there, but I have one question to ask. How can all those features be enabled, (as shown in the official flexslider page), plus to make every slide a link.

    Thank you in advance, and even a partially answer would be great. Or a no answer, would be fine to cause you helped a lot already.

    I’m asking for help cause every change I make it doesn’t work, even if I follow the given instructions.

    Thanks again.

    • Hi Nik,

      To add all the other available features, you would simply add them to the function script that loads the slider….

      <script type="text/javascript" charset="utf-8">
        $(window).load(function() {
          $('.flexslider').flexslider({
                animation: "fade",  // slide or fade
                controlsContainer: ".flex-container" // the container that holds the flexslider
                
                //THIS IS WHERE YOU ADD THE EXTRA STUFF! Remember, Each of these must have a comma
                //at the end EX) animation: "fade", ... EXCEPT the last one as shown above. 
      
          });
        });
      </script>
      

      To make a slide a link, simply wrap the image with the <a href=”…”></a> tags

      <li><a href="link_to_page"><img src="URL_to_image"/></a></li>
  3. Hey Bluenotes,

    Great walkthrough, very easy to follow! I’m super new to this and I was able to replicate it, so thanks.

    I know this is just for the Basic Slider, but I’m stuck trying to get the Slide w/Thumbnail Slider to work. I copied their HTML formatting for it but I just ended up with a two identical Basic Sliders.

    I also don’t know where to place the changes to the JavaScript for that slider, if that makes sense.

    Any tips would be great.

    Thanks!

    • Hi Craig,

      The different javascript for the Carousel (thumbnails) would replace the javascript that you add to the HTML snippet in iWeb. So instead of…

      <script type="text/javascript" charset="utf-8">
        $(window).load(function() {
          $('.flexslider').flexslider({
                animation: "fade",  // slide or fade
                controlsContainer: ".flex-container" // the container that holds the flexslider
          });
        });
      </script>
      

      as shown in my demo. You would use….

      <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        // The slider being synced must be initialized first
        $('#carousel').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          itemWidth: 210,
          itemMargin: 5,
          asNavFor: '#slider'
        });
         
        $('#slider').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          sync: "#carousel"
        });
      });
      </script>
      

      Having the correct javascript loaded in the HTML snippet should remove that identical basic slider and transform it into the thumbs.

      I also made a demo of this and you can view it here. Feel free to view the page source to help you.

  4. Thanks so much for this tutorial!
    I followed the tutorial and as of right now, my images are showing up and sliding but there s a list of numbers below and the arrows and container for the images are not showing up.

    Any idea what I did wrong and how to fix it?
    Thanks,

    Shannon

    • Hi Shannon, sounds like you may be missing the CSS file in the HTML markup or an incorrect URL pointing to that CSS file. Double check and make sure that the flexslider.css file is correct. If you have a live page with that slider online, to where I could view the source, then I would also be check for you if you can’t get it working.

      Kerry

      • Hi Bluenotes,

        Thank you so much for posting this tutorial. It was so easy to follow and everything works perfectly except the arrow images. I did everything you taught Mauricio and it still doesn’t appear.

        Is it the flexslider’s fault?

        • Hi Riyaah,

          The arrows are controlled and displayed from the CSS file, flexslider.css. Make sure the path for the bg_direction_nav.png image file is correct in that css file. I wrote about this towards the end of the tutorial, in the section called: “A Few Notes.”

          If you still can’t get them to show, send me the URL of your live page with your slider on it so that I can take a look at it.

        • Hi there,

          Ah I see. I found out where I went wrong. directionNav: false, it was under false. I changed it to directionNav: true, and it worked!! Thank you for taking your time to reply.

  5. Hey thanks for the great tutorial. The only thing I’m having trouble with is the images/slider takes up the entire width and height of my body. How be able to set the size of the slider to the size of my images?

    • Flexslider is a responsive slider therefore, it is based on the size of the parent div it is in. With iWeb, this will be based on the size of the HTML Snippet.

      • Please give some suggestion, the slider is taking a lot of size on page how to reduce it.

        • Hi Rakesh,

          This slider is “responsive” therefore the size of the slider will fill the entire container it is inside of. You have two options. Change the size of the parent div container to a specific width OR add a specific width value to the [code_block].flexslider[/code_block] css.

          Example:

          .flexslider { width: 300px; }
          
  6. Hello. I’m looking to switch our current flash driven image rotation to flexslider. Do you know if it is possible to have a list of text from database, such as a schedule, feed in to the captions. I will have many schedules to go with just a few photos. I possibly may want to have a few slides/images to be custom captions that go with the pics. Is any of this possible?

    We would be working with mySQL and Apache.

    Thanks!

    Kerrie Parker

    • Hi Kerrie,

      I don’t know if this slider can pull from a feed. You’ll need to post that question in the flexslider forum on the WooThemes website.

      Regarding captions, you can add text captions to any image by including the paragraph tag with class “flex-caption” within the image

      <p class="flex-caption">Captions text shows a description of the image.... </p>

      Example:

      <li><img src="slide1.jpg" /><p class="flex-caption">Captions text shows a description of the image.... </p></li>
  7. Hello. I just posted a question to the forum. I forgot to mention I will be linking it also with Coldfusion.

    Thanks!

    Kerrie Parker

    • Sorry I do not know this either. Check with the Woothemes website for your answers in linking with Coldfusion.

      • Kerrie Parker says:

        I appreciate your feedback on my questions. I’ve looked all week for answers on this and I’m not sure if it is possible at this point, on the flexslider or any other. Flash has capabilities to do it but I’m hoping to move away from flash.

        Thanks!
        Kerrie P.

  8. Hi Bluenotes,
    Thank you for posting this very user friendly tutorial. It has been the easiest method followed by now, since I have tried a couple more tutorials for image slider HTML snippets. Everything goes well though except for the arrow images and the dots below the slides. I have followed your notes (“a few notes”) regarding the issue with the arrows but they still don’t appear. (Does it have to do with the number of images enclosed?- I have 20))
    I am sending you the URL of my page, if you can have a look at it please.
    http://www.sodarchitects.com/RENE/projects_index.html

    Thank you in advance
    Kind Regards

    • Hi Rene,

      In your CSS, the URL you added for the direction arrows image is incorrect. You have it as: “images/www.sodarchitects.com/flex/images/bg_direction_nav.png” and should be: “http://www.sodarchitects.com/flex/images/bg_direction_nav.png”

      Correct Code:

      .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(http://www.sodarchitects.com/flex/images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
  9. I love this slider. I’ve been trying to add some css3 animated captions with it but I’m a nob at javascript. It works but just for the first slide because I need a script to trigger the active li item or something (guessing). Has anyone tried this yet? It looks really good.

  10. Hi,

    I ‘m probably the least experienced one here and this is probably the most basic question: how do I tell the html the exact position in my page (created in iWeb) where I want the slider to be displayed and its size? I’ve followed the instructions but they omit (probably because I should know how to do that…?) that part and focuses on the script.

    On the other hand, I’m trying to do these tests on my desktop, before uploading anything to the server and while I make sure I know how to deal with this. Where it said “www.your_domain.com” I put the URL of my folders for tests (file:///Users/Miguel/Desktop/…). I’m afraid I’m doing something very wrong, since all I get is a huge white square on top of my page, above my contents, with the “previous” and “next” arrows, but no pics displayed… 🙁

    • I ‘m probably the least experienced one here and this is probably the most basic question: how do I tell the html the exact position in my page (created in iWeb) where I want the slider to be displayed and its size? I’ve followed the instructions but they omit (probably because I should know how to do that…?) that part and focuses on the script.

      To change the size of the slider in iWeb, you simply need to expand the HTML snippet box larger/smaller. The slider is responsive so it will automatically adjust to the parent container (in this case, the HTML snippet).

      On the other hand, I’m trying to do these tests on my desktop, before uploading anything to the server and while I make sure I know how to deal with this. Where it said “www.your_domain.com” I put the URL of my folders for tests (file:///Users/Miguel/Desktop/…). I’m afraid I’m doing something very wrong, since all I get is a huge white square on top of my page, above my contents, with the “previous” and “next” arrows, but no pics displayed…

      I’m not too positive if it will work by pulling the files from your computer verses an online server. However, make sure all of the files would be using file:///Users/Miguel/Desktop/… including the css, js and image files.

      Your other option which is the final option you have to do anyway is to simply place the slider folder, Js files, CSS files, and images on your server and make sure you’re links are correct in the HTML snippet to point to the server and not your computer or a relative location. iWeb will then display the slider fine on your computer even if the page is not published yet.

  11. Hi Bluenotes,

    very good tutorial. However, I’m trying to find a way to combine two flexsliders with only one navigation (one flexslider for showing pictures, the other one for showing text). However, I can’t find how to implement it correctly… Do you know how to do this (with a small example in HTML + CSS + JS)? Would be so great… thx in advance! I know there is a ‘sync’ option, but still, I’m unable to do so…

    Tobias

    • Hi Tobias

      Did some experimenting and found the following. Keep in mind, if you’re going to add this to an HTML snippet, you will need to put all of it into the same snippet. You can’t have one individual HTML snippet control another individual HTML Snippet as HTML snippets are loaded in their one HTML pages outside the iweb page (A workaround would be to do an after publish edit and insert the code manually). So you may have to work in some custom CSS styles to arrange the sliders around each other. You can view the example I made here

      This would be your script. Note that I placed the “child slider” first followed by the “parent”. The parent is the controlling slider is syncing the child slider.

      
      

      Example Slider Markup. Notice the included ID for the parent and child. Make sure these match your script above. I used id=”flexslider-parent” for the parent and id=”flexslider-child” for the child.

      
      

      This is the Parent

      The parent slider has the slider controls.

      This is the Child

      • Hi there (slide 1)

      • Hi there Again (slide 2)

      • Hi there Again and final! (slide 3)

      The nav arrows and control buttons are removed so that users only interact with the parent.

      Again, I have a working example here. View the source to see the HTML. If you copy and paste it entirely into an HTML snippet, you’ll see it work with the parent on the left and the child on the right. You may have to experiment further and mess with the inline CSS for the containing divs for each slider to get it how you like.

      • Hey, Great example.

        Was wondering if it would be possible to snyc more than one child to just one parent.
        Like having two sliders and one carousel which work in snyc with each other??

        Kind Regards
        .Q

        • Interesting idea! Out of the box, flexslider doesn’t do this, or there’s no documentation on it form WooThemes. So I did a quick search and landed at the following post on stackoverflow: http://stackoverflow.com/a/12045267.

          This person was able to get it working with a modified js call and html markup. I went ahead and tried his solution and it worked for me. You can see my version of it here. Perhaps you can adjust this solution to your needs.

        • Hi Kerry,

          Thank you, and for the amazing work and the user friendly tutorial 🙂
          I’ve managed to implement it and it work like a charm.
          Just had a snag on the styling but that right there is my baby.

          Really appreciate your QUICK response.
          Again thank you!

          Over the Moon
          .Q

  12. Hi Bluenotes,

    thank you for the wonderful explanation! It makes more sens to me now 🙂

    thx!

  13. Hi Bluenotes,

    Sorry for the spam… 🙂 But if you want to implement two different flexsliders, how can you link different css files to the different flexsliders? For instance, I want flexslider A to link to css A and flexslider B to css B (because I want to alter all the different navigations, height, …).
    Is it possible to do this?

    kind regards,

    Tobias

    • Sure you can do this. Going with the example I laid out above, you can target either slider with the new ID given to them by adding the new CSS on the bottom of the flexslider.css file. Or you can create a second css file and simply link to it just like the main flexslider.css in the top of the HTML markup. Just make sure it’s listed after the primary flexslider.css file if you do it this way.

      In either case, you can start your new CSS like this:

      #flexslider-child.flexslider { ... }
      

      Note that there isn’t a space between the ID (#flexslider-child) and the class (.flexslider) as both of those are part of the same div in my example. Going further, if you wanted to target the nav arrows on the child with a different image sprite, it would look something like this:

      #flexslider-child.flexslider .flex-direction-nav a { background: url(../images/new_nav_image.png)  }
      

      Again, you have the #flexslider-child.flexslider followed by the selector (.flex-direction-nav a) that you’re targeting for the nav arrows. If using a different image size, you’ll need to adjust the other CSS properties as well.

  14. Hi Bluenotes,

    I tried it that way but I didn’t put a space between the name of the div and the selector… sometimes it’s just something so small…

    thx for the great advice!

  15. Hi Bluenotes,

    First off thanks for a really helpful tutorial, I was having such a hard time setting up flexslider. I happen to have a question pertaining to the arrows though. I don’t have them showing up on my site even though I know my linking to the arrows are correct.

    • Hi Joseph, send me the url to the published slider and I’ll see what I can help with.

      • dapperjoe.com/privates
        I have it currently working on that page. Thanks Bluenotes for your help.

        • Ok, in your flexslider.css you’re calling the bg_direction_nav2.png file where it does not exists.

          You have within the .flex-direction-nav a selector:

          .flex-direction-nav a {background: url("images/bg_direction_nav2.png") no-repeat 0 0;}
          

          As it is now, you’re telling the system to find that file, bg_direction_nav2.png, by looking in the “images” folder that is also inside the “css” folder. The problem is that the images folder is not located there but rather 1 level up. So if you prepend ../ to images it will tell the system to look at the parent folder.

          .flex-direction-nav a {background: url("../images/bg_direction_nav2.png") no-repeat 0 0;}
          

          Now your second problem I noticed is that there isn’t a file called bg_direction_nav2.png inside that folder “http://dapperjoe.com/flex/images/” However there is a file called “bg_direction_nav.png” (notice the missing “2” in the file name).

          .flex-direction-nav a {background: url("../images/bg_direction_nav.png") no-repeat 0 0;}
          

          Keep in mind the code above, I omitted out the other css styles for .flex-direction-nav a to keep it simple and easy to read. I added the ../ and removed the 2 reference from the file name. This will show your direction navs which you have altered with a new design I noticed :).

  16. YES! Thank you so much. Now I just have to figure out how not to see both arrows on one side at the same time and I’ll be done with my site. Again thank you very much for all the help.

  17. Bluenotes, sorry to bother you again, but something very odd popped up on me after I got my site up and running. When I view it on the ipad (it looks fine on a computer), the slide viewer sets to the biggest image and stays that way. It seems to be on both ipad and ipod touches. Do you know if there is a common fix for this? I’ve spent the better part of a day trying to fix this.

    http://dapperjoe.com/love.html
    is a page where it is the most apparent.

    Either way, I hope you have a happy New Year.

    • Ok, so to correctly use videos in the slider and have it adjust the height, you need to add the extra js. See the Video example on the flexslider website. You need to include the froogaloop.js and jquery.fitvid.js files in your markup. Both of the these files should be included in the flexslider download. In addition, you need to include the video API into the manual script in your head section.

      This is found on the Flexslider video demo page under the JS tab.

      
      
      

      Finally, one last step. Notice the
      var player = document.getElementById('player_1');
      line in the above script. That is referencing the ID, player_1, of your video iframe. Therefore, you need to include that same ID in your iframe markup. Of course, name it anything you want just make sure they’re the same in both locations.

    • I made a stripped down version of your love.html page here. Test it on your ipad/ipod touch. It works on my end with my iphone.

      • Kerry,

        Thank you so much. I don’t know much about javascript and this has been incredibly helpful in my understanding as well as helping me get my site up. I was thinking that I would have to redo all my images to a uniformed height as well as width.

        I found out what I’ve been having a problem with on my end for usability. It seems that when I tried to link to the js on my site there were issues but when I take your lead and link it via wootheme’s website it works fine. I think I was running my links wrong and I need to fix that if that’s the case. But that being said you have been a tremendous help and I understand js a bit more, albeit only a little bit.

        I wish I could help you with something lol. If you do, and I can, I would be happy to help. I hope you and yours have a happy and safe New Years.

        ~Joseph

  18. Hi BlueNotes,
    super thanks for the awesome tutorial, I’m setting the slider up
    and I’d like to know if it is possible to make the slider choose randomly
    the order of the pictures so that everytime the page is loaded a different image
    shows up.
    Mega thanks for your time!

    • Hi Frankie,

      Sure this is possible, simply add the randomize: true property to your script. True turns it on and False will be the default settings. You can view the rest of the available properties on the Flexslider website.

      
      
      
  19. Hi, sorry but, I’ve been two days allready and i’vent found how to fix the problem.

    My slider works fine, buttons work fine, but, I do have a margin, a border taller than the pic, no matter which ones I put in. And I hate it ! 🙂 i really love the simple white 4px border. (but i want it for all my borders) how can i fix it? I l’ve check all the .css and haven’t found the clue.

    thanks a lot for advanced, it will make my site just work ! 🙂

    • Hi Adria,

      Can you confirm to me what is in your HTML snippet? From looking at the source code on your page, I’m seeing alot of &nbsp ; &nbsp ; &nbsp ; &nbsp ; or empty spaces between each line. You can see this if your right click around the slider and select “Inspect Element” with either Safari or Google Chrome.

      Screenshot of what I’m seeing
      Adria Screenshot
      http://i47.tinypic.com/eepev.jpg

  20. Hi Kerry:

    At last ! And, Maybe I should had done before, or … don’t know the reason, I’ve just started over, copying the code from your page and past to my html snipped again and, it worked!!

    the only thing I can guess is, (thinking about the spaces the code has) I had used the textedit in my mac, and maybe thats not a real good option to work with code. dont really know which easy soft I could use for editing code.

    Really, thanks, , I’ve search a lot to make this true! (and spending many many hours in front of my computer learning how all this works, so my job is not code writer! 🙂 just photography! 🙂

    Thanks a lot, now, next step, make the video stop when turned to next pic ! 🙂 Hope it will be “easer”

    Adria

  21. thanks for this awesome tutorial. my problem would be to create a dynamic image set. i found this plugin that creates a tab in the admin panel in wordpress but i don’t know how to integrate it in my theme. if you have time can you help me on this.
    thanks! here is the plugin : http://wordpress.org/extend/plugins/flexslider-hg/

    thanks!

    • Hi Johnny, no sorry I’m not sure with that one. I couldn’t get it working correctly in a demo theme I have. One option to use flexslider with WordPress, is WooThemesThey’re the same developer as the one in this tutorial. However, the wordpress version is around $30.

      Another option is from WP Tuts+. Haven’t tried it yet though.

      • hi, thanks for the reply. i tried the wp tuts+ link you gave me and it worked..thanks, but now my only problem would be the slides won’t play or move after i clicked next or previous..

        • Do you mean it wont play automatically after you use the arrow/pagination buttons and then wait or that clicking the buttons have no effect with changing the slide?

          If the slideshow does not continue on after you have interacted with it (and waited) then you could try changing the pauseOnAction:true setting towards the bottom of the jquery.flexslider-min.js file. By default it’s set to true, changing it to false will reset and force the slider to continue on after an X number of seconds from non user activity.

  22. Thanks for the amazing work and the user friendly tutorial 🙂
    It works fine! I have the same “arrow” problem (like Mauricio, in the first comment) but I’ll try to follow your instructions and hopefully find a solution.
    I would like to know if it is possible to get rid of the white borders and the shadow (…I have in mind something minimalistic).
    thanks!

    • Hi Chris,
      To remove the border and box-shadow, you will need to adjust the flexslider.css file. Find, .flexslider under the “FlexSlider Default Theme” section. It will be around line 42. To remove the border and box-shadow styles, set them to “none”.

      .flexslider {
           border: none;
           box-shadow: none;
           -webkit-box-shadow: none;
           -moz-box-shadow: none;
           -o-box-shadow: none;
      }
      
      • Hey bluenotes! A late answer, but I just did what you told me to and it works! It looks fine in the iPad too! The only problem in the iPad version is that when you touch or pinch (zoom) the slideshow it stops and it doesn’t restart.
        I tried to add the “pauseOnHover: false” text in the widget text-box of the iWeb but it won’t work either. Do you have an idea? In addition do you know if I can move (or remove completely) the grey-dots? Thanks once again for your help and time!

        • Hi Chris. That’s because the area you’re “touching” might be considered “interacting” with it, in which case it will stop animating. You can try adding touch:false to the JS options.

          The grey dots can be removed by adding controlNav: false to the JS options, This will deactivate the pagination dots from displaying.

        • Kerry,
          It works. Thank you so much for all your help.
          Best,
          Chris

  23. Hi –

    I know this sounds really dumb…how do you create a snippet and where does it go after you’ve created it?

    • From the iWeb menu (top of screen) click on Insert > Widget > HTML Snippet. A new widget will appear on your iweb page. Then you can drag the new widget anywhere on your page. The black textbox that appears below the HTML widget is where you would add your HTML code.

  24. hi
    how di i get rid of a blank after the last photo in the carousel version. i tried adding more photos but does not help. help!!
    thanks!

  25. I’ve done everything and it all works correctly, but I have a large white box above my photos with a blue square with a question mark in it. Any ideas? Thanks!

    • Hi Megan, the blue box with a question mark usually refers to an image that cannot be found. Web browsers will display this when it’s having trouble locating the image from the the server. Double check and make sure that the URL for that image is correct in your HTML markup. Let me know if you still have trouble with it.

  26. Hi-

    I am trying to add the flexslider to my site. I am more or less java/css illiterate. I would like to add captions (like the examples on the flexslider site) that show directly over the image. When I add them, they appear below. Also, the three dots for navigation are appearing way below and to the right of the I have the slider contained within.

    • Hi Evan, can you share a live link to your flexslider so I can see what you’re doing. Regarding captions, you may need to include additional CSS to display it like they have it on the WooThemes demo. Try adding the CSS below. I added a caption on the second slide in my demo with the css below to give you an idea.

      .flex-caption {
         width: 96%;
         padding: 2%;
         position: absolute;
         left: 0;
         bottom: 0;
         background: rgba(0,0,0,0.6);
         color: #fff;
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
         font-size: 14px;
         line-height: 18px;
         margin:0;
      }
      

      And the HTML:

    • Captions and brownies. A winning combination.

  27. Bluenotes, thank you for a great tutorial that even this novice can follow. On http://www.lawsart.com I’m using easySlider 1.7. With it, all the images had to be resized. There were some that couldn’t be used because resizing distorted them. I want to use flexsllider on this site and another one I’m working on. To do a quick test, I added the WooThemes logo.png to the downloaded demo. It’s there, but very, very grainy. Is there a way to use different size images without having to resize them?

    • Flexslider is a responsive slider. It will expand as a whole based on the size of its parent div container’s width or the width of the HTML snippet if used in iWeb. The images within it will also expand to meet the width of the slider. If need to force the slider smaller, you will need to place the slider in a smaller parent div. You can easily do this by wrapping the entire slider with an inline css styled div like the following.

      .....

      The above will max the parent div to a width of 400px. The inside images would also max to this width minus any slider border/padding that is also applied.

      • Thanks for your help. I’m almost there, but not quite. I have five problems and one new question.

        1. I made the snippet 550px high and 800px wide. The width is fine. But, even after cropping the slides, 2,3,5 and 7 to less than 540px, the slider is getting chopped off and/or white space is showing up where nav. buttons are. On slide 6 there is a second and third white space in the bottom of the snippet. Not sure that’s very descriptive, but you’ll see what I mean when you go to the test page.

        2. If you click on a navigation button, the show stalls at that slide. Clicking on another nav. button just stalls it at the newly selected slide.

        3. After putting the slideshow on the page, the menu that’s supposed to be across the top directly below the header is just a list.

        4. How do I get the time between slides shorter?

        5. I followed your instructions to Mauricio and in your note, but still no arrows. I do however get the hand icon when hovering where the bg_direction_nav.png should be.

        The plan is to add a caption on each slide. After the above mentioned problems are resolved, do I need to make the snippet higher for the caption?

        You can view what I’ve got up at http://test.garlandcountydemocrats.org/flex.html

        Thanks your a great tutorial and your help,
        Hozey

        • Hi Hozey,

          1. HTML Snippets placed in iWeb are absolute positions and will not “dynamically” change their height/width after being published. This is a limitation of iWeb and not flexslider. Therefore, you need to compensate by allowing more height on the snippet. Your width is fine, just drag the bottom of the snippet alot further to what your tallest image would be. You should be able to see this from within iWeb. Then hit apply. Another way to go about this is to have every slide the exact same size that way the height wouldn’t need to change.

          2. Correcting #1 and #5 will fix this. When the mouse hovers over the slider by default it will pause the slideshow. The pagination is missing on these slides because the height is greater than the HTML snippet, thus they are falling below the viewable area.

          3. The css file URL you’re using for the menu is “../Dropline_files/dropline.css” and it cannot be found from your test subdomain within that HTML snippet. That is why it is not displaying correctly. You must use an absolute and correct URL’s in your HTML snippets. Changing this to: http://www.garlandcountydemocrats.org/Dropline_files/dropline.css will correct it. You can test this by pasting that url into your web browser. The browser will display it as text.

          4. To adjust how the slider functions, you will need to add to the JS script API that’s in your HTML snippet. You can include the slideshowSpeed API. The number attached with it is represented in milliseconds.

          
          
          

          Other API’s that can be added are on the WooThemes website under the advanced tab.

          5. Your URL is incorrect for the direction icons. You have:

          http://test.garlandcountydemocrats.org/flexslider/flexslider/images/bg_direction_nav.png

          when it should actually be:

          http://test.garlandcountydemocrats.org/flexslider/images/bg_direction_nav.png

          6. With captions, by default they are added to the bottom of the slide image. So yes, in that case you would need to accommodate for the extra possible space. You can see Evan’s comment above to assist you here.

        • Thank you. I follow you except on your response to 1 and 2. The snippet height is 550px and the highest slide is 504px. So, I don’t understand why 3,5,and 7 are not within the slideshow border. Slide 2 does need the height changed, which I did, but no change in the browser. I corrected the issues in items 3 and 5 satisfactorily.

          Thanks again for your help. We’re almost there.

          Hozey

        • I sent you an email to continue this conversation. Let me know if you still have questions.

  28. Kerry,

    Thanks again for all your help. Everything is working as it should except when you interact with the slideshow either by using the nav arrows or clicking on a nav button, the show stops. I did what you suggested in #1 and #5, but it still won’t progress after being interacted with. Any suggestions?

    Hozey

    • You can add the pauseOnHover API to the JS. Setting this to true forces the slideshow to pause when the mouse hovers over it and forces it to resume playing when the mouse leaves it.

      
      
  29. Thank you so much for the tutorial. I have used this successfully on one site and now am having a particular problem on another site using the same stuff. Different images but otherwise the same html, etc. with changes for the new locations of the files.

    On the new site, the slider grows out of control, but only on iPhone and iPads. My other use of this works fine.

    I went into the css and changed the width from 100% to the actual width in pixels =
    .flexslider .slides img {width: 976px; display: block;}

    Now the image slider doesn’t grow taller as you view it, but it does keep getting wider… The arrow on the right disappears and the little dots on the bottom wander off the screen to the right. Again, only on i-devices.

    Any ideas? The url is
    http://twolions.ca/twolions/Home.html

    Thanks

    • Hi Rob,

      I do see that issue from my iPad viewing your site. The pagination buttons are frantically moving to the right. I copied over that HTML snippet to a test page on my server and can’t reproduce it on my end. You can try it on your iphone/ipad here.

      Regarding the css change you made. You shouldn’t change the size of the .slides img class. You should instead adjust that on the parent container, in this case the flexlider div.

      .flexslider {width: 976px; }
      

      Beyond that, I really don’t know since I can’t reproduce it. There is a JS warning coming from your other HTML widget in the in.js file. Try deleting that widget, republish that page, clear the browser cache and see if it’s still happening. You could also try placing the slider snippet on it’s own blank page (no other graphics, snippets, or added code, just a blank white canvas) to further test if something is conflicting with it.

      • Thanks for the quick response Kerry.

        I replaced the CSS file with the original code, except for the changed URL.
        Deleted all other HTML widgets, like LinkedIn badges and a Wufoo form. From the whole site.
        Made a new blank page with just the slider. http://twolions.ca/twolions/Blank.html

        Still expanding out of control on my iPad though! So something is conflicting with it, but I really don’t know enough about this to even have an idea.

        I can’t test it right now, but yesterday some of the text on other pages of the site, without sliders, was going haywire on a PC and expanding as well. Never did this on any of my Apple devices, but I got sent screenshots from my business partner and her PC had serious trouble with the text. Possibly connected?

        Thanks again for the help.

        • Hmm that seems really odd. If it’s happening on other pages where the slider isn’t even present then that would rule that out completely and point to something else happening. It might be a good idea to have your hosting provider check your server directory for any malicious activities, links and hacked files just to be on the safe side.

        • I will do that, thanks Kerry.

  30. Hi,

    its me again, this time concerning the slider.

    Firstly, I have changed the css file as you mentioned in your section “A few notes & extras” .

    Secondly, once I put the html snippet it does not appears an slider nor the arrows. It just appears 3 images from top to bottom.

    How can I fix that?

    Thanks,
    Octavio.

    • Hi,

      I found the mistake and now the slider do the sliding, but the arrows are not appearing and also there some text appearing next to the images that does not supposed to be there.

      • The URL to your CSS file looks to be incorrect. It’s giving me a 404. This would also explain why the nav arrows are not showing since they are called from the css file.

        • Dear Kerry,

          I think I already fix it, but still the same problem. how can I fix this?

          The code of the html snippet is as below:

          $(window).load(function() {
          $(‘.flexslider’).flexslider({
          animation: “fade”, // slide or fade
          controlsContainer: “.flex-container” // the container that holds the flexslider
          });
          });

        • Hi Octavio,

          Again, it’s the same issue, the URL that you are using for the flexslider.css file is returning a 404 error. Meaning it cannot be found on your server. You need to double check that URL and make sure the file is there. The URL you are using in your HTML snippet is below:

          http://www.centroculturalasiamexico.org.mx/flex-slider/slider-css/flexslider.css

          That’s what you need to verify and fix. Check where the file is, is it typed as “flexslider.css” and not mispelled. Check the parent folder names are typed correctly as well.

        • man,

          i do not get it. I checked it lots of times. Maybe due I opened the ccs and put the url for the images as you mentioned? i opened the file with the text editor and then save it with the text editor as well.

          would that be a problem?

          apart of that, I checked it several times and I cannot find a mistype on the url address in the html snippet.

          it slides well, its just the slide pointers that are not in place and the arrows that does not appear.

          chers,
          OCtavio.

        • Even if you deleted all of the stuff inside the flexslider.css file, you would still have the same problem as it not being found on the server and giving a 404. If you inspect your page using firbug or the inspector in safari, it’ll show you the error message.

          For example, Use the CSS file from my demo in place of yours and see if it works for you (it does on my side with the code from your HTML snippet).

          The location of yours is somewhere else or not there at all on your server. Are you sure it’s located in a folder called “slider-css” and are you sure that folder is under the folder “flex-slider” ?

        • Dear Kerry,

          very weird, but now it seems the points and the arrows works perfectly.

          I just copy-paste you demo, and then i changed your url for mine and it was exactly as the same url as i had it before, as I matched it. Anyways, it worked. Great! I am so happy man!

          Now , the next question is:

          the photos are all from different sizes, so when the slider works, then the size of the “box” changes. How can I make that despite the size of the images, all get displayed in a same “picture frame size” ?

          you are awesome!

          Thanks,
          Octavio.

        • Since this is a responsive slider, the images will fill the entire width to 100% of it’s parent container in this case the iWeb HTML Snippet. If your slider is 400px wide because the html snippet is 400px wide, then all images displayed will also be about 400px wide even if the image itself is only 200px wide originally. Since the slider is responsive, it will shrink all larger images and stretch all smaller images to fit it’s width size. By doing so, all images retain their proportional size. So the height is also automatically adjusted in relation to the changed width.

          Now let’s look at your first two slides. Let’s assume for this example that the width of the HTML snippet is 400px wide.
          slide 1 = Red Air Compressor
          slide 2 = Brick Machine

          – Slide 1 image is originally 535×523. The slider will shrink the width to 400px. The proportional height then would be 391px (400×391).
          – Slide 2 image is originally 973×664. The slider will shrink the width to 400px. The proportional height then would be 273px (400×273).

          See the difference heights above. The slider will then expand the height of the slider to accommodate the adjusted height of each image, which is what is happening now.

          The only way to resolve this and keep your slider from changing sizes is to have ALL of the images the same size to begin with. So if you want your slider to be 400px’s wide and 300px’s in height (as an example) make all of your images 400×300. If you look the demo slide images, they are all the same size.

  31. Hi,
    I tried to place Flexslider but the only thing I see on the site is a small white stripe. For me, everything is allright. I placed 26 pictures. Resolution is ok. Path ok. Container ok. placed the folder in the root. HTML snippet is ok. But: nothing works.
    Can you help please. Grtz. Raf

    • Hi Raf, I’m assuming you mean on your “Tafelen” page? Looks like the URL for the jquery.flexslider.js is incorrect as it’s going to a 404. Currently it’s set to: http://www.masomar.be/masomarslider/js/jquery.flexslider.js from your HTML snippet. Directly going to that via my browser shows a 404, not found.

      You need to make sure jquery.flexslider.js is located there or correct the URL to point where it actually is on your server.

  32. Dear Kerry,

    I changed the speed and it works fine 🙂

    However, I still do not know where is the mistake. Arrows are not showing and there is this text next to the slides. Also the “points” are not showing like in the original version, as in my website appears next to the slides. How can I fix this?

    Cheers,
    Octavio.

  33. Dear Kerry,

    I added different slides but such slides have a different size. Therefore, when it appears online they are shown as their actual size.

    My question is: how can I put all the slides in a same size inside the slider so they all can be shrink into a fixable size?

    Thanks,
    Octavio.

    • The overall size of the flexslider is based on the size of the HTML snippet AND the CSS used from flexslider.css. The reason your images aren’t “resizing” is because again, your flexslider.css file is missing and cannot be found on the server. You have to fix that first.

  34. Hi there,

    Is it possible to have a layer/DIV permenantly over the sliding images – such as a logo or a search bar?

    Thanks

    Stephen

    • Hi Stephen,
      Sure you could do this. Just add/style a parent div where you have flexslider in with a position of relative, then include your layer div, say a logo image, with a position of absolute and a z-index of say 999.

      CSS:

      	.flex-wrapper { position: relative;}
      	.flex-wrapper .logo {
      		width: 300px;
      		position: absolute;
      		top: 20px;
      		left: 20px;
      		z-index: 999;
      	}
      

      HTML:

      
      

      You can then further position the image, our logo example, using left, top, bottom, right properties. Here is a working example.

  35. Hello,
    This is a great work! What I need is to place Flexslider inside an infowindow on Google Maps. So I handle the onclick event of the marker and in the js file I created, I output the html code where Flexslider resides.
    Flexslider works on a static page. But I need to create dynamically and most probably more than once. But the sliding does not occur. What can I do?

  36. Amazing… Thanks Kerry I’ll see if I can get that working in my site…

    Thank you so much 🙂

    S

  37. Next question, or rather 2 questions.

    I’m not great with CSS as you may have noticed.

    1) How do I get the pagination to hover over the images rather than be below them?
    2) Is it possible to have a logo floating and also have a div floating with say a search bar in. So a logo floating to the left – I’ve got this working and a div containing a search bar or any other content to the right?

    Sorry to be a pain

    • For #2, you would do the same thing as the logo example I used but use Right instead of Left for the positioning and place it inside it’s own div.

      .flex-wrapper .search-box {
      	position: absolute;
      	top: 20px;
      	right: 20px;
      	z-index: 999;
      }
      
      ... etc...
  38. Actually forget question 1 – figured that one out :p

  39. Hi,

    Great post and comments !
    I have a flexslider with 3 pictures and when I try to add new ones, it breaks.
    What should I change in order to slide 6 pics ? In which files ?

    Thanks,

    • What do you mean it breaks? As long as you are doing the same thing as you did with the first three images, adding more shouldn’t be a problem. There is no limit. Just make sure each URL is correct for each image.

    • ...etc ....
  40. Hi there –

    I only want the slider to show up on my home page, not the other linked pages. Is there something I can add to the code to force this? I’ve only see .php in my searches, and I don’t have that option.

    thanks!

    • Sorry, I’m not sure I follow what you are saying. The Flexslider code is added only to the page you wish it to be on and not automatically applied to every page regardless of php or not.

  41. Followed through your awesome tutorial, everything works well just as your described.
    however, when I feel comfortable enough to start tweaking it by changing “fade” in the HTML Snippet to “slide”, on iphone and ipad platforms, the slides starts to grow all over the screen once page is loaded.

    Do I need to change “fade” to “slide” anywhere else say in the JS files as well or am I doing somethings wrong?

    • Hi Ran, You shouldn’t have to change it anywhere else, only in the API which is in the HTML snippet. Someone else experienced that same thing happening on their iweb site but I cold never reproduce it on my end. Make sure that the page is fully published and clear out the browser cache. If you made any alterations to the CSS file, double check it and make sure there are no user-made errors there.

      If you send me a link to the page you have it happening on, I could try and take a look at the code.

      • Hey Kerry, thanks for the promoted reply, that alone is better than my ISP’s tech support 😉

        As i was reading the post from the other guy having the same issue as mine and all other posts regard to this issue, it might be a thing with the iWeb 09, cause it happens exactly in iWeb after apply any changes inside HTML spinet, I had to first copy the changed code, then maunally delete the spinet then add a new one before resizing and past the changed code, and this happens every time when I try to make any changes to the code in HTML spinet after hitting apply button regardless the alteration of the actual content code.

        Is everyone else suffering this too or is it just me?

        it just led me to think it might be a iWeb issue?

        Hope this could be solved by someone soon. iWeb is such a good editor at least for a non professional design with a good taste ;-), thanks for the fast tech support!

  42. Hi Kerry,
    I have a working slider, but cannot figure out how to anchor the slider in the middle of the page (left to right). Right now the slider slides off center when the page is resized. Do you think you could help me?
    Thanks in advance

  43. Hi Kerry –
    I deleted this line in the flexslider.css:
    width:944px; /* delete this line if you want responsive slider */
    and it seems to have centered the first slide, but the second slide still travels to the right as you resize the page left to right….
    I would greatly appreciate any words of wisdom you could share with me!

    • Looks like you’re using an outdated version of flexslider, version 1.4. Try using the latest which is, I believe, 2.1. http://www.woothemes.com/flexslider/ See if that helps you. You may have to adjust your markup to use the new css/js. Also make sure everything inside it such as your form fields are percent based so that they become fluid with the size of the parent container.

  44. I also want to say: “Bluenotes, thank you for a great tutorial on using flexslider”.

  45. Hi! Thanks for your great tutorial!

    I’m wondering if the following is possible:

    Create a new inactive state (grayed out w/links disabled) for the arrows that appear on either side of the thumbnails. At the point there are no previous photos to view, the left arrow becomes inactive and at the point there are no “next” photos to view, the right arrow becomes inactive.

    Do you think you could help me?
    Thanks in advance!

    • I’m not sure on that one. Spent some time today looking at possibilities but couldn’t get any to work. You’ll have to use JS to trigger either a class or function to remove/hide the previous and next arrows if the first slide is active or the last slide is active, respectively.

  46. Hello. I had a few questions as I think your slider has great functionality. I’m trying to accomplish two things, because this slider will be on main part of website and also will be on a digital signage display at the library I work for.

    We’re needing the captions to feed in from a database, so I’m wondering if there is a way to add dynamic captions instead of static ones? We have a list of programs we want to display in the captions but the images don’t have to be dynamic (they can rotate through).

    Also, is it possible to embed or attach video, then set them to autoplay when the slides get to the video?

    We are using coldfusion to this (not sure if it matters).

    Thanks!

    Kerrie

    • Regarding the captions, I wouldn’t know. However, you could check with the folks at WooThemes who are actively developing the slider. I believe they have a community forum for your questions. Regarding videos, yes. You can use the steps here and the API’s and settings here to assist you in adding a video as a slide to flexslider.

  47. Thanks for a great tutorial. Very helpful for the non-techies around like me, building their own sites! I’ve got the flexslider installed on my page, and all is working apart from the captions, and a button for each image, and I’m flummoxed… Any ideas would be most welcome!

    Here’s the CSS:

    /* Slider Captions */
    .flex-caption{ position: absolute; left:0px; top:75px; width:920px; font-family: ‘Open Sans’, sans-serif; text-align:center; font-size:14px; color:lightslategray;}
    .flex-caption h2{ font-size:30px; color:#lightslategray;}
    .flex-caption p{ text-align:center; padding:0 200px;}
    a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:lightsteelblue; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}

    And HTML:


    Caption title
    Ut enim ad minima veniam, quis nostru nisi ut aliquid ex ea
    Pianists

    • Hi Liz, do you have this on a live page for me to look at? The code you added to your comment looks like it didn’t come all the way through. When adding code the comment form, wrap it in pre tags.

  48. Thanks Kerry. Greetings from Somerset. I have re-added the code correctly now, hopefully. I can’t give a live public link, but am happy to give you a private link – not sure how..?

    Looking at the live test page:
    In Chrome, the slider is sliding, cursors are working, without showing any captions or button.
    In IE10, the slider is static, stuck on the 3rd image, the cursors are not working, but the captions are visible.
    What joy:-{

     
    Caption title Ut enim ad minima veniam, Pianists
    Caption title Ut enim ad minima veniam, Pianists
    Caption title Ut enim ad minima veniam, Pianists
    

    Relevant CSS:

    /* Direction Nav */
    .flex-direction-nav {*height: 0;}
    .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%!important; z-index: 10; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); text-indent: -9999px; opacity: 0; overflow: hidden;  webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
    .flex-direction-nav .flex-next {background-position: 100% 0; right: -50px; }
    .flex-direction-nav .flex-prev {left: -50px;}
    .flexslider:hover .flex-next {opacity: 0.7; right: 10px;}
    .flexslider:hover .flex-prev {opacity: 0.7; left: 10px;}
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
    .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;}
    
    /* Slider Captions */
    .flex-caption{ position: absolute; left:0px; top:75px; width:920px; background:none; font-family: 'Open Sans', sans-serif; text-align:center; font-size:14px; color:lightslategray;}
    .flex-caption h2{ font-size:30px; color:#lightslategray;} 
    .flex-caption p{ text-align:center; padding:0 200px;}
    a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:lightsteelblue; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
    
  49. I desperately need help with linking thumbnails to slides with my Flexslider.

    I am currently working on a new project which required a slider featuring videos with thumbnails on the left and right. I’ve pretty much got the layout where I need it (for starters) but can’t for the life of me seem how to link the thumbnails to activate it’s designated slider.

    For example, click on first thumb and slider will advance to first video,….click on third and slides to third video. (Just to clarify, case the first part was confusing).

    Here’s my test page.

    http://www.saintleo.edu/VirtualTour/video.html

    Thank you in advance for your time and assistance!! I’ve been trying for over a week to find someone with the knowledge to help but keep striking out.

    • Hi Jason,

      Good old Saint Leo… FYI, I was born and raised in Dade City. Small world huh.

      With Flexslider, I honestly don’t believe you can achieve your goal with using it as it is. The thumbs are automatically created from the slide images. However, you might actually have better luck, and more functionality, if you use a plugin called Royal Slider. This slider allows for “Deep Linking” which enables you to turn any link element into a trigger to toggle a specific slide.

      • Hi Kerry,

        That’s crazy! It truly is a small world.

        Thanks so much for your response! Checking out Royal Slider now and will let you know how it goes.

        Kind regards,
        JK

  50. hi, if u visit my website u will c that if u touch the slider and navigate to any other picture, the slider doesn’t play later again. this is very annoying. What code can I add to the JS file so that after 7sec of no interaction with the slider it starts playing back again?? Please this is urgent. Thx in advance.

    • Hi Serourian,

      With touch interaction, there has been an on going bug with webkit on iOS. However, you could try something like this as a workaround:

      
      
  51. Gr8, after 3 days of digging nothing worked, but at last THIS CODE IS WORKING LIKE A CHARM,

    Cheers 🙂

    Pls. Take a look at http://www.genius3d.com

  52. Hello,

    How can I add pictures in the slider with different height/width dimensions?

    In an example I’ve found:
    function InitializeImageSlider() {
    $(‘.flexslider’).flexslider({
    animation: “slide”,
    controlNav: true,
    directionNav: true,
    itemWidth: 100%,
    itemHeight: 400
    });
    }

    But when I have a file with a height of 2000, the picture does not look good.

    I have files with dimensions, coming from all diferent people with different camera’s:
    4179 x2781
    4256×2832
    3797×1646
    1656×3710

    Is there another option then crop all picture one by one to be visible correctly in the slider?

    • The size of the images will always be 100% width based on the size of the flexslider container. For best results, you’re going to want to have all the images be the same size prior to uploading them.

  53. Hi,

    Slider is working, however it is displaying bullet points and numbers. There is no arrow to click on for the next image either. I am designing in Dreamweaver and followed all your steps. No going live, just local.

    Please help!

    • If you’re seeing bullets and numbers then that would mean that the flexslider.css file is not being found/loaded properly in your HTML document. Check that and see if it fixes your issue.

  54. hey Kerry, finally someone who makes life easy!:)

    I’m trying to turn my carousel vertical and place it to the right of the slider, with both heights being the same but the carousel width being a third of the size of the slider. Any thoughts?

    need help.

    • Hi Terry,

      From what I could find, it’s not possible with the carousel navigation at the moment to make it vertical; however, it seems to be a highly requested feature. So you’ll have to wait for WooThemes to implement it.

  55. Hi Kerry

    Just a couple of simple/silly questions

    Width and height

    I want to set the width and height of the slider window – e.g. 500 w x 350 h so that the image is constrained proportionally by the width or height which ever is greater. i.e. a 600 x 350 picture is reduced to 500 px x 292 px – is this possible? I would envisage the image being aligned middle vertically and horizontally.

    Even if this is not possible, where and how does one set the width and height – via the wrapper, which seems clumsy, or better still via the flex-slder window itself?

    Thank you

    Mark

    • Being this is a responsive slider, the images displayed will adjust to the max-width of the container the flexslider is placed within. If you want all your images to be sized the same, then all of them need to be the same size prior to uploading.

Comments are closed.