web-dev-qa-db-fra.com

Commentaire sur les indicateurs et les commandes du carrousel

J'essaie de pouvoir changer l'emplacement des indicateurs et des commandes du carrousel bootstrap. Cela ressemble à quelque chose comme ce carrousel sur ce site. http://www.mitre10.co.nz/ Si les indicateurs et les commandes sont en bas et à l’écart de l’image.

Voici ma vue en direct http://codepen.io/riwakawebsitedesigns/pen/qdiup

<header id="masterhead">
<div class="container">  
<div class="slideshow">
<div id="slideshow" class="carousel slide" data-ride="carousel">

          <ol class="carousel-indicators">   
            <li data-target="#slideshow" data-slide-to="0" class="active"></li>
            <li data-target="#slideshow" data-slide-to="1"></li>
            <li data-target="#slideshow" data-slide-to="2"></li>
    <li data-target="#slideshow" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner">

            <div class="item active">
          <img src="http://s20.postimg.org/wgz1zd3wd/slide1.jpg" alt="slide"/>
            </div>

            <div class="item">
          <img src="http://s20.postimg.org/l3cio5tdp/slide2.jpg" alt="slide"/>
            </div>

            <div class="item">
            <img src="http://s20.postimg.org/w0ducxg59/slide3.jpg" alt="slide"/>
            </div>

            <div class="item">
            <img src="http://s20.postimg.org/lrld73s3h/slide4.jpg" alt="slide"/>
            </div>

        </div>
        <a class="left carousel-control" href="#slideshow" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#slideshow" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
</div>

</div> 
</div>
</div>
</div>
</header>
htmlcsstwitter-bootstraptwitter-bootstrap-3
4
user3475662

Je ne peux pas ouvrir votre exemple de site, mais vous pouvez déplacer ces indicateurs hors de leur emplacement actuel et les placer où vous le souhaitez. Je les ai déplacés de l'en-tête de votre CodePen, les ai emballés dans un conteneur et ajouté quelques styles pour les déplacer sous vos images et les centrer:

<div class="carousel-controls">
    <a class="left carousel-control" href="#slideshow" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <ol class="carousel-indicators">   
        <li data-target="#slideshow" data-slide-to="0" class="active"></li>
        <li data-target="#slideshow" data-slide-to="1"></li>
        <li data-target="#slideshow" data-slide-to="2"></li>
        <li data-target="#slideshow" data-slide-to="3"></li>
    </ol>
    <a class="right carousel-control" href="#slideshow" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

CSS:

.carousel-controls{
 position:relative; 
  width:300px;
  margin:0 auto;
}

.carousel-indicators{
   top:0px; 
}

ref: http://codepen.io/anon/pen/tayfk/

8
Mister Epic

Voici un modèle pour un carrousel, avec des commandes pouvant être positionnées, et une barre de navigation de progression en bas qui permet de suivre les diapositives.

http://codepen.io/TheNickelDime/

<!-- HTML -->

    <div class="Slideshow_carousel-wrapper container-fluid">
        <span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
        <div class="carousel slide" data-ride="carousel"  ... </div>    
        <span class="Slideshow-ctl-R" onclick="carousel_right()"></span>

    </div>

<!-- /HTML -->

<!-- CSS -->

.Slideshow_carousel-wrapper {

    display: -webkit-flex;
    display:         flex;


    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    text-align:center;

    width:100%; 
}



/* SLIDESHOW CONTROLS LEFT / RIGHT */
.Slideshow-ctl-L {

    -webkit-flex: none;
     flex: none;

    z-index:200;

    top:40%;
    margin-right:5px;

    height:60px;
    width:16px;

    opacity:0.7;

    background-size:15px 60px;
    background-repeat:no-repeat;
    background-image: url( ... );
}



.Slideshow-ctl-R {

    -webkit-flex: none;
     flex: none;


    top:40%;
    margin-left:5px;

    height:60px;
    width:15px;


    opacity:0.7;

    background-size:15px 60px;
    background-repeat:no-repeat;
    background-image: url( ... );
}

<!-- CSS -->
1
TheNickelDime

Vous pouvez modifier bootstrap.js pour que plusieurs classes soient reconnues en tant qu'indicateurs.

var Carousel = function (element, options) {
    this.$element    = $(element)
    this.$indicators = this.$element.find('.carousel-indicators, .your-class-here')
0
Martins