Naviguer avec des fèches

Fermé

Victor_Hay Messages postés 3 Date d'inscription dimanche 14 février 2021 Statut Membre Dernière intervention 20 février 2021 - 14 févr. 2021 à 00:38
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 20 févr. 2021 à 23:27

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:

<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 ?
Nettoyer ordinateur portable lent - Guide
Erreur 0x80070643 - Accueil - Windows
Comment réinitialiser un ordinateur portable - Guide
Comment supprimer une page sur word - Guide
Traduire une page web - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
14 févr. 2021 à 09:34

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/

Victor_Hay Messages postés 3 Date d'inscription dimanche 14 février 2021 Statut Membre Dernière intervention 20 février 2021
20 févr. 2021 à 19:06

Merci beaucoup.
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 ??

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Victor_Hay Messages postés 3 Date d'inscription dimanche 14 février 2021 Statut Membre Dernière intervention 20 février 2021
20 févr. 2021 à 20:49

Il suffit d'appliquer ce qui est indiqué dans la doc
https://kenwheeler.github.io/slick/#getting-started

Victor_Hay Messages postés 3 Date d'inscription dimanche 14 février 2021 Statut Membre Dernière intervention 20 février 2021 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
20 févr. 2021 à 23:03

Désolé de vous demander encore une fois de m'aider mais une fois que tout ai fait comme marqué ça ne fonctionne pas. Certainement que j'ai fait une erreur ou que je n'ai pas modifié le nom d'un fichier ou autre.
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 ?

Déjà,
Ton JS est faut

 $('.multiple items').slick({

tu as utilisés DEUX class pour ta div

 <div class="multiple items">

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 ?$

Discussions similaires

[Navigation Internet] Trace de navigation

Annuaire portable gratuit à partir d'un nom