Discussion :

[lolo17]

Bonjour,

J'ai lu dans ce forum les éléments pour répondre à ma question mais je n'ai pas trouvé. D'avance mes excuses si le sujet est traité d'une autre façon ici mais je ne vois pas.
Voilà, il s'agit d'une demande très bête mais sur laquelle je bute depuis pas mal de temps maintenant.

J'ai trouvé le Template suivant pour installer notamment un carousel d'images (Bootstrap) :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
 
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
 
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

Mais là où je bute complètement, c'est pour indiquer l'adresse de mes 3 images du carrousel :

'http://placehold.it/1900x1080&text=Slide One'

Après de nombreux essais, rien ne marche... Comment faut-il inclure l'URL de mon image dans ce code ? url('image/image1.png&text=Slide Three') OU url('image/image1.png text=Slide Three') OU ... ?
Merci d'avance pour votre aide.

[Jacques Beauregard]

Bonjour,
Tu peux simplement utiliser les balises <img> de la sorte :

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
<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>
 
    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>
 
    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>
 
    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

Sinon ce lien pour jouer avec background-image : http://jerome.developpez.com/css-debutant/cours9.php

[lolo17]

Un grand merci Jacques ! Je vais mettre ta solution en œuvre et aussi approfondir mes bases (très légères... !).
Encore merci.