Supprimer un élément d'un slider décaler les suivants
Bonjour,
J'essaye de créer un slider tout simple en javascript qui est un slider vertical censé faire défiler des éléments verticalement, vert le haut.
Cependant je souhaiterai qu'à chaque défilement de slide le premier élément (donc celui qui vient de défiler) soit automatiquement supprimé. Le problème c'est que lorsque je supprime cet élément les élements suivants sont déplacés vert le haut, comme pour combler la place disponible libérée par l'élément supprimé.
L'élément suivant l'élément supprimé prend donc sa place, ce que je ne souhaite pas.
Un peu de code sera plus parlant...
Le code html et javascript:
Code:
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="container">
<ul>
<li>
<p class="paragraph">Du texte</p>
</li>
<li>
<p class="paragraph">Un texte</p>
</li>
<li>
<p class="paragraph">Et un texte</p>
</li>
</ul>
</div>
<button id="bouton">Run</button>
<script>
var bouton = document.getElementById('bouton');
bouton.onclick = function() {
var container = document.getElementById('container'),
ul = container.firstElementChild,
height = ul.offsetHeight,
currentIndex = 0;
ul.style.top = 0;
var animation = setInterval(function() {
currentIndex += 1;
ul.style.top = "-" + (currentIndex * height) + '%';
ul.removeChild(ul.children[0]);
}, 2000);
};
</script>
</body>
</html> |
Le code css:
Code:
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
| #container
{
width: 400px;
height: 100px;
overflow: hidden;
}
#container > ul
{
height: 100px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
transition: 0.5s top;
-webkit-transition: 0.5s top;
-moz-transition: 0.5s top;
-ms-transition: 0.5s top;
-o-transition: 0.5s top;
}
#container > ul > li
{
float: left;
width: 400px;
height: 100px;
margin: 0;
padding: 0;
}
.paragraph
{
display: block;
width: 100%;
background-color: #1ff;
height: 100px;
margin: 0;
padding: 0;
} |
Dans le scénario que je souhaiterai obtenir je visualiserai la première slide affichant "du texte" qui serait ensuite supprimée, puis je verai "un texte", (supprimé à son tour) puis "et un texte".
Actuellement je vois "du texte" puis "et un texte" sans voir "un texte", car se dernier à été "remonté" lors de la suppression de la première slide.
Comment pourrais je réaliser cela ?
En espérant avoir été suffisamment clair dans mes propos et que quelqu'un voudra bien prendre la peine de lire et de me répondre.
Veuillez m'excuser ou me le faire remarquer si j'ai été un peu confus dans mes explications.
Bonne journée ;)
