I’m using the plugin Tiny Carousel (http://baijs.nl/tinycarousel), but I can’t find a way to get multiple instances to work on a single page – the website seems to lack documentation on this.
I have my example up at a server. As you can see, only the first instances is working: http://irishhuddle.com/RSS/slider/slidertest.html.
How can I modify my HTML and .js file to make this work? I know similar questions have been asked… I have spend a lot of time reading them, but can’t find a way to apply the same principles to my code.
My js file:
(function($){
$.tiny = $.tiny || { };
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
animation: true, // false is instant, true is animate.
duration: 500, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
$.fn.tinycarousel = function(options) {
var options = $.extend({}, $.tiny.carousel.options, options);
this.each(function(){ $(this).data('tcl', new Carousel($(this), options)); });
return this;
};
$.fn.tinycarousel_move = function(iNum){ $(this).data('tcl').move(iNum-1,true); };
function Carousel(root, options){
var oSelf = this;
var oViewport = $('.viewport:first', root);
var oContent = $('.overview:first', root);
var oPages = oContent.children();
var oBtnNext = $('.next:first', root);
var oBtnPrev = $('.prev:first', root);
var oPager = $('.pager:first', root);
var iPageSize, iSteps, iCurrent, oTimer, bPause, bForward = true, bAxis = options.axis == 'x';
function initialize(){
iPageSize = bAxis ? $(oPages[0]).outerWidth(true) : $(oPages[0]).outerHeight(true);
var iLeftover = Math.ceil(((bAxis ? oViewport.outerWidth() : oViewport.outerHeight()) / (iPageSize * options.display)) -1);
iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
iCurrent = Math.min(iSteps, Math.max(1, options.start)) -2;
oContent.css(bAxis ? 'width' : 'height', (iPageSize * oPages.length));
oSelf.move(1);
setEvents();
return oSelf;
};
function setEvents(){
if(options.controls && oBtnPrev.length > 0 && oBtnNext.length > 0){
oBtnPrev.click(function(){oSelf.move(-1); return false;});
oBtnNext.click(function(){oSelf.move( 1); return false;});
}
if(options.interval){ root.hover(oSelf.stop,oSelf.start); }
if(options.pager && oPager.length > 0){ $('a',oPager).click(setPager); }
};
function setButtons(){
if(options.controls){
oBtnPrev.toggleClass('disable', !(iCurrent > 0));
oBtnNext.toggleClass('disable', !(iCurrent +1 < iSteps));
}
if(options.pager){
var oNumbers = $('.pagenum', oPager);
oNumbers.removeClass('active');
$(oNumbers[iCurrent]).addClass('active');
document.getElementById('slidenum').innerHTML = iCurrent+1;
}
};
this.move = function(iDirection, bPublic){
iCurrent = bPublic ? iDirection : iCurrent += iDirection;
if(iCurrent > -1 && iCurrent < iSteps){
var oPosition = {};
oPosition[bAxis ? 'left' : 'top'] = -(iCurrent * (iPageSize * options.display));
oContent.animate(oPosition,{
queue: false,
duration: options.animation ? options.duration : 0,
complete: function(){
if(typeof options.callback == 'function')
options.callback.call(this, oPages[iCurrent], iCurrent);
}
});
setButtons();
}
};
return initialize();
};
})(jQuery);
UPDATE: My HTML now looks like this:
<script type="text/javascript">
$(document).ready(function(){
$('#slider-code').tinycarousel({ pager: true });
$('#slider-code2').tinycarousel({ pager: true });
});
</script>
<div id="slider-code">
<div class="viewport">
<ul class="overview">
<li><a rel="1" class="pagenum" href="#">Hi 1</a></li>
<li><a rel="2" class="pagenum" href="#">Hi 2</a></li>
<li><a rel="3" class="pagenum" href="#">Hi 3</a></li>
<li><a rel="4" class="pagenum" href="#">Hi 4</a></li>
<li><a rel="5" class="pagenum" href="#">Hi 5</a></li>
<li><a rel="6" class="pagenum" href="#">Hi 6</a></li>
</ul>
</div>
<ul class="pager">
<li><a href="#" class="buttons prev">left</a></li>
<li id="slidenum">1</li><li> / 6</li>
<li><a href="#" class="buttons next">right</a></li>
</ul>
</div>
<div id="slider-code2">
<div class="viewport">
<ul class="overview">
<li><a rel="1" class="pagenum" href="#">Hi 1</a></li>
<li><a rel="2" class="pagenum" href="#">Hi 2</a></li>
<li><a rel="3" class="pagenum" href="#">Hi 3</a></li>
<li><a rel="4" class="pagenum" href="#">Hi 4</a></li>
<li><a rel="5" class="pagenum" href="#">Hi 5</a></li>
<li><a rel="6" class="pagenum" href="#">Hi 6</a></li>
</ul>
</div>
<ul class="pager">
<li><a href="#" class="buttons prev">left</a></li>
<li id="slidenum">1</li><li> / 6</li>
<li><a href="#" class="buttons next">right</a></li>
</ul>
</div>
You just have to call
$('#slider1').tinycarousel();on your other sliderIn you case, something like:
$('#slider-code').tinycarousel();and$('#slider-code2').tinycarousel();that should be all
EDIT
Just a quick fix for your html: