Partage
  • Partager sur Facebook
  • Partager sur Twitter

Carousel Bootstrap avec plusieurs images active

monsieurmarcadet
    8 avril 2017 à 15:46:29

    Bonjour les amis !

    Voici mon problème,

    J'ai un nombre assez conséquent d'images que j'aimerais aligner horizontalement mais où seulement 4 ou 5 soient visibles. Pour voir les autres, il faudrait cliquer sur une flèche droite ou gauche.

    J'ai donc utilisé un carousel, ça me paraissait la meilleure solution, et d'ailleurs ça marche très bien.

    Sauf que voilà, j'ai l'impression d'être limité par le principe de la grille à 12 colonnes. Comment en mettre 5 par exemple ? Puisque 5 n'est pas multiple de 12 ? Et puis, vous verrez sur mon exemple, je n'arrive pas à gérer l'espace entre chaque image, que j'aimerais minime.

    Est-ce que je suis sur la bonne voie avec le carousel ou il y a-t-il une autre manière de faire ? Et si non, qu'est-ce qui cloche ?

    <body>
    <div id="slide1" class="container-fluid">    
        <div class="slide_inside titre">
            <h1>HAND SCORE</h1>   
        </div> 
    </div>

    <div id="slide2">
        <div class="container collapse" id="appareven">
            <div class="row ">
                <div class="blocrub text-center">
                    MASCULIN
                </div>
                <div class="row">
                    <div class="col-md-11 carousel slide" id="myCarouselM"><!--CAROUSEL HOMME-->
                        <div class="carousel-inner">
                            <div class="row item active men">
                                <ul>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat du monde</p>
                                            </div>                        
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Jeux Olympiques</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                 <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Europe</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Europe Junior</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li> 
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Europe Junior</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li> 
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Europe Junior</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>             
                                </ul>
                            </div>

                    <!--2e slide HOMME-->
                            <div class="row item men">
                                <ul>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Afrique</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Asie</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Afrique Junior</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                <li class="col-md-2 blocevenmen">
                                    <div class="link">
                                        <a href="#apparyear" data-toggle="collapse"><img class="img-responsive" src="/Handball/images/men.png" alt="men">
                                        <div class="titreeven">
                                            <div class="col-sm-4">
                                                <p class="">Championnat d'Océanie</p>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"><!--FLECHE-->
                        <ul class="">
                            <li><span data-slide="prev" href="#myCarouselM" class="left carousel-control"><i class="glyphicon glyphicon-menu-left"></i></span></li>
                            <li><span data-slide="next" href="#myCarouselM" class="right carousel-control"><i class="glyphicon glyphicon-menu-right"></i></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

    et le CSS

    html {
  height: 100%;
}

body { 
	margin:0;
	padding:0;
}

p {
	position: absolute;
}

ul {
	list-style:none;
	margin-left:0;
	padding-left:0;
}
 
li {
    display: table-cell; /* affichage en ligne */
}

.container, .container-fluid {
	font-family: 'Titillium Web', sans-serif;
}

.compet {
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}

.glyphicon {
	color: blue;
	font-size : 40px;
	margin-top: 30px;
}

.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
 }

.blocrub {
	color : white;
	font-size: 25px; 
	background-color: rgba(0, 0, 0, 0.5);
	width: 15%;
	margin-bottom: 5px;
}

.blocevenmen {
	padding-right:10px;
  	padding-left:10px;
  	margin-bottom: 5px;
  	/*background-color: grey;*/
}

.blocevenwomen {
	padding-right:10px;
  	padding-left:10px;
  	margin-bottom: 35px;
  	/*background-color: black;*/
}

.year {
	padding-right:1px;
  	padding-left:1px;
  	/*background-color: black;*/
}


.titrecompet {
	position: absolute;/* pour écrire sur l'image*/
	z-index: 1; top: 0; left: 0;
	font-size: 20px;
	margin-left: 10px;
}

.titreeven  {
	position: absolute;/* pour écrire sur l'image*/
	z-index: 1; top: 0; left: 2;
	font-size: 15px;
}

.titreyear  {
	position: absolute;/* pour écrire sur l'image*/
	z-index: 1; top: 0; left: 2;
	font-size: 15px;
}

    Un grand merci à vous évidement !

    • Partager sur Facebook
    • Partager sur Twitter
    A la recherche d'un sacré bon développeur pour une sacré bonne idée
    florianboy01
      10 avril 2017 à 4:24:24

      Salut,

      Si je te comprend bien, tu désir que 5 image apparaissent en même temps dans ton carousel, puis 5 autres et ainsi de suite ?

      J'aurai fait le truc ainsi en les centrant

      <section id="carousel" class="carousel slide thumbnail col-xs-12 col-sm-12 col-md-12 col-lg-offset-1 col-lg-10" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
              
  </ol>
  <div class="carousel-inner">
    <div class="item active"><img src="images/img1.jpg" class="col-xs-offset-1 col-xs-2">
                              <img src="images/img2.jpg" class="col-xs-2">
                              <img src="images/img3.jpg" class="col-xs-2">
                              <img src="images/img4.jpg" class="col-xs-2">
                              <img src="images/img5.jpg" class="col-xs-2">
                              <h1 class="carousel-caption">Titre du groupe</h1>
    </div>
    <div class="item"><img src="images/img6.jpg" class="col-xs-offset-1 col-xs-2">
                      <img src="images/img7.jpg" class="col-xs-2">
                      <img src="images/img8.jpg" class="col-xs-2">
                      <img src="images/img9.jpg" class="col-xs-2">
                      <img src="images/img10.jpg" class="col-xs-2">
                      <h1 class="carousel-caption">Titre du groupe</h1>
    </div>
    <a class="left carousel-control" href="#carousel" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</section>




      Je sais pas si ça répond à ta question mais si tu veux que les images se touchent, tu rajoute à chacune d'elles la class="th" sinon tu gère l'espacement avec du CSS en modifiant le padding left et right de chaque images

      -
      Edité par florianboy01 10 avril 2017 à 4:35:38

      • Partager sur Facebook
      • Partager sur Twitter
      monsieurmarcadet
        26 avril 2017 à 7:36:03

        Bonjour...

        J'ai cru que mon message n'intéressait personne, mais c'est juste que je reçois plus les notifs d'Openclassroom. Merci pour ta réponse, j'essaie ça dès que je trouve le temps de m'y remettre !

        Merci beaucoup!

        • Partager sur Facebook
        • Partager sur Twitter
        A la recherche d'un sacré bon développeur pour une sacré bonne idée

        Carousel Bootstrap avec plusieurs images active

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown