Skip navigation
Currently Being Moderated

FlexSlider

Mar 9, 2013 6:28 AM

I am a beginner in web mastering. Please tell me in simple words how to configure the widget FlexSlider - what html and CSS are needed so that slide show is taking place in the header of my page. www.naszchleb.pl/test2  . I want a slide show in the place of the header picture (the picture with loaves of breads). I have downloaded the flexslider widget into my dremweaver CS6 and have 5 pictures of identical size as the current header picture, which I want them to be part of the slideshow. I want the automatic slideshow only, with these 5 (or more) pictures moving vertically to start with. No thumbnails pictures. Thanks in advance for your guidance. 

 
Replies
  • Currently Being Moderated
    Mar 9, 2013 6:32 AM   in reply to Bogi13

    The instructions are right here -

     

    http://www.woothemes.com/flexslider/

     

    Can you follow them?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2013 7:14 AM   in reply to Bogi13

    In your page, change this -

     

    </head>

     

    to this -

     

    <!-- Place somewhere in the <head> of your document -->

    <link rel="stylesheet" href="flexslider.css" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script src="jquery.flexslider.js"></script>

     

    <!-- Place in the <head>, after the three links -->

     

    <script type="text/javascript" charset="utf-8">

      $(window).load(function() {

        $('.flexslider').flexslider();

      });

    </script>

    </head>

     

    That completes step 1 and step 3.

     

    Then change this -

     

    <div id="header"><img src="images/header.jpg" width="960" height="310" alt="bbb"></div>

     

    to this -

     

    <div id="header" class="flexslider">

    <ul class="slides">

      <li><img src="images/header.jpg" width="960" height="310" alt="bbb"></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

    </ul>

    </div>

     

    The slider is installed.  Now to make it work the way you want (vertical slide), change this -

     

       $('.flexslider').flexslider();

     

    to this -

     

       $('.flexslider').flexslider({

              animation:slide });

     

    and you will be well on your way. See how it looks.


     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2013 7:16 AM   in reply to MurraySummers

    YIKES - that doesn't look the way it should! Hang on. I'll try to fix it.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2013 9:07 AM   in reply to Bogi13

    Change this -

     

    </head>

     

    to this -

     

    <!-- Place somewhere in the <head> of your document -->

    <link rel="stylesheet" href="flexslider.css" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script src="jquery.flexslider.js"></script>

    <!-- Place in the <head>, after the three links -->

    <script type="text/javascript" charset="utf-8">

      $(window).load(function() {

        $('.flexslider').flexslider();

      });

    </script>

    </head>

     

    That completes step 1 and step 3.

     

    Then change this -

     

    <div id="header"><img src="images/header.jpg" width="960" height="310" alt="bbb"></div>

     

    to this -

     

    <div id="header" class="flexslider">

    <ul class="slides">

      <li><img src="images/header.jpg" width="960" height="310" alt="bbb"></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

      <li><img src="..."></li>

    </ul>

    </div>

     

    The slider is installed.  Now to make it work the way you want (vertical slide), change this -

     

      $('.flexslider').flexslider();

     

    to this -

     

      $('.flexslider').flexslider({

              animation:slide });

     

    and you will be well on your way. See how it looks.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 10, 2013 6:10 AM   in reply to Bogi13

    It looks like my instructions were not complete.  You need both the linked CSS file and the linked javascript file still!

     

    They can both be found here - https://github.com/woothemes/flexslider. Download both of these into the root level of your local site, then upload them to the server and you should be good to go.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 10, 2013 5:03 PM   in reply to MurraySummers

    thanks murrary, this solved the problem, for me at least

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2013 11:53 PM   in reply to MurraySummers

    Hello.i have read ur steps.It is very useful.Pls let me know how to reduce the Flexslider's height & increase its width.

     

    Thanks in advance.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2013 5:52 AM   in reply to Roopavathy

    Change the size of the images within the slider container.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 12:01 AM   in reply to Bogi13

    Can you open the stylesheet by clicking the file(flexslider.css) from the top in the design view?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2013 5:11 AM   in reply to Roopavathy

    Hi,

    Did you find out how to fix the size of the images in the slider?  I think I have the same problem http://dmrural.leapfrogdesign.com.au/index.html

    Thanks,

    Tammy

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2013 10:27 AM   in reply to cretam

    Your images are grossly distorted (overly resized) in larger displays.  To limit distortion, change width to max-width in flexslider.css.

     

    .flexslider .slides img {max-width: 100%; display: block;}

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2013 11:06 PM   in reply to Nancy O.

    Thanks Nancy.  I tried that but it only displayed 50% of the screen width.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2013 8:58 AM   in reply to cretam

    That's because your native images are not wide enough to fill the page layout.  You would need to resize images in Photoshop to whatever size is required.  Also keep in mind that bigger images take longer to load.  So Save for Web & optimize images to the smallest file size you can.

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2013 12:25 PM   in reply to Nancy O.

    Thanks Nancy.

     

     

    Sent from my iPhone

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points