Flexslider2 Slider w/thumbnail controlNav pattern Limiting Number of thumbnails displaying - slider

Question

I have just implemented Flexslider2 Slider w/thumbnail controlNav Pattern. The problem is that I have 8 images that I want to scroll through. Right now, the thumbnails are displaying all 8 thumbnails below the main image. I would like to limit the max number of Thumbnails displaying to 4, and then scroll the thumbnails when it gets to images 5-8.
The maxItems: 4, does not seem to be working for me.
Here is my JS:
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
maxItems: 4,
});
});
</script>
Here is my HTML:
<div class="flexslider">
<ul class="slides">
<li data-thumb="/Images/Products/WoodenSign/PNG/1-AMORE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png">
<img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/1-BenchFullShot.png">
<img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/2-CabinRight.png">
<img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
</li>
<li data-thumb="/Images/Products/WoodenSign/PNG/3-LOVE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
</li>
</ul>
</div>

Answer 1

You have to define the Flexslider width in your css file let's say put it to width: 400px in the flexslider.css
.flexslider {
width: 400px;
}
and then in your jQuery initialization of the slider define the width of the single slide, like this:
$('.flexslider').flexslider({
itemWidth: 100
});
This is defining a width of 100px for every single slide. With this setup you should have 4 slides displayed.