Jak zmienić wskaźniki i kontrolki karuzeli bootstrap

Nie mogę otworzyć Twojej przykładowej witryny, ale możesz przenieść te wskaźniki z ich bieżącej lokalizacji i umieścić je w dowolnym miejscu. Usunąłem je z nagłówka w Twoim CodePen, owinąłem w pojemnik i dodałem kilka stylów, aby przenieść je pod obrazy i wyśrodkować:

<div class="carousel-controls">

 <a class="left carousel-control" href="#slideshow" data-slide="prev">

 <span class="glyphicon glyphicon-chevron-left"></span>

 [/url]

 <ol class="carousel-indicators"> 

 <li data-target="#slideshow" data-slide-to="0" class="active">[/*]

 <li data-target="#slideshow" data-slide-to="1">[/*]

 <li data-target="#slideshow" data-slide-to="2">[/*]

 <li data-target="#slideshow" data-slide-to="3">[/*]

 [/list]

 <a class="right carousel-control" href="#slideshow" data-slide="next">

 <span class="glyphicon glyphicon-chevron-right"></span>

 [/url]

CSS:

.carousel-controls{

 position:relative; 

 width:300px;

 margin:0 auto;

}.carousel-indicators{

 top:0px; 

}

połączyć:

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

Oto szablon karuzeli z kontrolkami pozycyjnymi i paskiem postępu u dołu, który śledzi slajdy.
http://codepen.io/TheNickelDime
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" ...  

 <span class="Slideshow-ctl-R" onclick="carousel_right()"></span> <!--/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 -->

Możesz edytować plik bootstrap.js, tak aby wiele klas było rozpoznawanych jako wskaźniki.

var Carousel = function (element, options) {

 this.$element = $(element)

 this.$indicators = this.$element.find('.carousel-indicators, .your-class-here')