Faire défiler des images en boucle

**helpperplexe** · 10/05/2023, 11h39

Bonjour,

J'ai réalisé, en html et CSS, un carrousel d'images
coulissantes.

Elles défilent bien automatiquement, l'une après l'autre,
de droite à gauche, mais lorsqu'elles ont toutes défilé,
elles se rembobinent.

Or, je voudrais que le défilement tourne en boucle.

y-a-t'il un moyen de faire ça ?

Merci d'avance.

**NoSmoking** · 11/05/2023, 16h44

Bonjour et bienvenue sur DVP.

Or, je voudrais que le défilement tourne en boucle.

y-a-t'il un moyen de faire ça ?

On ne sait pas comment tu as réalisé cela mais quoiqu'il arrive c'est tout à fait réalisable en modifiant la partie HTML en ajoutant en fin de liste d'images l'image de début :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="slide-cadre">
  <ul class="slide-liste">
    <li><img src="images/image_001.jpg" alt=""></li>
    <li><img src="images/image_002.jpg" alt=""></li>
    <li><img src="images/image_003.jpg" alt=""></li>
    <li><img src="images/image_004.jpg" alt=""></li>
    <!-- reprise de la première image -->
    <li><img src="images/image_001.jpg" alt=""></li>
  </ul>
</div>

Le principe est donc d'ajouter en fin de liste la première image et une fois celle-ci afficher replacer la liste au début.

En utilisant une règle @keyframes, il suffit de placer judicieusement les paliers

Exemple pour 4 images avec un temps de pause par image de 2 secondes, un temps de déplacement d'une image à la suivante de 1 seconde, soit au total pour 4 images, on ne tient pas compte de l'image ajoutée en fin de slide, une durée d'animation de 12 secondes.

Chaque seconde représente donc 100% / 12 = 8.333% de l'animation.

Le CSS qui en résulte est le suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.anim {
  animation: slide-image 12s infinite;
}
@keyframes slide-image {
  0%, 16.67% {
    transform: translate3d(0,0,0);
  }
  25%, 41.67% {
    transform: translate3d(-100%,0,0);
  }
  50%, 66.67% {
    transform: translate3d(-200%,0,0);
  }
  75%, 91.67% {
    transform: translate3d(-300%,0,0);
  }
  100% {
    transform: translate3d(-400%,0,0);
  }
}

Tu peux regarder le rendu sur, mis au « propre » pour l'occasion :

↪ Slide avec défilement en boucle

**helpperplexe** · 12/05/2023, 21h19

Merci pour ton aide mais j'ai un souci.

Je ne sais pas comment bien insérer ta portion de html dans mon code html que tu trouveras ci-dessous.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Juizy Slideshow - Full CSS3/HTML5 slideshow</title>
 
    <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet' type='text/css'>
 
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
 
    <span id="sl_play" class="sl_command">&nbsp;</span>
    <span id="sl_pause" class="sl_command">&nbsp;</span>
    <span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i4" class="sl_command sl_i">&nbsp;</span>
 
    <h2 class="sread">The slideshow</h2>
 
 
    <section id="slideshow">
 
        <a class="commands prev commands1" href="#sl_i4" title="Go to last slide">&lt;</a>
        <a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">&gt;</a>
        <a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide">&lt;</a>
        <a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">&gt;</a>
        <a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide">&lt;</a>
        <a class="commands next commands3" href="#sl_i1" title="Go to first slide">&gt;</a>
 
        <a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
        <a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>
 
        <div class="container">
            <div class="c_slider"></div>
            <div class="slider">
                <figure>
                    <img src="img/image1.jpg" alt="" width="640" height="310" />
 
                </figure><!--
                --><figure>
                    <img src="img/image2.jpg" alt="" width="640" height="310" />
 
                </figure><!--
                --><figure>
                    <img src="img/image3.jpg" alt="" width="640" height="310" />
 
                </figure><!--
            </div>
        </div>
 
        <span id="timeline"></span>
 
        <ul class="dots_commands">
            --><li><a title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
            --><li><a title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
            --><li><a title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
 
        </ul>
 
    </section>
 
 
    </section>
    <footer>
</body>
</html>

**NoSmoking** · 17/05/2023, 19h28

Je vois que tu as trouvé un « slideshow » qui date un peu mais qui est des plus réussi.

Je remets les liens qui valent le détour

:

CSS3 – Créer un slideshow automatique et contrôlable
Juizy slideshow Direct à la démo

Je ne sais pas comment bien insérer ta portion de html

tu n'as pas grand chose à faire sauf à rajouter la même image que la première dans ton conteneur <div class="slider">.
Donc pour 3 images :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slider">
  <figure>
    <img src="img/image1.jpg" alt="" width="640" height="310" />
  </figure><!--
  --><figure>
    <img src="img/image2.jpg" alt="" width="640" height="310" />
  </figure><!--
  --><figure>
    <img src="img/image3.jpg" alt="" width="640" height="310" />
  </figure><!--
  --><figure>
    <img src="img/image1.jpg" alt="" width="640" height="310" />
  </figure><!--
</div>

Attention tu as un <!-- qui traine et qui pourri la suite de ton code HTML.
Ces éléments sont là pour supprimer les « whitespace » générés par les élément inline, il existe aujourd'hui d'autres techniques.
• Explication : Espace entre éléments « inline ».

Revenons au CSS, il te faut savoir précisément combien d'images tu veux présenter car pas mal de paramètres en dépendent.

Pour commencer toutes les déclarations préfixées, -webkit-, -moz-, -ms-, -o-, peuvent être supprimées ce qui allège le code.
• La règle @keyframes slider doit être reprise pour tenir compte du nombre d'images présentes
• La largeur du l'élément <div class="slider"> doit être adapté à l'ajout d'une image, width = nbImage * 100%.

Il devrait y avoir d'autres ajustement qui concerne les autres fonctionnalités mais en l'état tu devrais déjà avoir le défilement en boucle.

Encore une fois beau travail de la part de Geoffrey Crofte et cela il y a plus de 10 ans.

**helpperplexe** · 18/05/2023, 12h40

Bonjour,
Merci une nouvelle fois pour ton aide et ta patience.
J'ai tenté -laborieusement- de suivre tes préconisations
mais c'est toujours pas gagné, car le résultat n'est pas
au rendez-vous.

Voici le code problématique :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Juizy Slideshow - Full CSS3/HTML5 slideshow</title>
 
    <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet' type='text/css'>
 
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
 
    <span id="sl_play" class="sl_command">&nbsp;</span>
    <span id="sl_pause" class="sl_command">&nbsp;</span>
    <span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
    <span id="sl_i4" class="sl_command sl_i">&nbsp;</span>
 
 
    <h2 class="sread">The slideshow</h2>
 
 
    <section id="slideshow">
 
        <a class="commands prev commands1" href="#sl_i4" title="Go to last slide">&lt;</a>
        <a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">&gt;</a>
        <a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide">&lt;</a>
        <a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">&gt;</a>
        <a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide">&lt;</a>
        <a class="commands next commands3" href="#sl_i1" title="Go to first slide">&gt;</a>
 
        <a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
        <a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>
 
        <div class="slider">
            <figure>
              <img src="img/image1.jpg" alt="" width="640" height="310" />
            </figure><!--
            --><figure>
              <img src="img/image2.jpg" alt="" width="640" height="310" />
            </figure><!--
            --><figure>
              <img src="img/image3.jpg" alt="" width="640" height="310" />
            </figure><!--
            --><figure>
              <img src="img/image1.jpg" alt="" width="640" height="310" />
            </figure><!--
          </div>
 
 
 
        <span id="timeline"></span>
 
        <ul class="dots_commands">
            --><li><a title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
            --><li><a title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
            --><li><a title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
 
 
        </ul>
 
    </section>
 
 
    </section>
    <footer>
</body>
</html>

**NoSmoking** · 18/05/2023, 16h58

mais c'est toujours pas gagné, car le résultat n'est pas
au rendez-vous.

pas toutes, il te reste une erreur dans ton HTML toujours un <!-- qui traine, regarde la coloration syntaxique du code que tu viens de mettre.

Concernant l'animation avec trois images elle devrait ressembler à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#slideshow .slider {
  animation: slide-boucle 24s ease infinite 0s;
}
@keyframes slider {
  0%, 25% {
    transform: translate(0,0);
  }
  33.33%, 58.33% {
    transform: translate(-100%,0);
  }
  66.67%, 91.67% {
    transform: translate(-200%,0);
  }
  100% {
    transform: translate(-300%,0);
  }
}

Faire défiler des images en boucle

CSS

Vue hybride

Discussions similaires

Partager

Partager