Slider responsive css

Bonjour,
J'ai ajouté un slider sur mon site internet, et j'aimerai que celui-ci soit responsive.
Mon problème est que ma première slide apparait correctement, en revanche, la deuxième se place en dessous (elle est invisible lorsque la première slide est en place)mais du coup lors de mon décalage vers la gauche la slide n°2 n'apparait pas (puisqu'elle est en dessous)... Comment la mettre a côté pour qu'elle apparaisse au défilement?

Merci

Code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="slider">
<ul>
<?php
$reponse=$bdd->query('SELECT * FROM avis');
while ($donnees = $reponse->fetch())
{
?>
 
<li>
<div class="slider-container">
<p>
<?php echo $donnees['texte'];
		?><br><br> <?php echo $donnees['nom_prenom']." - " .$donnees['fonction']." - " .$donnees['entreprise']?></p>
 </div>
</li>
 
<?php
}
$reponse->closeCursor(); // Termine le traitement de la requête
?>
 
</ul>
</div>

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
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
#slider, ul
{
	height: 270px;
	background-color:white;
}
 
#slider
{
	margin: auto;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	border-radius: 10px;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	position: relative;
	width: 600px;
 
}
 
#slider li
{
	float: left;
	position: relative;
	width: 600px;
	display: inline-block;
	height: 270px;
}
 
#slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
  font-family: century gothic;
  color: #666;
}
 
/*** Style container ***/
 
.slider-container
{
	margin: 0 auto;
	padding: 0;
	width: 550px;
  min-height: 180px;
}
 
 
.slider-container  p
{
	margin: 10px 25px;
	font-weight: semi-bold;
	line-height: 150%;
	text-align: justify;
}
 
/*** Animation slide ****/
 
@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	45% {left:0px; opacity:1;}
	51% {left:-95%; opacity:0.4;}
	53% {left:-95%; opacity:1;}
	100% {left:-95%; opacity:1;}
}
 
#slider ul
{
	-webkit-animation: slide-animation 60s infinite;
}
 
@media screen and (max-width: 700px){
 
 
	#slider li, #slider ul{
		max-width:100%;
		padding:15px;
	}
 
	#slider{
		max-width:80%;
 
	}
 
	.slider-container
{
	max-width: 100%;
	padding-right:20px;
 
}
 
.slider-container  p
{
	line-height: 100%;
	font-size:90%;
}
 
 
 
}