Как изменить индикаторы и элементы управления bootstrap carousel

Question

Как изменить индикаторы и элементы управления bootstrap carousel

Я застрял, пытаясь изменить расположение индикаторов и элементов управления bootstrap carousel. Похоже на что-то вроде этой карусели на этом сайте. http://www.mitre10.co.nz / были индикаторы и элементы управления находятся внизу и вдали от изображения.

Вот мой живой вид 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>

1328 3

html css twitter-bootstrap twitter-bootstrap-3

3 ответов:

Comments

Ничего не найдено.

Mister Epic · Accepted Answer · 2016-02-29 20:11:23

Я не могу открыть ваш пример сайта, но вы можете переместить эти индикаторы из их текущего места и разместить их там, где вы хотите. Я переместил их из заголовка в вашем CodePen, завернул их в контейнер и добавил несколько стилей, чтобы переместить их ниже ваших изображений и центрировать их:
<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/

TheNickelDime · Accepted Answer · 2017-03-09 20:22:00

Вот шаблон для карусели с позиционными элементами управления и навигационной панелью прогресса внизу, которая отслеживает слайды.

Http://codepen.io/TheNickelDime/
<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>
.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%; 
}

/ * УПРАВЛЕНИЕ СЛАЙД-ШОУ СЛЕВА / СПРАВА */ .Слайд-шоу-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( ... );
}

.Слайд-шоу-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( ... );
}

Martins · Accepted Answer · 2016-03-10 19:02:54

Вы можете редактировать bootstrap.js, чтобы иметь несколько классов, признанных индикаторами.
var Carousel = function (element, options) {
    this.$element    = $(element)
    this.$indicators = this.$element.find('.carousel-indicators, .your-class-here')