添加箭頭到自舉輪播

我在網上找到了這段代碼，我想從中學習。我想要做的是添加兩個箭頭（沒有陰影，只有箭頭）。向左一個箭頭，向右向右移動一個箭頭。添加箭頭到自舉輪播

我已經嘗試了多件事，但迄今爲止沒有任何工作。你們可以幫我解決這個問題嗎？

代碼

HTML：

<div class="carousel slide text-center" id="zalen-carousel"> 
            <ol class="carousel-indicators"> 
             <li data-target="#zalen-carousel" data-slide-to="0" class="active"></li> 
             <li data-target="#zalen-carousel" data-slide-to="1"></li> 
             <!-- <li data-target="#testimonial-carousel" data-slide-to="2"></li> --> 
             </ol> 





            <div class="carousel-inner"> 
             <div class="item active"> 
              <p>「 Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. 」</p> 
              <img class="img-responsive" src="images/achterzaal.jpg"/> 
              <h4 class="client-name">Achterzaal</h4> 
             </div> 
             <div class="item"> 
              <p>「 Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. 」</p> 
              <img class="img-responsive" src="images/hoofdzaal.jpg"/> 
              <h4 class="client-name">Hoofdzaal</h4> 
             </div> 
             <!-- 
             <div class="item "> 
              <p>「 Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est, eam dicam soluta ei. Vel dicam vivendo accusata ei, cum ne periculis molestiae pri. Lorem ipsum dolor sit amet, ea doming epicuri iudicabit nam. 」</p> 

              <h4 class="client-name">Onze zalen</h4> 
             </div> 
             --> 
            </div> 
    </div>

CSS：

#section-zalen{ 
    background: #83C74F; 
    padding-bottom: 105px; 
} 
.carousel-indicators li { 
    display: inline-block; 
    width: 11px; 
    height: 11px; 
} 
.carousel-indicators { 
    bottom: -25px; 
} 
.carousel-indicators .active { 
    background-color: #f2f2f1; 
} 
.carousel-indicators li { 
    border-color: #f2f2f1; 
} 


#zalen-carousel{ 
    width: 63%; 
    margin: 0 auto; 
    margin-top: -10px; 
} 
#zalen-carousel p{ 
    color: #f2f2f1; 
    font-style: italic; 
    margin-bottom: 40px; 
} 

.client-name{ 
    color: #566366; 
    text-transform: uppercase; 
    margin-bottom: 50px; 
}

來源

2016-07-24 The_guy_whos_learning

需要明確的是：你不」你想使用Bootstrap提供的箭頭嗎？ – Toby

我想要左邊和右邊的箭頭，但沒有陰影和所有的東西。我只想讓箭頭在這兩件事之間移動。 –

我的意思是，Bootstrap默認包含你要求的內容，所以我只是想澄清一下，如果你知道這一點，並且如果你是這樣，你需要做的事情不是Bootstrap內置的在解決方案？這裏是默認的輪播：https：//getbootstrap.com/examples/carousel/ – Toby

添加這個CSS

.carousel-control.left , .carousel-control.right 
 
{ 
 
    background-image: none !important; 
 
}

來源

2016-07-24 19:04:06 silent

首先，添加在引導的導航箭頭 - 它們應該放在以下.carousel-inner DIV的HTML：

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a>

然後，修改CSS：

.carousel-control { 
    background-image: none !important; 
} 

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { 
    color: red; 
}

來源

2016-07-24 19:06:36 Toby

而對於記錄來說，如果您發佈* brief *代碼示例，顯示您嘗試過的內容，那麼SO問題的工作就會更好。我已經回答了這個問題，但將來你會通過展示你已經嘗試過的東西而得到更好的迴應。 – Toby

添加箭頭到自舉輪播

回答

相關問題