Bonjour à toutes et à tous,
Comme le titre l'indique, j'ai besoin de trois carrousel de défilement d'images sur ma page.
J'ai trouvé le carrousel qu'il me faut, je l'ai adapté avec les css, il tourne sous Mootools.
Ce que je pense faire, c'est faire trois new SlideItMoo1({.... définition des variables pour le slider1, idem pour le 2 et le 3. Par contre je vais être obligé de dupliquer aussi les CSS le new(.. définit le nom des div de définition des scrollers en dur, est-ce la bonne solution ?
Le code CSS
Comme le titre l'indique, j'ai besoin de trois carrousel de défilement d'images sur ma page.
J'ai trouvé le carrousel qu'il me faut, je l'ai adapté avec les css, il tourne sous Mootools.
Ce que je pense faire, c'est faire trois new SlideItMoo1({.... définition des variables pour le slider1, idem pour le 2 et le 3. Par contre je vais être obligé de dupliquer aussi les CSS le new(.. définit le nom des div de définition des scrollers en dur, est-ce la bonne solution ?
<!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=iso-8859-1" />
<title>SlideItMoo - MooTools 1.2 horizaontal carousel</title>
<link rel="stylesheet" type="text/css" href="stylesheet/horizontal.css" />
<script language="javascript" type="text/javascript" src="script/mootools-core-1.3.1-full-nocompat.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.2-mootools-1.3.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:3,
elemsSlide:1,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5,
onChange: function(index){
}
});
}
});
</script>
</head>
<body>
<div class="container">
<!--thumbnails slideshow begin-->
<div id="SlideItMoo_outer">
<div class="SlideItMoo_back"><!--slide back button--></div>
<div id="SlideItMoo_inner">
<div id="SlideItMoo_items">
<div class="SlideItMoo_element">
<a href="gallery/full/address_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/address_128.jpg" /></a>
Nam porta tellus ac urna
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/ads_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/ads_128.jpg" /></a>
Praesent pellentesque eros nec nisl
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/calendar_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/calendar_128.jpg" /></a>
Vestibulum eleifend scelerisque purus
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/comment_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/comment_128.jpg" /></a>
Felis nulla iaculis lacus
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/home_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/home_128.jpg" /></a>
Quisque neque. Donec quam ante, pulvinar vitae
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/mail_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/mail_128.jpg" /></a>
Suspendisse sodales turpis. Aliquam lectus
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/news_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/news_128.jpg" /></a>
Praesent pellentesque eros nec nisl
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/rss2_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/rss2_128.jpg" /></a>
Nam porta tellus ac urna
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/search_512.jpg" rel="vidbox" title="">
<img src="gallery/thumb/search_128.jpg" /></a>
Praesent pellentesque eros nec nisl
</div>
<div class="SlideItMoo_element">
<a href="gallery/full/sign_512.jpg"rel="vidbox" title="">
<img src="gallery/thumb/sign_128.jpg" /></a>
Vestibulum eleifend scelerisque purus
</div>
</div>
</div>
<div class="SlideItMoo_forward"><!--slide forward button--></div>
</div>
</div>
</body>
</html>
Le code CSS
/* ----------------IMAGE SLIDER------------- */
#SlideItMoo_outer {
width:510px;
margin:10px auto 10px;
display:block;
position:relative;
padding:0px 10px 0px;
background-color: #FFF;
border: 1px solid #333;
}
/* create custom forward-backward buttons for this container */
#SlideItMoo_outer .SlideItMoo_forward,
#SlideItMoo_outer .SlideItMoo_back{
display:block;
position:absolute;
cursor:pointer;
width:25px;
height:200px;
bottom:0px;
right:5px;
background:url(../images/slideitmoo_forward.png) no-repeat center;
}
#SlideItMoo_outer .SlideItMoo_back {
left:5px;
background:url(../images/slideitmoo_back.png) no-repeat center;
}
/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_inner{
position:relative ;
overflow:hidden ;
width:474px ; /* set a display width to make the slider look good in case js is disabled */
margin:0px auto 0px;
padding:10px 0px 10px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items {
display:block;
position:relative;
font-family: Helvetica, Arial;
}
/* single element design */
#SlideItMoo_items div.SlideItMoo_element {
display:block;
position:relative;
float:left;
margin:0px 15px 0px;
font-size:11px;
width:128px;
text-align:center;
color:#666;
font-family: Helvetica, Arial;
}
#SlideItMoo_items a { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:#333333; padding:2px; }
#SlideItMoo_items a img{ border:none; }