Créer un carousel à multiples items

5 avril 2021 à 17:32:39

Bonjour,

Ca fait un moment que je cherche à créer un carousel multiple items.

G pu mettre un nom sur ce que je cherchais grâce au site que je vous met ci-dessous:

https://kenwheeler.github.io/slick/

Ce site explique ce qu'il faut faire mais pour ma part ça ne fonctionne pas (je dois certainement faire une erreur mais je n'arrive pas à la trouver et l'anglais n'est pas mon fort.

Voila ce que j'aimerais mettre en forme.

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

.
div5{
  width: 200px;
  border: 1px solid white;
  margin-left: 30px;
}

Si quelqu'un sait comment faire je suis preneur.

Merci

AbcAbc6

5 avril 2021 à 18:25:21

Bonjour, c'est surtout que le lien que tu donnes utilise du JavaScript et plus particulièrement la librairie JQuery. L'utilises-tu?

Dans ton code (qui est un début) tu as une erreur, pas d'espace dans les noms de fichiers .html comme pour les images.

Je préfère celui-ci que je trouve plus facile, en full CSS.

https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Sur quoi bloque tu?

VictorHay2

9 juin 2021 à 11:19:08

AbcAbc6 a écrit:

Bonjour, c'est surtout que le lien que tu donnes utilise du JavaScript et plus particulièrement la librairie JQuery. L'utilises-tu?

Dans ton code (qui est un début) tu as une erreur, pas d'espace dans les noms de fichiers .html comme pour les images.

Je préfère celui-ci que je trouve plus facile, en full CSS.

https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Sur quoi bloque tu?

Bonjour,

Ca fait un bout de temps.

Ce qui me gêne avec ce lien c qu'il ne présente qu'une image par slide alors que moi il en faudrait plusieurs.

AbcAbc6

9 juin 2021 à 11:55:19

Bonjour, rien ne t'empêche de l'adapter.

Tu peux indiquer plusieurs images dans la balises <figure>.

VictorHay2

9 juin 2021 à 23:09:20

AbcAbc6 a écrit:

Bonjour, rien ne t'empêche de l'adapter.

Tu peux indiquer plusieurs images dans la balises <figure>.

J'ai commencé à suivre le "tuto" et jusqu'ici tout va bien.

Seulement je me pose une question, cette animation est faire pour être automatique mais moi je ne le veux pas. De plus, mes images sont en réalité des liens, mais lorsqu'elles sont placées en image de fond, les liens ne fonctionneront plus. Dernier point, j'aimerais pouvoir défiler d'une image par une image, par exemple commencer avec 5 et à chaque fois que l'on appuie sur une flèche, l'image de début sort et celle qui suit apparait et ainsi de suite. Comment pourrais-je faire ?

AbcAbc6

10 juin 2021 à 3:51:43

Bonsoir, pour créer une animation au clique sur un lien, tu peux utiliser la pseudo class :target. Mais il faudrait un lien par image puisque un lien cible une seule image.

Pour changer la position des images sur un seul lien, je ne vois que le JS.

Je t'ai fait un début d'une démo, à toi de continuer. Si Le JS te convient je déplacerais le sujet dans le forum JS.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>slider</title>
        <style>
            .container {
                display: flex;
                align-items: center;
            }
            .slider {
                width: 900px;
                margin: 0 auto;
                overflow: hidden;
                display: flex;
            }
            .btn {
                font-size: 10rem;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <a   id="previous" class="btn"> &lt; </a>
            <div class="slider" id="slider">
                <img src="https://picsum.photos/id/237/300/300" alt="">
                <img src="https://picsum.photos/id/345/300/300" alt="">
                <img src="https://picsum.photos/id/954/300/300" alt="">
                <img src="https://picsum.photos/id/100/300/300" alt="">
                <img src="https://picsum.photos/id/279/300/300" alt="">
                <img src="https://picsum.photos/id/842/300/300" alt="">
                <img src="https://picsum.photos/id/1000/300/300" alt="">
                <img src="https://picsum.photos/id/864/300/300" alt="">
                <img src="https://picsum.photos/id/257/300/300" alt="">
                <img src="https://picsum.photos/id/1000/300/300" alt="">
            </div>
            <a   id="next" class="btn"> &gt; </a>

        </div>
        <script>
            const avance = () => {
                let pas = 300;
                let scrollActuelle = slider.scrollLeft;
                if (scrollActuelle === 2100) {
                    slider.scrollLeft = 0;
                } else {
                    slider.scrollLeft = pas + scrollActuelle;
                }
            };


            const next = document.getElementById('next');
            const slider = document.getElementById('slider');

            next.addEventListener('click', avance);

        </script>
    </body>
</html>

-
Edité par AbcAbc6 10 juin 2021 à 3:54:39