Carousel CSS/Javascript
Résolu
zebulon2503
Messages postés
1228
Date d'inscription
Statut
Membre
Dernière intervention
-
zebulon2503 Messages postés 1228 Date d'inscription Statut Membre Dernière intervention -
zebulon2503 Messages postés 1228 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Carousel CSS/Javascript
- Telecharger javascript - Télécharger - Langages
- Fond d'écran carousel ✓ - Forum Webmastering
- Désactiver carousel xiaomi ✓ - Forum Xiaomi
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
- Javascript echo ✓ - Forum PHP
7 réponses
ce que tu^peut faire c'est mettre des miniature de tes images les unes a coté des autres, et à l'aide d'un :over dans ton css tu agrandi l'imagette, comme ca lorsque ton pointeur quittera l'aimagette elle redeviendra à la même taille.
Avec les on mouseover et onmouseout tu peut faire la même chose
Avec les on mouseover et onmouseout tu peut faire la même chose
Je connais ca, mais là j'ai pas mal de photos et j'aimerais faire une espèce de liste déroulante pour ne pas toutes les afficher (ce qui prendrait pas mal de place).
Une autre idée ?
Merci quand même pour la proposition :-)
Une autre idée ?
Merci quand même pour la proposition :-)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut
Voici un bout du code de ma page, avec le carousel intégré.
Il faut rajouter les script requis, que tu télécharges sur le site ci dessus, et configurer l'affichage de tes images comme ci dessous.
En espèrant que ca marchera.
A+
Voici un bout du code de ma page, avec le carousel intégré.
Il faut rajouter les script requis, que tu télécharges sur le site ci dessus, et configurer l'affichage de tes images comme ci dessous.
En espèrant que ca marchera.
A+
<!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" xml:lang="en-us">
<head>
<title>Titre de ta page</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
</head>
<body>
<div id="wrap" align="center">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="images/image1.jpg" title="image1"><img src="images/image1.jpg" width="70" height="70" alt=""></a></li>
<li><a href="images/image2.jpg" title="image2"><img src="images/image2.jpg" width="70" height="70" alt=""></a></li>
</ul>
</div>
</body>
</html>