Skip to content

Instantly share code, notes, and snippets.

@garyhussey
Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save garyhussey/89120d690572de5152f7 to your computer and use it in GitHub Desktop.
Save garyhussey/89120d690572de5152f7 to your computer and use it in GitHub Desktop.
jQuery Plugin for Infinite carousel
<div class="our-partners home">
<div class="row-fluid mobile-pad">
<div class="span12">
<h1></h1>
<p></p>
</div>
</div>
<div class="mini-carousel clearfix icarousel">
<div class="carousel-window port" style="overflow: hidden;">
<ul class="clearfix slides" style="position: relative; overflow: hidden; width: 7680px; left: -1407px;">
<li>
<a href="http://www.ebaptisthealthcare.org/Homepage/" alt="" target="_blank">
<img src="/files/2012/09/baptist-healthcare.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.sacred-heart.org/" alt="" target="_blank">
<img src="/files/2012/09/sacred-heart-health-system.png">
<span></span>
</a>
</li>
<li>
<a href="http://westfloridahospital.com/" alt="" target="_blank">
<img src="/files/2012/09/west-florida-hospital.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.ebaptisthealthcare.org/GulfBreezeHospital/" alt="" target="_blank">
<img src="/files/2012/09/baptist-healthcare1.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.srmcfl.com/" alt="" target="_blank">
<img src="/files/2012/09/santa-rosa-med-center.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.northokaloosa.com/pages/home.aspx" alt="" target="_blank">
<img src="/files/2012/09/north-okaloosa-med-center.png">
<span></span>
</a>
</li>
<li>
<a href="http://fwbmc.com/" alt="" target="_blank">
<img src="/files/2012/09/fort-walton-beach-med-center.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.sacredheartemerald.org/" alt="" target="_blank">
<img src="/files/2012/09/sacred-heart-hospital-emerald-coast.png">
<span></span>
</a>
</li>
<li>
<a href="http://tchospital.com/" alt="" target="_blank">
<img src="/files/2012/09/twin-cities-hospital.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.selectspecialtyhospitals.com/company/locations/pensacola.aspx" alt="" target="_blank">
<img src="/files/2012/09/select-specialty-hospital.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.andalusiaregional.com/" alt="" target="_blank">
<img src="/files/2012/09/andalusia-regional-hospital.png">
<span></span>
</a>
</li>
<li>
<a href="http://careers.fmcna.com/about-us/locations.aspx" alt="" target="_blank">
<img src="/files/2012/09/fresenius-medical-care.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.davita.com/" alt="" target="_blank">
<img src="/files/2012/09/davita.png">
<span></span>
</a>
</li>
<li>
<a href="https://www.labcorp.com/wps/portal/findalab" alt="" target="_blank">
<img src="/files/2012/09/labcorp.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.questdiagnostics.com/home.html" alt="" target="_blank">
<img src="/files/2012/09/quest-diagnostics.png">
<span></span>
</a>
</li>
<li>
<a href="http://www.dwmmh.org/getpage.php?name=index" alt="" target="_blank">
<img src="/files/2012/09/DW.png">
<span></span>
</a>
</li>
<li class="clone">
<a href="http://www.ebaptisthealthcare.org/Homepage/" alt="" target="_blank">
<img src="/files/2012/09/baptist-healthcare.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.sacred-heart.org/" alt="" target="_blank">
<img src="/files/2012/09/sacred-heart-health-system.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://westfloridahospital.com/" alt="" target="_blank">
<img src="/files/2012/09/west-florida-hospital.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.ebaptisthealthcare.org/GulfBreezeHospital/" alt="" target="_blank">
<img src="/files/2012/09/baptist-healthcare1.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.srmcfl.com/" alt="" target="_blank">
<img src="/files/2012/09/santa-rosa-med-center.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.northokaloosa.com/pages/home.aspx" alt="" target="_blank">
<img src="/files/2012/09/north-okaloosa-med-center.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://fwbmc.com/" alt="" target="_blank">
<img src="/files/2012/09/fort-walton-beach-med-center.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.sacredheartemerald.org/" alt="" target="_blank">
<img src="/files/2012/09/sacred-heart-hospital-emerald-coast.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://tchospital.com/" alt="" target="_blank">
<img src="/files/2012/09/twin-cities-hospital.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.selectspecialtyhospitals.com/company/locations/pensacola.aspx" alt="" target="_blank">
<img src="/files/2012/09/select-specialty-hospital.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.andalusiaregional.com/" alt="" target="_blank">
<img src="/files/2012/09/andalusia-regional-hospital.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://careers.fmcna.com/about-us/locations.aspx" alt="" target="_blank">
<img src="/files/2012/09/fresenius-medical-care.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.davita.com/" alt="" target="_blank">
<img src="/files/2012/09/davita.png">
<span></span>
</a>
</li><li class="clone">
<a href="https://www.labcorp.com/wps/portal/findalab" alt="" target="_blank">
<img src="/files/2012/09/labcorp.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.questdiagnostics.com/home.html" alt="" target="_blank">
<img src="/files/2012/09/quest-diagnostics.png">
<span></span>
</a>
</li><li class="clone">
<a href="http://www.dwmmh.org/getpage.php?name=index" alt="" target="_blank">
<img src="/files/2012/09/DW.png">
<span></span>
</a>
</li></ul>
</div>
<a class="carousel-control left prev" href="#">‹</a>
<a class="carousel-control right next" href="#">›</a>
</div>
<span class="more-arrow"><a class="more" href="http://renalus.com/about-us/our-service-locations/" title="Learn more about our Service Locations">Learn more about our Service Locations</a></span>
<div class="our-partners-footer-wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="our-partners-footer"></div>
</div>
/**
* @author Gary Hussey
* @details an Expansion of Stéphane Roucheray's script
* @extends jquery
*/
(function($){
$.fn.icarousel = function(options){
var settings = {
'prev':'.prev',
'next':'.next',
'slides':'.slides',
'port':'.port',
'selector':this.selector
};
$.extend(settings,options);
$(this).each(function(index,el){
var carousel = $(el);
var slides = $(this).find('.slides');
var port = $(this).find('.port');
// set some required style
port.css({'overflow':'hidden'});
slides.css({'position':'relative','overflow':'hidden'});
if (slides.length > 0) {
var increment = function(){return $(slides).children().first().outerWidth(true)},
elmnts = $(slides).children(),
numElmts = elmnts.length,
sizeFirstElmnt = function(){return increment()},
shownInViewport = function(){return Math.round(port.width() / sizeFirstElmnt())},
firstElementOnViewPort = 1;
carousel.data('isAnimating',false)
$(slides).css('width',((numElmts*increment())*2) + "px");
elmnts.clone().appendTo(slides).each(function(index,el){
$(el).addClass('clone');
});
$(window).resize(function(){
(port.width() > increment()*numElmts) ? slides.find('.clone').hide() : slides.find('.clone').show();
$(slides).css('width',((numElmts*increment())*2) + "px");
});
$(this).find(settings.prev).click(function(e){
e.preventDefault();
if (!carousel.data('isAnimating')) {
if (firstElementOnViewPort == 1) {
$(slides).css('left', "-" + ((numElmts * sizeFirstElmnt()))+"px");
firstElementOnViewPort = numElmts;
}else {
firstElementOnViewPort--;
}
$(slides).animate({
left: "+=" + increment(),
y: 0,
queue: true
}, "swing", function(){carousel.data('isAnimating',false);});
carousel.data('isAnimating',true);
}
});
$(this).find(settings.next).click(function(e){
e.preventDefault();
if (!carousel.data('isAnimating')) {
if (firstElementOnViewPort > numElmts) {
firstElementOnViewPort = 2;
$(slides).css('left', "0px");
}
else {
firstElementOnViewPort++;
}
$(slides).animate({
left: "-=" + increment(),
y: 0,
queue: true
}, "swing", function(){carousel.data('isAnimating',false);});
carousel.data('isAnimating',true);
}
});
}
});
};
})(jQuery);
jQuery(document).ready(function($){
// Setup Homepage Slider
// set animations
$('#myCarousel').bind('slid',function(){
$(this).find('.item').each(function(index,el){
if($(el).hasClass('active'))$($('.carousel-nav a')[index]).addClass('active');
});
})
$('#myCarousel').bind('slide',function(){
$('.carousel-nav a').removeClass('active');
})
$('.carousel-nav a').click(function(e){
e.preventDefault();
$($(this).attr('href')).carousel(Number($(this).attr('rel')));
});
// Setup Homepage partners carousel
$('.icarousel').icarousel();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment