Beste,
IK had ooit een script gezien die het volgende deed:
hij liet ongeveer 5 verschillende images zien, en na een paar seconde scrollde deze naar links en kwamen er weer nieuwe images te staan, en dit liep zo de hele tijd rond.
Maar ik kan deze code niet meer terugvinden helaas. Dus nu hoop ik dat een van jullie weet welke ik bedoel en hoe ik deze zou kunnen vinden.
Ik hoop dat het zo duidelijk genoeg is.
Alvast vriendelijk bedankt.
Ik weet welke je bedoelt. Wel zeer moeilijk te combineren omdat het zijn eigen css style heeft.
Hier de link:
Ik heb hem inmiddels gevonden. Nu zit ik zelf echter met het probleem dat de plaatjes soms wat groter zijn dan anders. Waardoor hij soms maar 1 stukje laat zien, etc.
Nu wil ik dat hij gewoon kijkt of ze er allemaal mooi in passen en anders ervoor zorgt dat ze er mooi inpassen Dus wanneer ze niet meer goed pasen ze weg worden gelaten en in de volgende slide te zien zijn.
Dit is het aangepaste script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Automatic Infinite Carousel</title>
<style type="text/css" media="screen">
.infiniteCarousel {
width: 960px;
}
.infiniteCarousel .wrapper {
width: 960px;
overflow: hidden;
height: 200px;
margin: 0px;
padding: 0px;
}
.infiniteCarousel .wrapper ul {
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.infiniteCarousel ul li {
min-width: 180px;
float:left;
padding: 6px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
(function () {
$.fn.infiniteCarousel = function () {
function repeat(str, n) {
return new Array( n + 1 ).join(str);
}
return this.each(function () {
// magic!
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul').width(9999),
$items = $slider.find('> li'),
$single = $items.filter(':first')
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
/* TASKS */
// 1. pad the pages with empty element if required
if ($items.length % visible != 0) {
// pad
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. create the carousel padding on left and right (cloned)
$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');
// 3. reset scroll
$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 == last page - then reset position
if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
} else if (page == 0) {
page = pages;
$wrapper.scrollLeft(singleWidth * visible * pages);
}
currentPage = page;
});
}
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
$(this).bind('next', function () {
gotoPage(currentPage + 1);
});
});
};
})(jQuery);
$(document).ready(function () {
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
var autoscrolling = true;
$('.infiniteCarousel').infiniteCarousel().mouseover(function () {
autoscrolling = false;
}).mouseout(function () {
autoscrolling = true;
});
setInterval(function () {
if (autoscrolling) {
$('.infiniteCarousel').trigger('next');
}
}, 5000);
});
</script>
</head>
<body>
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li><a href="http://www.flickr.com/photos/remysharp/3047035327/" title="Tall Glow"><img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="138" width="360" alt="Tall Glow" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047872076/" title="Wet Cab"><img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg" height="138" width="180" alt="Wet Cab" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047871878/" title="Rockefella"><img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg" height="138" width="180" alt="Rockefella" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047034929/" title="Chrysler Reflect"><img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg" height="138" width="180" alt="Chrysler Reflect" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047871624/" title="Chrysler Up"><img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg" height="138" width="180" alt="Chrysler Up" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047034661/" title="Time Square Awe"><img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg" height="138" width="180" alt="Time Square Awe" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047034531/" title="Wonky Buildings"><img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg" height="138" width="180" alt="Wonky Buildings" /></a></li>
<li><a href="http://www.flickr.com/photos/remysharp/3047034451/" title="Leaves of Fall"><img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg" height="138" width="180" alt="Leaves of Fall" /></a></li>
</ul>
</div>
</div>
</body>
</html>Heb je nog geen account? Registreer je nu en word deel van onze community!