Naviguer avec des fèches

Signaler
Messages postés
3
Date d'inscription
dimanche 14 février 2021
Statut
Membre
Dernière intervention
20 février 2021
-
Messages postés
31489
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 février 2021
-
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

1 réponse

Messages postés
31489
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 février 2021
3 281
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/


Messages postés
3
Date d'inscription
dimanche 14 février 2021
Statut
Membre
Dernière intervention
20 février 2021

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 ??
Messages postés
31489
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 février 2021
3 281 >
Messages postés
3
Date d'inscription
dimanche 14 février 2021
Statut
Membre
Dernière intervention
20 février 2021

Il suffit d'appliquer ce qui est indiqué dans la doc
https://kenwheeler.github.io/slick/#getting-started
Messages postés
3
Date d'inscription
dimanche 14 février 2021
Statut
Membre
Dernière intervention
20 février 2021
>
Messages postés
31489
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 février 2021

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 ?
Messages postés
31489
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 février 2021
3 281 >
Messages postés
3
Date d'inscription
dimanche 14 février 2021
Statut
Membre
Dernière intervention
20 février 2021

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