Add Flexslider jquery slider to your iWeb site

August 8, 2012 / Kerry / Blog / 103 Comments

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 View Demo

Steps from start to finish

1. Download Flexslider from Woothemes. (It’s free) The download package will have a lot of 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. 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.

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

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

5. 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

6. When you have it ready, go ahead and upload the folder to your hosting server, usually the root (public_html or www, etc).

7. 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 2.

<!-- 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.6.2/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>

$(window).load(function() {

$('.flexslider').flexslider({

animation: "fade", // slide or fade

controlsContainer: ".flex-container" // the container that holds the flexslider

});

</script>

</ul>

</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.6.2/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>

$(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>

</ul>

</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;

}

.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>

1	<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;
}

.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>

$(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>

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 any questions, feel free to ask below in the comments. Thanks!

Enjoy and Share!

103 comments on “Add Flexslider jquery slider to your iWeb site”

Mauricio says:

August 15, 2012 at 7:11 am

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?

Reply
- Bluenotes says:
  
  August 15, 2012 at 9:12 am
  
  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:
  
  XHTML
  
  background: url(images/bg_direction_nav.png) no-repeat 0 0;
  
  1
  
  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:
  
  XHTML
  
  background: url(../images/bg_direction_nav.png) no-repeat 0 0;
  
  1
  
  background: url(../images/bg_direction_nav.png) no-repeat 0 0;
  
  You can also use an absolute URL here to be safe:
  
  XHTML
  
  background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;
  
  1
  
  background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;
  
  Reply

Nik says:

August 29, 2012 at 11:43 am

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.

Bluenotes says:

August 29, 2012 at 11:53 am

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>

$(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>

1	<li><a href="link_to_page"><img src="URL_to_image"/></a></li>

Craig says:

September 4, 2012 at 12:32 pm

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!

Bluenotes says:

September 4, 2012 at 1:17 pm

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>

$(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>

$(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.

shannon says:

October 11, 2012 at 9:28 pm

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

Reply
- Bluenotes says:
  
  October 11, 2012 at 9:39 pm
  
  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
  
  Reply
  - Riyaah says:
    
    October 20, 2012 at 4:17 pm
    
    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?
    
    Reply
    - Bluenotes says:
      
      October 20, 2012 at 4:43 pm
      
      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.
      
      Reply
      - Riyaah says:
        
        October 21, 2012 at 11:13 pm
        
        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.
        
        Reply
Jim says:

October 21, 2012 at 7:34 pm

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?

Reply
- Bluenotes says:
  
  October 22, 2012 at 9:07 am
  
  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.
  
  Reply
  - Rakesh Yadav says:
    
    January 19, 2013 at 5:29 am
    
    Please give some suggestion, the slider is taking a lot of size on page how to reduce it.
    
    Reply
    - bluenotes says:
      
      January 19, 2013 at 10:51 am
      
      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:
      
      XHTML
      
      .flexslider { width: 300px; }
      
      1
      
      .flexslider { width: 300px; }
      
      Reply
Kerrie Parker says:

November 2, 2012 at 8:26 am

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

Reply
- Bluenotes says:
  
  November 2, 2012 at 12:22 pm
  
  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
  
  XHTML
  
  <p class="flex-caption">Captions text shows a description of the image.... </p>
  
  1
  
  <p class="flex-caption">Captions text shows a description of the image.... </p>
  
  Example:
  
  XHTML
  
  <li><img src="slide1.jpg" /><p class="flex-caption">Captions text shows a description of the image.... </p></li>
  
  1
  
  <li><img src="slide1.jpg" /><p class="flex-caption">Captions text shows a description of the image.... </p></li>
  
  Reply
Kerrie Parker says:

November 2, 2012 at 8:33 am

Hello. I just posted a question to the forum. I forgot to mention I will be linking it also with Coldfusion.

Thanks!

Kerrie Parker

Reply
- Bluenotes says:
  
  November 2, 2012 at 12:27 pm
  
  Sorry I do not know this either. Check with the Woothemes website for your answers in linking with Coldfusion.
  
  Reply
  - Kerrie Parker says:
    
    November 2, 2012 at 12:39 pm
    
    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.
    
    Reply

ReneK says:

November 4, 2012 at 1:46 am

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

Bluenotes says:

November 4, 2012 at 9:57 am

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;}

.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;}

Ian says:

November 27, 2012 at 9:29 pm

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.

Reply
- Bluenotes says:
  
  November 28, 2012 at 2:23 pm
  
  Hi Ian, you can try asking on the Flexslider website. I believe they have a support forum there.
  
  Reply
Miguel says:

November 29, 2012 at 11:20 am

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…

Reply
- Bluenotes says:
  
  November 30, 2012 at 11:52 am
  
  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.
  
  Reply

Tobias says:

December 15, 2012 at 6:58 am

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

Bluenotes says:

December 17, 2012 at 12:54 pm

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.

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
  
    // The children has to come first, give it a div ID (#).
    $('#flexslider-child').flexslider({
          animation: "fade",  // slide or fade
          directionNav: false, // Remove the nav arrows for the child
          controlNav: false // Remove the controls for the child
    });
    
    // This is the parent and it has to come last, give it it's own ID (#) as well. The sync property is applied to sync with the child div ID above
    $('#flexslider-parent').flexslider({
          animation: "fade",  // slide or fade
          sync: "#flexslider-child"
    });
  });
</script>

$(window).load(function() {

// The children has to come first, give it a div ID (#).

$('#flexslider-child').flexslider({

animation: "fade", // slide or fade

directionNav: false, // Remove the nav arrows for the child

controlNav: false // Remove the controls for the child

});

// This is the parent and it has to come last, give it it's own ID (#) as well. The sync property is applied to sync with the child div ID above

$('#flexslider-parent').flexslider({

animation: "fade", // slide or fade

sync: "#flexslider-child"

});

</script>

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.

<!-- Slider Container and Images -->
<div style="padding:5px; width: 350px; float:left;">
    <h3>This is the Parent</h3>
	<div id="flexslider-parent" class="flexslider">
 		<ul class="slides">
	 		<li><img src="slide1.jpg" /></li>
	 		<li><img src="slide2.jpg" /></li>
	 		<li><img src="slide3.jpg" /></li>
	 	</ul>
	 </div>
    <p>The parent slider has the slider controls.</p>
</div>

<!-- Slider Container and Images -->
<div style="padding:5px; width: 350px; float:right;">
    <h3>This is the Child</h3>
	<div id="flexslider-child" class="flexslider">
 		<ul class="slides">
	 	        <li><p>Hi there (slide 1)</p></li>
	 		<li><p>Hi there Again (slide 2)</p></li>
	 		<li><p>Hi there Again and final! (slide 3)</p></li>
	 	</ul>
	 </div>
    <p>The nav arrows and control buttons are removed so that users only interact with the parent.</p>
</div>

<h3>This is the Parent</h3>

</ul>

</div>

<p>The parent slider has the slider controls.</p>

</div>

<h3>This is the Child</h3>

<li><p>Hi there (slide 1)</p></li>

<li><p>Hi there Again (slide 2)</p></li>

<li><p>Hi there Again and final! (slide 3)</p></li>

</ul>

</div>

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

</div>

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.

Tobias says:

December 21, 2012 at 3:16 am

Hi Bluenotes,

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

thx!

Reply
Tobias says:

December 21, 2012 at 5:10 am

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

Reply
- Bluenotes says:
  
  December 21, 2012 at 10:15 am
  
  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:
  
  XHTML
  
  #flexslider-child.flexslider { ... }
  
  1
  
  #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:
  
  XHTML
  
  #flexslider-child.flexslider .flex-direction-nav a { background: url(../images/new_nav_image.png) }
  
  1
  
  #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.
  
  Reply
Tobias says:

December 22, 2012 at 12:08 am

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!

Reply
Joseph says:

December 28, 2012 at 7:02 pm

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.

Reply
- Bluenotes says:
  
  December 29, 2012 at 10:57 am
  
  Hi Joseph, send me the url to the published slider and I’ll see what I can help with.
  
  Reply
  - Joseph says:
    
    December 29, 2012 at 11:04 am
    
    dapperjoe.com/privates
    I have it currently working on that page. Thanks Bluenotes for your help.
    
    Reply
    - Bluenotes says:
      
      December 29, 2012 at 11:20 am
      
      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:
      
      XHTML
      
      .flex-direction-nav a {background: url("images/bg_direction_nav2.png") no-repeat 0 0;}
      
      1
      
      .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.
      
      XHTML
      
      .flex-direction-nav a {background: url("../images/bg_direction_nav2.png") no-repeat 0 0;}
      
      1
      
      .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).
      
      XHTML
      
      .flex-direction-nav a {background: url("../images/bg_direction_nav.png") no-repeat 0 0;}
      
      1
      
      .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 .
      
      Reply
Joseph says:

December 29, 2012 at 11:32 am

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.

Reply
- Bluenotes says:
  
  December 29, 2012 at 11:47 am
  
  Check your width on .flex-direction-nav a It should be 30px. You have it listed as 60px
  
  XHTML
  
  .flex-direction-nav a { width: 30px; }
  
  1
  2
  3
  
  .flex-direction-nav a {
  width: 30px;
  }
  
  Reply
  - Joseph says:
    
    December 29, 2012 at 12:00 pm
    
    lol thanks again. Seriously, you’re a lifesaver Bluenotes.
    
    Reply

Joseph says:

December 30, 2012 at 3:23 pm

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.

Bluenotes says:

December 30, 2012 at 5:41 pm

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.

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
// Can also be used with $(document).ready()
$(window).load(function() {
 
  // Vimeo API nonsense
  var player = document.getElementById('player_1');
  $f(player).addEvent('ready', ready);
 
  function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
      element.addEventListener(eventName, callback, false)
    } else {
      element.attachEvent(eventName, callback, false);
    }
  }
 
  function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
      $('.flexslider').flexslider("pause");
    });
    froogaloop.addEvent('pause', function(data) {
      $('.flexslider').flexslider("play");
    });
  }
 
  // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
  $(".flexslider")
    .fitVids()
    .flexslider({
      animation: "fade",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });
});


</script>

// Can also be used with $(document).ready()

$(window).load(function() {

// Vimeo API nonsense

var player = document.getElementById('player_1');

$f(player).addEvent('ready', ready);

function addEvent(element, eventName, callback) {

if (element.addEventListener) {

element.addEventListener(eventName, callback, false)

} else {

element.attachEvent(eventName, callback, false);

}

function ready(player_id) {

var froogaloop = $f(player_id);

froogaloop.addEvent('play', function(data) {

$('.flexslider').flexslider("pause");

});

froogaloop.addEvent('pause', function(data) {

$('.flexslider').flexslider("play");

});

}

// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.

$(".flexslider")

.fitVids()

.flexslider({

animation: "fade",

useCSS: false,

animationLoop: false,

smoothHeight: true,

before: function(slider){

$f(player).api('pause');

}

});

</script>

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.

<li><iframe id="player_1" src="http://player.vimeo.com/video/56492431?title=0&byline=0&portrait=0" width="900" height="675" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>

1	<li><iframe id="player_1" src="http://player.vimeo.com/video/56492431?title=0&byline=0&portrait=0" width="900" height="675" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>

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.

Joseph says:

December 30, 2012 at 7:38 pm

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

Reply
- Bluenotes says:
  
  December 30, 2012 at 9:25 pm
  
  Hi Joseph,
  
  I’m glad I was able to help you get it working. Have a wonderful New Years!
  
  Reply

Frankie says:

January 14, 2013 at 9:39 am

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!

Bluenotes says:

January 14, 2013 at 3:26 pm

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.

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",  // slide or fade
          randomize: true,    // Set the slides to display in a random order, True/False
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

$(window).load(function() {

$('.flexslider').flexslider({

animation: "fade", // slide or fade

randomize: true, // Set the slides to display in a random order, True/False

controlsContainer: ".flex-container" // the container that holds the flexslider

});

</script>

adria says:

January 24, 2013 at 9:31 am

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 !

Reply
- bluenotes says:
  
  January 24, 2013 at 12:17 pm
  
  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
  
  http://i47.tinypic.com/eepev.jpg
  
  Reply
adria says:

January 24, 2013 at 5:00 pm

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

Reply
Johnny says:

February 7, 2013 at 11:22 pm

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!

Reply
- bluenotes says:
  
  February 8, 2013 at 7:19 pm
  
  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.
  
  Reply
  - Johnny says:
    
    February 10, 2013 at 7:25 pm
    
    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..
    
    Reply
    - bluenotes says:
      
      February 10, 2013 at 10:51 pm
      
      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.
      
      Reply

chris says:

February 10, 2013 at 3:40 pm

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!

bluenotes says:

February 10, 2013 at 10:33 pm

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;
}

.flexslider {

border: none;

box-shadow: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

-o-box-shadow: none;

}

Terrance says:

February 19, 2013 at 10:47 am

Hi -

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

Reply
- bluenotes says:
  
  February 19, 2013 at 11:12 am
  
  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.
  
  Reply
gennie says:

March 8, 2013 at 9:49 am

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!

Reply
- bluenotes says:
  
  March 8, 2013 at 9:59 am
  
  Hi Gennie, do you have a live link I can view to see what’s going on?
  
  Reply
  - gennie says:
    
    March 8, 2013 at 4:00 pm
    
    Kerry,
    Thxs for the fix…works perfectly!!!!
    Cheers
    
    Reply
Megan says:

March 13, 2013 at 3:00 pm

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!

Reply
- bluenotes says:
  
  March 13, 2013 at 3:29 pm
  
  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.
  
  Reply
  - Megan says:
    
    March 13, 2013 at 4:34 pm
    
    Thanks! It was in there twice!
    
    Reply

Evan says:

March 14, 2013 at 11:25 am

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.

Kerry says:

March 14, 2013 at 10:25 pm

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;
}

.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:

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

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

Hozey says:

March 15, 2013 at 6:37 am

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?

Kerry says:

March 15, 2013 at 9:24 am

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.

<div style="width:400px;">
    <div class="flexslider">
         .....
    </div>
</div>

.....

</div>

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.

Hozey says:

March 15, 2013 at 4:14 pm

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

Kerry says:

March 15, 2013 at 5:14 pm

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.

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",  // slide or fade
          slideshowSpeed: 7000, // The time in milliseconds before the next slide begins to transition.
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

$(window).load(function() {

$('.flexslider').flexslider({

animation: "fade", // slide or fade

slideshowSpeed: 7000, // The time in milliseconds before the next slide begins to transition.

controlsContainer: ".flex-container" // the container that holds the flexslider

});

</script>

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

1	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

1	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.

Hozey says:

March 15, 2013 at 6:32 pm

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

Reply
- Kerry says:
  
  March 15, 2013 at 7:18 pm
  
  I sent you an email to continue this conversation. Let me know if you still have questions.

Hozey says:

March 16, 2013 at 5:52 am

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

Kerry says:

March 16, 2013 at 9:12 am

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.

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "slide",
          slideshowSpeed: 5000,
          pauseOnHover: true,  // true or false
          controlsContainer: ".flex-container"
    });
  });
</script>

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide",

slideshowSpeed: 5000,

pauseOnHover: true, // true or false

controlsContainer: ".flex-container"

});

</script>

hozey says:

March 16, 2013 at 10:13 am

Thank you.

Reply

Rob says:

March 25, 2013 at 8:39 pm

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

Reply
- Kerry says:
  
  March 25, 2013 at 9:45 pm
  
  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.
  
  CSS
  
  .flexslider {width: 976px; }
  
  1
  
  .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.
  
  Reply
  - Rob says:
    
    March 26, 2013 at 9:46 am
    
    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.
    
    Reply
    - Kerry says:
      
      March 26, 2013 at 10:58 am
      
      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.
      
      Reply
      - Rob says:
        
        March 26, 2013 at 11:30 am
        
        I will do that, thanks Kerry.
        
        Reply
octavio says:

April 12, 2013 at 8:05 pm

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.

Reply
- octavio says:
  
  April 12, 2013 at 8:18 pm
  
  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.
  
  Reply
  - Kerry says:
    
    April 13, 2013 at 9:34 am
    
    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.
    
    Reply
    - octavio says:
      
      April 16, 2013 at 11:42 am
      
      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
      });
      });
      
      Reply
      - Kerry says:
        
        April 16, 2013 at 12:00 pm
        
        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.
        
        Reply
    - octavio says:
      
      April 16, 2013 at 12:54 pm
      
      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.
      
      Reply
      - Kerry says:
        
        April 16, 2013 at 1:59 pm
        
        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).
        
        XHTML
        
        <link rel="stylesheet" href="http://www.bluenotesentertainment.com/siteelements/iweb-demos/flex/css/flexslider.css" type="text/css">
        
        1
        
        <link rel="stylesheet" href="http://www.bluenotesentertainment.com/siteelements/iweb-demos/flex/css/flexslider.css" type="text/css">
        
        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” ?
        
        Reply
        
        octavio says:
        
        April 22, 2013 at 9:56 pm
        
        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.
        
        Kerry says:
        
        April 23, 2013 at 11:18 am
        
        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.
Raf says:

April 13, 2013 at 1:15 pm

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

Reply
- Kerry says:
  
  April 13, 2013 at 1:34 pm
  
  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.
  
  Reply
octavio. says:

April 19, 2013 at 8:34 pm

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.

Reply
- Kerry says:
  
  April 20, 2013 at 9:12 am
  
  Again, as I have told you a number of times already, you are missing the flexslider.css file. See what I said earlier in a previous comment.
  
  Reply
octavio. says:

April 19, 2013 at 9:19 pm

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.

Reply
- Kerry says:
  
  April 20, 2013 at 9:18 am
  
  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.
  
  Reply

Stephen says:

April 30, 2013 at 2:52 pm

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

Kerry says:

April 30, 2013 at 5:41 pm

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;
	}

.flex-wrapper { position: relative;}

.flex-wrapper .logo {

width: 300px;

position: absolute;

top: 20px;

left: 20px;

z-index: 999;

}

HTML:

<!-- Parent Div -->
<div class=" flex-wrapper">
	
	<!-- Our logo or overlay layer to sit on top of the slides -->
	<img class="logo" src="logo.png" />
	
	<!-- normal flexslider div -->
	<div class="flexslider">
 		<ul class="slides">
	 		<li><img src="slide1.jpg" /></li>
	 		<li><img src="slide2.jpg" /></li>
	 		<li><img src="slide3.jpg" /></li>
	 	</ul>
	 </div>
</div>

</ul>

</div>

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

Pinar says:

May 1, 2013 at 1:48 am

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?

Reply
Pinar says:

May 1, 2013 at 3:47 am

I just found the solution to my question here: http://stackoverflow.com/questions/5177705/google-maps-infowindow-not-showing-the-tabs-as-it-should

Reply
Stephen says:

May 2, 2013 at 12:24 pm

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

Thank you so much

S

Reply

Stephen says:

May 2, 2013 at 12:43 pm

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

Kerry says:

May 2, 2013 at 12:56 pm

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;
}

.flex-wrapper .search-box {

position: absolute;

top: 20px;

right: 20px;

z-index: 999;

}

<div class=" flex-wrapper">
    <img class="logo" src="images/logo.png" />
    <div class="search-box">
	Your Code here...
    </div>

    <div class="flexslider">
        ... etc...
    </div>
</div>

Your Code here...

</div>

... etc...

</div>

Stephen says:

May 2, 2013 at 12:46 pm

Actually forget question 1 – figured that one out :p

Reply

Nicolas says:

May 9, 2013 at 4:51 pm

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,

Kerry says:

May 9, 2013 at 6:52 pm

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.

<li><img src="path_to_image1.jpg" /></li>
<li><img src="path_to_image2.jpg" /></li>
<li><img src="path_to_image3.jpg" /></li>
<li><img src="path_to_image4.jpg" /></li>
<li><img src="path_to_image5.jpg" /></li>
<li><img src="path_to_image6.jpg" /></li>
...etc ....