Flexslider with Skeleton Boilerplate

Question

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!

Answer 1

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