-
-
Save garyhussey/89120d690572de5152f7 to your computer and use it in GitHub Desktop.
jQuery Plugin for Infinite carousel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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