Flexslider changing max items
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider-min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<div class="flexslider js-slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/150/150/animals" />
</li>
<li>
<img src="http://lorempixel.com/150/150/people" />
</li>
<li>
<img src="http://lorempixel.com/150/150/abstract" />
</li>
<li>
<img src="http://lorempixel.com/150/150/food" />
</li>
<li>
<img src="http://lorempixel.com/150/150/nature" />
</li>
<li>
<img src="http://lorempixel.com/150/150/cats" />
</li>
<li>
<img src="http://lorempixel.com/150/150/city" />
</li>
</ul>
</div>
CSS
.flexslider { width: 600px}
.flexslider li {
width: 150px
margin: 0 0 0 20px;
padding: 0;
position: relative;
background-color: #FFF;
float: left;
list-style-type: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
display: block;
}
JavaScript
/**
* @file RD Slider - RD Slider is a slider that has 3 slides visible.<br>
* Created: 03/03/2014<br>
* Modified: 05/16/2014
* @requires jquery-1.9.1.min.js
* @requires jquery-flexslider.2.2.2.min.js
*/
/**
* RD - The global Everyday Health Namespace
* @namespace
* @type {Object}
* @global
*/
window.RD = window.RD || {};
/**
* Immediately-Invoked Function Expression.
*
* @function
* @param {object} $ - Global jQuery object.
* @param {object} w - Global window object.
*/
(function ($, w) {
// strict JS
'use strict';
/**
* Create instance of SliderConstructor<br>
* Modified: 04/03/2014
*
* @constructor
* @name RD.SliderConstructor
* @param {jQuery|string} controls - Selector string or jQuery object for the controls container element.
* @param {jQuery|string} share - Selector string or jQuery object for the share container elements.
* @param {jQuery|string} target - Selector string or jQuery object for the slider container element.
* @property {jQuery} $controls - jQuery object representing the slider controls element.
* @property {jQuery} $shareTarget - jQuery object representing the share elements.
* @property {jQuery} $sliderTarget - jQuery object representing the slider elements.
* @author Richard Dillman <[email protected]>
*/
w.RD.SliderConstructor = function (target, controls) {
this.$controls = (controls instanceof $ && controls) || $(controls);
this.$sliderTarget = (target instanceof $ && target) || $(target);
this.$w = $(w);
};
/**
* Inheritable methods of SliderConstructor.
*
* @type {Object}
* @lends RD.SliderConstructor#
*/
w.RD.SliderConstructor.prototype = {
/**
* Initialization methods for RD.Slider
* Modified: 04/03/2014
*
* @inner
* @param {object} data - The body data array.
* @param {boolean} data.isMobile -...