Naviguer avec des fèches
Victor_Hay
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Je créer un site personnel regroupant des courts métrages.
Sur ce site, je classe les différents courts-métrages dans des catégories. Une de ces catégories contient trop de miniatures pour tenir en une seule « ligne ».
J’aimerais pouvoir aligner toutes les miniatures horizontalement et naviguer dans cette ligne avec des flèches comme sur Netflix, sans que le reste du site ne bouge avec.
Voilà le script HTML:
Et le CSS:
Pouvez-vous m’aider?
Merci d’avance
Je créer un site personnel regroupant des courts métrages.
Sur ce site, je classe les différents courts-métrages dans des catégories. Une de ces catégories contient trop de miniatures pour tenir en une seule « ligne ».
J’aimerais pouvoir aligner toutes les miniatures horizontalement et naviguer dans cette ligne avec des flèches comme sur Netflix, sans que le reste du site ne bouge avec.
Voilà le script HTML:
<h2>Catalogue LES HAY Production</h2>
<a href="power rangers.html"><img class=div5 src="power affiche.jpg" alt="Affiche de Power Rangers Omega"></a>
<a href="josephine.html"><img class=div5 src="josephine image.jpg" alt="affiche de Joséphine Ange Gardien sauvetage du Père-Noël"></a>
<a href="auguste.html"><img class=div5 src="affiche auguste.jpg" alt="Affiche la Légende du Roi Auguste"></a>
<a href="esprits.html"><img class=div5 src="esprit affiche.jpg" alt="Affiche des Esprits sont là"></a>
<a href="l'aventure de peter carson.html"><img class=div5 src="affiche peter.jpg" alt="Afficge de L'aventure de Peter Carson"></a>
<a href="Scaffary.html"><img class=div5 src="scaffary affiche.jpg" alt="affiche Scaffary 1"></a>
<a href="Scaffary 2.html"><img class=div5 src="affiche Scaffary 2.jpg" alt="affiche de Scaffary 2"></a>
Et le CSS:
.
div5{
width: 200px;
border: 1px solid white;
margin-left: 30px;
}
Pouvez-vous m’aider?
Merci d’avance
A voir également:
- Chez elle, bérénice navigue sur le web avec sa tablette. soudain, la page d’erreur ci-dessous s’affiche dans son navigateur. sa sœur a le même problème sur son ordinateur portable connecté au même réseau que bérénice. plusieurs raisons peuvent expliquer le problème rencontré par bérénice, lesquelles ?
- Se connecter à gmail sur téléphone - Guide
- Nettoyer ordinateur portable lent - Guide
- Comment réinitialiser un ordinateur portable - Guide
- Comment supprimer une page sur word - Guide
- Probleme son ordinateur - Guide
1 réponse
Bonjour,
Pour cela, tu vas avoir besoin de javascript.
Il existe de nombreux scripts déjà codé pour réaliser cela.. il te suffit de chercher avec le mot clé "carousel" ou "slideshow" ou meme "slider"
Tu trouveras des trucs comme par exemple : https://woocommerce.com/flexslider/
ou http://css-tricks.github.io/AnythingSlider/#&panel1-1&panel2-5
ou encore https://kenwheeler.github.io/slick/
Pour cela, tu vas avoir besoin de javascript.
Il existe de nombreux scripts déjà codé pour réaliser cela.. il te suffit de chercher avec le mot clé "carousel" ou "slideshow" ou meme "slider"
Tu trouveras des trucs comme par exemple : https://woocommerce.com/flexslider/
ou http://css-tricks.github.io/AnythingSlider/#&panel1-1&panel2-5
ou encore https://kenwheeler.github.io/slick/
Ce qui me conviendrait le mieux serait le "multiple items" de https://kenwheeler.github.io/slick/ .
Mais je ne sais pas quel est le langage utilisé (html, css, JS) ni ce qu'il faut modifier dans mes anciens fichiers. Est ce que vous pourriez faire une démonstration avec mon code ??
https://kenwheeler.github.io/slick/#getting-started
Voila mon fichier html:
<!DOCTYPE html> <html> <head> <title>Accueil-NETFLHAYX</title> <meta charset=utf-8> <link rel=stylesheet href=style.css> <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <link rel="icon" href="logo onglet.png"> </head> <body> <div id=bandeau> <img class="div0" src="bandeau.png" alt="bandeau supérieur Netflhayx"> <a href="Accueil.html"><div class=div></div></a> </div> <nav> <div class=container> <button onclick="slide()"></button> </div> </nav> <div class="search hide"> <input type="search" id="recherche" value="" placeholder="Rechercher" onchange="ouvrirPage()"> </div> <script src="Recherche.js"></script> <div id=conteneur> <img class=div1 src="1" alt="miniature Scaffary 2"> <a href="Lecture Scaffary 2.html"><img id=pic1 src="bouton lecture.png" alt="lecture recomendation"></a> <a href="Scaffary 2.html"><img id=pic2 src="plus d'infos.png" alt="plus d'informations"></a> <img id=pic3 src="Scaffary 2 logo.png" alt="logo de Scaffary 2"> </div> <div id=propositions> <h2>Les plus gros succès</h1> <a href="Scaffary 2.html"><img class=div4 src="Scaffary 2 top.png" alt="miniature Scaffary 2 top 1"></a> <a href="Scaffary.html"><img class=div4 src="Scaffary 1 top.png" alt="miniature Scaffary Top 2"></a> <a href="l'aventure de peter carson.html"><img class=div4 src="Peter carson top.png" alt="miniature de l'aventure de Peter Carson top 3"></a> <a href="josephine.html"><img class=div4 src="Josephine top.png" alt="miniature de Joséphine Ange Gardien Sauvetage du Père Noël top 4"></a> <h2>L'origine</h2> <a href="power rangers.html"><img class=div5 src="power affiche.jpg" alt="Affiche de Power Rangers Omega"></a> <h2>Collection Scaffary</h2> <a href="Scaffary.html"><img class=div5 src="scaffary affiche.jpg" alt="affiche Scaffary 1"></a> <a href="Scaffary 2.html"><img class=div5 src="affiche Scaffary 2.jpg" alt="affiche de Scaffary 2"></a> <h2>Catalogue LES HAY Production</h2> <div class="multiple items"> <div><a href="power rangers.html"><img class=div5 src="power affiche.jpg" alt="Affiche de Power Rangers Omega"></a></div> <div><a href="josephine.html"><img class=div5 src="josephine image.jpg" alt="affiche de Joséphine Ange Gardien sauvetage du Père-Noël"></a></div> <div><a href="auguste.html"><img class=div5 src="affiche auguste.jpg" alt="Affiche la Légende du Roi Auguste"></a></div> <div><a href="esprits.html"><img class=div5 src="esprit affiche.jpg" alt="Affiche des Esprits sont là"></a></div> <div><a href="l'aventure de peter carson.html"><img class=div5 src="affiche peter.jpg" alt="Afficge de L'aventure de Peter Carson"></a></div> <div><a href="Scaffary.html"><img class=div5 src="scaffary affiche.jpg" alt="affiche Scaffary 1"></a></div> <div><a href="Scaffary 2.html"><img class=div5 src="affiche Scaffary 2.jpg" alt="affiche de Scaffary 2"></a></div> </div> <h2>Exclusivités Netflhayx</h2> <a href="betisier 1.html"><img class=div5 src="affiche betisier 1.jpg" alt="affiche du bêtiser de scaffary 1"></a> <a href="betisier 2.html"><img class=div5 src="affiche betisier scaffary 2.jpg" alt="affiche de bêtiser de Scaffary 2"></a> </div> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.multiple items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); }); </script> </body> </html>Est ce que tout vous parait correcte ?
Ton JS est faut
$('.multiple items').slick({tu as utilisés DEUX class pour ta div
Donc, soit tu ne cible que la class multiple .. soit la class items ... soit les deux
$('.multiple').slick({$('.items').slick({$('.multiple.items').slick({Teste ça ... et si ça ne fonctionne toujours pas :
- Affiche la console de ton navigateur et regarde si il y a des messages d'erreurs ( fais nous en une capture d'écran )
NB: Tu as bien téléchargé les fichiers de slick et tu les as mis dans le dossier de ta page html ?$