javascript - Allowing more than three items in jCarousel -

i have same problem following question:

setting number of visible images in jcarousel

the answer seems in css file, website has been dropped on me not seem follow norm.

here .js code:

/*!  * jcarousel - riding carousels jquery  *   http://sorgalla.com/jcarousel/  *  * copyright (c) 2006 jan sorgalla (http://sorgalla.com)  * dual licensed under mit (http://www.opensource.org/licenses/mit-license.php)  * , gpl (http://www.opensource.org/licenses/gpl-license.php) licenses.  *  * built on top of jquery library  *   http://jquery.com  *  * inspired "carousel component" bill scott  *   http://billwscott.com/carousel/  */  (function (g) { var q = { vertical: !1, rtl: !1, start: 1, offset: 1, size: null, scroll: 6, visible: 6, animation: "normal", easing: "swing", auto: 0, wrap: null, initcallback: null, setupcallback: null, reloadcallback: null, itemloadcallback: null, itemfirstincallback: null, itemfirstoutcallback: null, itemlastincallback: null, itemlastoutcallback: null, itemvisibleincallback: 6, itemvisibleoutcallback: 6, animationstepcallback: null, buttonnexthtml: "<div></div>", buttonprevhtml: "<div></div>", buttonnextevent: "click", buttonprevevent: "click", buttonnextcallback: null, buttonprevcallback: null, itemfallbackdimension: null }, m = !1; g(window).bind("load.jcarousel", function () { m = !0 }); g.jcarousel = function (a, c) { this.options = g.extend({}, q, c || {}); this.autostopped = this.locked = !1; this.buttonprevstate = this.buttonnextstate = this.buttonprev = this.buttonnext = this.list = this.clip = this.container = null; if (!c || c.rtl === void 0) this.options.rtl = (g(a).attr("dir") || g("html").attr("dir") || "").tolowercase() == "rtl"; this.wh = !this.options.vertical ? "width" : "height"; this.lt = !this.options.vertical ? this.options.rtl ? "right" : "left" : "top"; (var b = "", d = a.classname.split(" "), f = 0; f < d.length; f++) if (d[f].indexof("jcarousel-skin") != -1) { g(a).removeclass(d[f]); b = d[f]; break } a.nodename.touppercase() == "ul" || a.nodename.touppercase() == "ol" ? (this.list = g(a), this.clip = this.list.parents(".jcarousel-clip"), this.container = this.list.parents(".jcarousel-container")) : (this.container = g(a), this.list = this.container.find("ul,ol").eq(0), this.clip = this.container.find(".jcarousel-clip")); if (this.clip.size() === 0) this.clip = this.list.wrap("<div></div>").parent(); if (this.container.size() === 0) this.container = this.clip.wrap("<div></div>").parent(); b !== "" && this.container.parent()[0].classname.indexof("jcarousel-skin") == -1 && this.container.wrap('<div class=" ' + b + '"></div>'); this.buttonprev = g(".jcarousel-prev", this.container); if (this.buttonprev.size() === 0 && this.options.buttonprevhtml !== null) this.buttonprev = g(this.options.buttonprevhtml).appendto(this.container); this.buttonprev.addclass(this.classname("jcarousel-prev")); this.buttonnext = g(".jcarousel-next", this.container); if (this.buttonnext.size() === 0 && this.options.buttonnexthtml !== null) this.buttonnext = g(this.options.buttonnexthtml).appendto(this.container); this.buttonnext.addclass(this.classname("jcarousel-next")); this.clip.addclass(this.classname("jcarousel-clip")).css({ position: "relative" }); this.list.addclass(this.classname("jcarousel-list")).css({ overflow: "hidden", position: "relative", top: 0, margin: 0, padding: 0 }).css(this.options.rtl ? "right" : "left", 0); this.container.addclass(this.classname("jcarousel-container")).css({ position: "relative" }); !this.options.vertical && this.options.rtl && this.container.addclass("jcarousel-direction-rtl").attr("dir", "rtl"); var j = this.options.visible !== 6 ? math.ceil(this.clipping() / this.options.visible) : null, b = this.list.children("li"), e = this; if (b.size() > 0) { var h = 0, = this.options.offset; b.each(function () { e.format(this, i++); h += e.dimension(this, j) }); this.list.css(this.wh, h + 100 + "px"); if (!c || c.size === void 0) this.options.size = b.size() } this.container.css("display", "block"); this.buttonnext.css("display", "block"); this.buttonprev.css("display", "block"); this.funcnext = function () { e.next() }; this.funcprev = function () { e.prev() }; this.funcresize = function () { e.resizetimer && cleartimeout(e.resizetimer); e.resizetimer = settimeout(function () { e.reload() }, 100) }; this.options.initcallback !== null && this.options.initcallback(this, "init"); !m && g.browser.safari ? (this.buttons(!1, !1), g(window).bind("load.jcarousel", function () { e.setup() })) : this.setup() }; var f = g.jcarousel; f.fn = f.prototype = { jcarousel: "0.2.8" }; f.fn.extend = f.extend = g.extend; f.fn.extend({ setup: function () { this.prevlast = this.prevfirst = this.last = this.first = null; this.animating = !1; this.tail = this.resizetimer = this.timer = null; this.intail = !1; if (!this.locked) { this.list.css(this.lt, this.pos(this.options.offset) + "px"); var = this.pos(this.options.start, !0); this.prevfirst = this.prevlast = null; this.animate(a, !1); g(window).unbind("resize.jcarousel", this.funcresize).bind("resize.jcarousel", this.funcresize); this.options.setupcallback !== null && this.options.setupcallback(this) } }, reset: function () { this.list.empty(); this.list.css(this.lt, "0px"); this.list.css(this.wh, "10px"); this.options.initcallback !== null && this.options.initcallback(this, "reset"); this.setup() }, reload: function () { this.tail !== null && this.intail && this.list.css(this.lt, f.intval(this.list.css(this.lt)) + this.tail); this.tail = null; this.intail = !1; this.options.reloadcallback !== null && this.options.reloadcallback(this); if (this.options.visible !== null) { var = this, c = math.ceil(this.clipping() / this.options.visible), b = 0, d = 0; this.list.children("li").each(function (f) { b += a.dimension(this, c); f + 1 < a.first && (d = b) }); this.list.css(this.wh, b + "px"); this.list.css(this.lt, -d + "px") } this.scroll(this.first, !1) }, lock: function () { this.locked = !0; this.buttons() }, unlock: function () { this.locked = !1; this.buttons() }, size: function (a) { if (a !== void 0) this.options.size = a, this.locked || this.buttons(); return this.options.size }, has: function (a, c) { if (c === void 0 || !c) c = a; if (this.options.size !== null && c > this.options.size) c = this.options.size; (var b = a; b <= c; b++) { var d = this.get(b); if (!d.length || d.hasclass("jcarousel-item-placeholder")) return !1 } return !0 }, get: function (a) { return g(">.jcarousel-item-" + a, this.list) }, add: function (a, c) { var b = this.get(a), d = 0, p = g(c); if (b.length === 0) (var j, e = f.intval(a), b = this.create(a); ; ) { if (j = this.get(--e), e <= 0 || j.length) { e <= 0 ? this.list.prepend(b) : j.after(b); break } } else d = this.dimension(b); p.get(0).nodename.touppercase() == "li" ? (b.replacewith(p), b = p) : b.empty().append(c); this.format(b.removeclass(this.classname("jcarousel-item-placeholder")), a); p = this.options.visible !== null ? math.ceil(this.clipping() / this.options.visible) : null; d = this.dimension(b, p) - d; > 0 && < this.first && this.list.css(this.lt, f.intval(this.list.css(this.lt)) - d + "px"); this.list.css(this.wh, f.intval(this.list.css(this.wh)) + d + "px"); return b }, remove: function (a) { var c = this.get(a); if (c.length && !(a >= this.first && <= this.last)) { var b = this.dimension(c); < this.first && this.list.css(this.lt, f.intval(this.list.css(this.lt)) + b + "px"); c.remove(); this.list.css(this.wh, f.intval(this.list.css(this.wh)) - b + "px") } }, next: function () { this.tail !== null && !this.intail ? this.scrolltail(!1) : this.scroll((this.options.wrap == "both" || this.options.wrap == "last") && this.options.size !== null && this.last == this.options.size ? 1 : this.first + this.options.scroll) }, prev: function () { this.tail !== null && this.intail ? this.scrolltail(!0) : this.scroll((this.options.wrap == "both" || this.options.wrap == "first") && this.options.size !== null && this.first == 1 ? this.options.size : this.first - this.options.scroll) }, scrolltail: function (a) { if (!this.locked && !this.animating && this.tail) { this.pauseauto(); var c = f.intval(this.list.css(this.lt)), c = !a ? c - this.tail : c + this.tail; this.intail = !a; this.prevfirst = this.first; this.prevlast = this.last; this.animate(c) } }, scroll: function (a, c) { !this.locked && !this.animating && (this.pauseauto(), this.animate(this.pos(a), c)) }, pos: function (a, c) { var b = f.intval(this.list.css(this.lt)); if (this.locked || this.animating) return b; this.options.wrap != "circular" && (a = < 1 ? 1 : this.options.size && > this.options.size ? this.options.size : a); (var d = this.first > a, g = this.options.wrap != "circular" && this.first <= 1 ? 1 : this.first, j = d ? this.get(g) : this.get(this.last), e = d ? g : g - 1, h = null, = 0, k = !1, l = 0; d ? --e >= : ++e < a; ) { h = this.get(e); k = !h.length; if (h.length === 0 && (h = this.create(e).addclass(this.classname("jcarousel-item-placeholder")), j[d ? "before" : "after"](h), this.first !== null && this.options.wrap == "circular" && this.options.size !== null && (e <= 0 || e > this.options.size))) j = this.get(this.index(e)), j.length && (h = this.add(e, j.clone(!0))); j = h; l = this.dimension(h); k && (i += l); if (this.first !== null && (this.options.wrap == "circular" || e >= 1 && (this.options.size === null || e <= this.options.size))) b = d ? b + l : b - l } (var g = this.clipping(), m = [], o = 0, n = 0, j = this.get(a - 1), e = a; ++o; ) { h = this.get(e); k = !h.length; if (h.length === 0) { h = this.create(e).addclass(this.classname("jcarousel-item-placeholder")); if (j.length === 0) this.list.prepend(h); else j[d ? "before" : "after"](h); if (this.first !== null && this.options.wrap == "circular" && this.options.size !== null && (e <= 0 || e > this.options.size)) j = this.get(this.index(e)), j.length && (h = this.add(e, j.clone(!0))) } j = h; l = this.dimension(h); if (l === 0) throw error("jcarousel: no width/height set items. cause infinite loop. aborting..."); this.options.wrap != "circular" && this.options.size !== null && e > this.options.size ? m.push(h) : k && (i += l); n += l; if (n >= g) break; e++ } (h = 0; h < m.length; h++) m[h].remove(); > 0 && (this.list.css(this.wh, this.dimension(this.list) + + "px"), d && (b -= i, this.list.css(this.lt, f.intval(this.list.css(this.lt)) - + "px"))); = + o - 1; if (this.options.wrap != "circular" && this.options.size && > this.options.size) = this.options.size; if (e > i) { o = 0; e = i; (n = 0; ++o; ) { h = this.get(e--); if (!h.length) break; n += this.dimension(h); if (n >= g) break } } e = - o + 1; this.options.wrap != "circular" && e < 1 && (e = 1); if (this.intail && d) b += this.tail, this.intail = !1; this.tail = null; if (this.options.wrap != "circular" && == this.options.size && - o + 1 >= 1 && (d = f.intval(this.get(i).css(!this.options.vertical ? "marginright" : "marginbottom")), n - d > g)) this.tail = n - g - d; if (c && === this.options.size && this.tail) b -= this.tail, this.intail = !0; (; a-- > e; ) b += this.dimension(this.get(a)); this.prevfirst = this.first; this.prevlast = this.last; this.first = e; this.last = i; return b }, animate: function (a, c) { if (!this.locked && !this.animating) { this.animating = !0; var b = this, d = function () { b.animating = !1; === 0 && b.list.css(b.lt, 0); !b.autostopped && (b.options.wrap == "circular" || b.options.wrap == "both" || b.options.wrap == "last" || b.options.size === null || b.last < b.options.size || b.last == b.options.size && b.tail !== null && !b.intail) && b.startauto(); b.buttons(); b.notify("onafteranimation"); if (b.options.wrap == "circular" && b.options.size !== null) (var c = b.prevfirst; c <= b.prevlast; c++) c !== null && !(c >= b.first && c <= b.last) && (c < 1 || c > b.options.size) && b.remove(c) }; this.notify("onbeforeanimation"); if (!this.options.animation || c === !1) this.list.css(this.lt, + "px"), d(); else { var f = !this.options.vertical ? this.options.rtl ? { right: a} : { left: a} : { top: }, d = { duration: this.options.animation, easing: this.options.easing, complete: d }; if (g.isfunction(this.options.animationstepcallback)) d.step = this.options.animationstepcallback; this.list.animate(f, d) } } }, startauto: function (a) { if (a !== void 0) this.options.auto = a; if (this.options.auto === 0) return this.stopauto(); if (this.timer === null) { this.autostopped = !1; var c = this; this.timer = window.settimeout(function () { c.next() }, this.options.auto * 1e3) } }, stopauto: function () { this.pauseauto(); this.autostopped = !0 }, pauseauto: function () { if (this.timer !== null) window.cleartimeout(this.timer), this.timer = null }, buttons: function (a, c) { if (a == null && (a = !this.locked && this.options.size !== 0 && (this.options.wrap && this.options.wrap != "first" || this.options.size === null || this.last < this.options.size), !this.locked && (!this.options.wrap || this.options.wrap == "first") && this.options.size !== null && this.last >= this.options.size)) = this.tail !== null && !this.intail; if (c == null && (c = !this.locked && this.options.size !== 0 && (this.options.wrap && this.options.wrap != "last" || this.first > 1), !this.locked && (!this.options.wrap || this.options.wrap == "last") && this.options.size !== null && this.first == 1)) c = this.tail !== null && this.intail; var b = this; this.buttonnext.size() > 0 ? (this.buttonnext.unbind(this.options.buttonnextevent + ".jcarousel", this.funcnext), && this.buttonnext.bind(this.options.buttonnextevent + ".jcarousel", this.funcnext), this.buttonnext[a ? "removeclass" : "addclass"](this.classname("jcarousel-next-disabled")).attr("disabled", ? !1 : !0), this.options.buttonnextcallback !== null && this.buttonnext.data("jcarouselstate") != && this.buttonnext.each(function () { b.options.buttonnextcallback(b, this, a) }).data("jcarouselstate", a)) : this.options.buttonnextcallback !== null && this.buttonnextstate != && this.options.buttonnextcallback(b, null, a); this.buttonprev.size() > 0 ? (this.buttonprev.unbind(this.options.buttonprevevent + ".jcarousel", this.funcprev), c && this.buttonprev.bind(this.options.buttonprevevent + ".jcarousel", this.funcprev), this.buttonprev[c ? "removeclass" : "addclass"](this.classname("jcarousel-prev-disabled")).attr("disabled", c ? !1 : !0), this.options.buttonprevcallback !== null && this.buttonprev.data("jcarouselstate") != c && this.buttonprev.each(function () { b.options.buttonprevcallback(b, this, c) }).data("jcarouselstate", c)) : this.options.buttonprevcallback !== null && this.buttonprevstate != c && this.options.buttonprevcallback(b, null, c); this.buttonnextstate = a; this.buttonprevstate = c }, notify: function (a) { var c = this.prevfirst === null ? "init" : this.prevfirst < this.first ? "next" : "prev"; this.callback("itemloadcallback", a, c); this.prevfirst !== this.first && (this.callback("itemfirstincallback", a, c, this.first), this.callback("itemfirstoutcallback", a, c, this.prevfirst)); this.prevlast !== this.last && (this.callback("itemlastincallback", a, c, this.last), this.callback("itemlastoutcallback", a, c, this.prevlast)); this.callback("itemvisibleincallback", a, c, this.first, this.last, this.prevfirst, this.prevlast); this.callback("itemvisibleoutcallback", a, c, this.prevfirst, this.prevlast, this.first, this.last) }, callback: function (a, c, b, d, f, j, e) { if (!(this.options[a] == null || typeof this.options[a] != "object" && c != "onafteranimation")) { var h = typeof this.options[a] == "object" ? this.options[a][c] : this.options[a]; if (g.isfunction(h)) { var = this; if (d === void 0) h(i, b, c); else if (f === void 0) this.get(d).each(function () { h(i, this, d, b, c) }); else (var = function (a) { i.get(a).each(function () { h(i, this, a, b, c) }) }, k = d; k <= f; k++) k !== null && !(k >= j && k <= e) && a(k) } } }, create: function (a) { return this.format("<li></li>", a) }, format: function (a, c) { (var = g(a), b = a.get(0).classname.split(" "), d = 0; d < b.length; d++) b[d].indexof("jcarousel-") != -1 && a.removeclass(b[d]); a.addclass(this.classname("jcarousel-item")).addclass(this.classname("jcarousel-item-" + c)).css({ "float": this.options.rtl ? "right" : "left", "list-style": "none" }).attr("jcarouselindex", c); return }, classname: function (a) { return + " " + + (!this.options.vertical ? "-horizontal" : "-vertical") }, dimension: function (a, c) { var b = g(a); if (c == null) return !this.options.vertical ? b.outerwidth(!0) || f.intval(this.options.itemfallbackdimension) : b.outerheight(!0) || f.intval(this.options.itemfallbackdimension); else { var d = !this.options.vertical ? c - f.intval(b.css("marginleft")) - f.intval(b.css("marginright")) : c - f.intval(b.css("margintop")) - f.intval(b.css("marginbottom")); g(b).css(this.wh, d + "px"); return this.dimension(b) } }, clipping: function () { return !this.options.vertical ? this.clip[0].offsetwidth - f.intval(this.clip.css("borderleftwidth")) - f.intval(this.clip.css("borderrightwidth")) : this.clip[0].offsetheight - f.intval(this.clip.css("bordertopwidth")) - f.intval(this.clip.css("borderbottomwidth")) }, index: function (a, c) { if (c == null) c = this.options.size; return math.round(((a - 1) / c - math.floor((a - 1) / c)) * c) + 1 } }); f.extend({ defaults: function (a) { return g.extend(q, || {}) }, intval: function (a) { = parseint(a, 10); return isnan(a) ? 0 : }, windowloaded: function () { m = !0 } }); g.fn.jcarousel = function (a) { if (typeof == "string") { var c = g(this).data("jcarousel"), b = array.prototype.slice.call(arguments, 1); return c[a].apply(c, b) } else return this.each(function () { var b = g(this).data("jcarousel"); b ? (a && g.extend(b.options, a), b.reload()) : g(this).data("jcarousel", new f(this, a)) }) } })(jquery); 

where can find css file? i've searched text throughout whole file structure , cannot find these methods

.jcarousel-skin-ie7 .jcarousel-container-horizontal {     width:750px; }  .jcarousel-skin-ie7 .jcarousel-clip-horizontal {     width:740px;  } 

more code...:

if(this.options.carousel){                 //default options carousel                 var carouseldefaults = {vertical:this.options.carouselvertical, initcallback: function(carousel){                     jquery(carousel.list).find('img').click(function(e,x) {                     if(typeof(x) !== 'undefined' && x.how == "auto"){                         if(self.options.autoplay == false){                             return false;                         }                     }                     var clicked = parseint(jquery(this).parents('.jcarousel-item').attr('jcarouselindex'));                     var last = (jquery(this).parents('ul').find('li:last').attr('jcarouselindex') == clicked-1) ? true : false;                     if(!last){                         clicked = (clicked-2<=0) ? 0 : clicked-2;                     }                     clicked++;                     carousel.scroll(clicked);                 });             }}; 

i believe block of code directs carouseloptions, should making these changes.

          var carouseloptions = $.extend({}, carouseldefaults, this.options.carouseloptions || {visible: 6});           this.list.jcarousel(carouseloptions); 

        }         if(typeof(this.options.buildfinished) == 'function'){             this.options.buildfinished(this);         }     }, //end setup 

this code being referenced above:

 var defaults = {     autoplay: true,     speed: 5000,     text: { play: "", stop: "", previous: "previous", next: "next", loading: "loading" },     transition:[1],     showcaption: true,     iesafe: false,     showtooltips: false,     carousel: false,     carouselvertical: false,     animationfinished: null,     buildfinished: null,     bindsfinished: null,     starton: 0,     thumbopacity: 0.4,     hoverpause: false,     animationspeed: 600,     fadethumbsin: false, 

  carouseloptions: {visible: 6}, 

    thumbchangeevent: 'click.pikachoose',     stoponclick: false }; 

you set in javascript options passed follows:

jquery('#mycarousel').jcarousel({visible: 4}); 

this sets amount of visible items four.

see jsfiddle here:

http://jsfiddle.net/xnjwh/168/

update

to find search in project/file system ).jcarousel(. show code being called, add call above.