0

I'm working with a flexslider plugin with the Skelton boilerplate. However, I can't get the slider to work with large images. Theoretically, the slider should conform the images to the size of the .flexslider class, but it instead only shows a part of the image instead of resizing the image to fit the screen when the viewport is resized.

I'm using a very standard Skeleton framework and have not touched the flexslider css or javascript in the slightest.

The corresponding HTML is as follows:

<div class="container">
<div class="sixteen columns">
        <h1 class="remove-bottom"> Skeleton </h1>
        <h5>Version 1.2</h5>
        <div id="divider"><hr></div>
    <div class="flexslider">
      <ul class="slides">
        <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
      </ul>
    </div>

The images seem to conform to the size of the container div when the flexslider javascript plugin is not called out in the document, but once it's in there, it doesn't seem to work.

Any suggestions?

Thanks!

  • where's your js, css - do you have a link? – James Daly Mar 29 '13 at 21:41
  • @james-daly Hi! Looks like I solved it after some tweaking. I missed a line a very integral line of code...the jQuery library! Took care of all my problems! – Michelle Pinsky Mar 30 '13 at 01:19
  • Hee hee! Michelle, I think you should make that into the answer and then accept it. It is best for clarity, and this post could help someone else. – Smandoli Apr 25 '13 at 22:59

1 Answers1

0

I missed a line a very integral line of code...the jQuery library! Took care of all my problems!