Discussion :

[Kraster]

Bonjour,
j'ai tout essayé pour adapter mon slider aux différentes résolutions d'écrans (rendre responsive), surtt les divs et les images d'arrière plan, voici mon code et merci d'avance pour vos réponses.

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
<div class="container-fluid">	<!-- class bootstrap -->
 <div class="container">     <!-- class bootstrap -->
  <section id="banner">
   <div id="slider">
    <div id="slides">  
     <aside class="slide1">
      <img src="imgs/1.jpg" class="img-responsive" alt="Rejoignez-nous"></a></h2>
     </aside>
     <aside class="slide2">
      <aside> 
       <h2><a href="#" title="">TITRE 2</a></h2>
      </aside>                                     
      <figure>
       <img src="imgs/2.jpg" class="img-responsive" alt="Moniteur design">
      </figure>                                            
     </aside>                                        
     <aside class="slide3">
      <aside> 
       <h2><a href="#" title="">TITRE 3</a></h2>
      </aside> 
      <figure>
       <img src="imgs/3.jpg" class="img-responsive" alt="Postère formation">
      </figure>
     </aside>
    </div>								  
   </div>	
  </section>
 </div>
</div>

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#banner{
width:100%;
position:relative;
overflow:hidden;
margin:0 auto;
}
#banner #slider{
width:100%;
position:relative;
margin:0 auto;
overflow:hidden;
}
#banner #slider #slides{
width:100%;
position:relative;
margin:0 auto;
overflow:hidden
}
#banner #slider .slide1{ 
width:1180px;
height:300px; 
margin:0 auto;
background:url("../imgs/11.png") no-repeat center;
}	
#banner #slider .slide2{ 
width:1180px;
height:300px; 
margin:0 auto;
background:url("../imgs/22.png") no-repeat center;
}
#banner #slider .slide3{
width:1180px;
height:300px; 
margin:0 auto;
background:url("../imgs/33.png") no-repeat center;
}

[NoSmoking]

Bonjour,
ce que tu nous indiques est trop peu pour que l'on comprenne ton vrai problème !
- quel est le rendu souhaité ?
- utilisation ou non d'un plugin ?
...
quoiqu'il arrive il te faut supprimer les dimensions en px de tes déclarations CSS.

[Kraster]

Merci de votre réponse, ça m'a beaucoup aidé