Infinate Carousel Problem
Hi
I've got an infinate jQuery carousel, which is working, however I need to make a couple of tweaks and I don't know where to start.
Below is the code for a visually simplified, but technically identical version:
Basically, I'm trying to acheive two things:
1. The script creates empty carousel items; these are visible in yellow when you scroll through the items by clicking on the blue squares. How can I remove these so that item '6' goes straight back to item '1', without the two emtpy list items in between?
2. At the moment two clicks allow you to see all 6 'real' squares, plus the two empty yellow ones. How can I make it so that it scrolls one list item at a time, rather than 4 at present?
Any help would be much appreciated.
Ta!
I've got an infinate jQuery carousel, which is working, however I need to make a couple of tweaks and I don't know where to start.
Below is the code for a visually simplified, but technically identical version:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(176),
visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
currentPage = 1,
pages = Math.ceil($items.length / visible);
// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
if (($items.length % visible) != 4) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
// 3. Set the left position to the first 'real' item
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
// 5. Bind to the forward and back buttons
$('a.back', this).click(function () {
return gotoPage(currentPage + 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage - 1);
});
// create a public interface to move to a specific page
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
$(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
});
</script>
<style type="text/css" media="screen">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 70%;
color: #FFFFFF;
line-height: 1.7em;
background-color: #970047;
margin: 0px;
padding: 0px;
}
p {
padding: 0px;
margin: 1.4em 0em 0em 0em;
}
#block-3 {
width: 100%;
background-repeat: repeat;
height: 300px;
float: left;
}
#block-3 #centre {
width: 778px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* CAROUSEL */
.infiniteCarousel {
width: 770px;
position: relative;
float: left;
}
.infiniteCarousel .wrapper {
width: 748px;
height: 500px;
overflow: auto;
position: absolute;
top: 16px;
left: -3px;
}
.infiniteCarousel .wrapper ul {
width: 9999px;
overflow: hidden;
list-style-type: none;
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
}
.infiniteCarousel ul li {
display:block;
float:left;
padding: 40px 0px 0px 0px;
margin: 0px 20px 0px -3px;
height: 73px;
width: 176px;
background-color: #FF0000;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}
.infiniteCarousel .arrow {
display: block;
height: 46px;
width: 25px;
background: blue;
text-indent: -999px;
position: absolute;
z-index: 100;
top: 37px;
cursor: pointer;
}
.infiniteCarousel .forward {
background-position: 25px 0px;
right: 0px;
}
.infiniteCarousel .back {
background-position: 0px 0px;
left: -28px;
}
.infiniteCarousel .empty {
background-color: #FFFF00;
}
li#confused {
background: url(../images/block-3/logos/confused.png);
}
li#ctm {
background: url(../images/block-3/logos/compare-the-market.png);
}
li#go-compare {
background: url(../images/block-3/logos/go-compare.png);
}
li#money-supermarket {
background: url(../images/block-3/logos/money-supermarket.png);
}
li#tesco-compare {
background: url(../images/block-3/logos/tesco-compare.png);
}
li#btq {
background: url(../images/block-3/logos/beat-that-quote.png);
}
</style>
</head>
<body>
<div id="block-3">
<div id="centre">
<div id="scroller">
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Basically, I'm trying to acheive two things:
1. The script creates empty carousel items; these are visible in yellow when you scroll through the items by clicking on the blue squares. How can I remove these so that item '6' goes straight back to item '1', without the two emtpy list items in between?
2. At the moment two clicks allow you to see all 6 'real' squares, plus the two empty yellow ones. How can I make it so that it scrolls one list item at a time, rather than 4 at present?
Any help would be much appreciated.
Ta!