Guys I am using bootstrap to create an image slider and here is the code :
<!-- my carousel START -->
<div id="myCarousel" class="container carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- inside my carousel -->
<div class="rows">
<!-- first HALF -->
<div class="col-md-1"></div>
<div id="firstHalfCarousel" class="col-md-4">
</div>
<div class="col-md-1"><br><br><img id="scrollImage" style="margin-top : 0px; margin-top: 30px; margin-left : -50px;" src="images/scroll.png"/></div>
<!-- second HALF -->
<div id="secondHalfCarousel" class="col-md-6">
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<br>
<div style="float : right;">
<img id="leftArrow" class="arrowIcon" src="images/left.png"/>
<img id="rightArrow" class="arrowIcon" src="images/right.png"/>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="item">
<!-- inside my carousel -->
<div class="rows">
<!-- first HALF -->
<div class="col-md-1"></div>
<div id="firstHalfCarousel" class="col-md-4">
</div>
<div class="col-md-1"><br><br><img id="scrollImage" style="margin-top : 0px; margin-top: 30px; margin-left : -50px;" src="images/scroll.png"/></div>
<!-- second HALF -->
<div id="secondHalfCarousel" class="col-md-6">
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="item">
<!-- inside my carousel -->
<div class="rows">
<!-- first HALF -->
<div class="col-md-1"></div>
<div id="firstHalfCarousel" class="col-md-4">
</div>
<div class="col-md-1"><br><br><img id="scrollImage" style="margin-top : 0px; margin-top: 30px; margin-left : -50px;" src="images/scroll.png"/></div>
<!-- second HALF -->
<div id="secondHalfCarousel" class="col-md-6">
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="item">
<!-- inside my carousel -->
<div class="rows">
<!-- first HALF -->
<div class="col-md-1"></div>
<div id="firstHalfCarousel" class="col-md-4">
</div>
<div class="col-md-1"><br><br><img id="scrollImage" style="margin-top : 0px; margin-top: 30px; margin-left : -50px;" src="images/scroll.png"/></div>
<!-- second HALF -->
<div id="secondHalfCarousel" class="col-md-6">
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
<!-- my carousel END -->
Everything works perfectly but I am using my own icons and I gave them id leftIcon and rightIcon.
The question is , how I could use jQuery or bootstrap classes to swap images using my own icons not bootstrap icons.
Thanks
答案 0 :(得分：0)
您需要找到Bootstrap CSS文件并更改代码。 或者将以下内容添加到自定义css文件中。
通过添加图片来改变引导css：
.carousel-control .glyphicon-chevron-right:before {
//Reset the icon
content: " ";
//Give layout
display:block;
//Your image as background
background:url('http://yourarrow.png') no-repeat;
//To show full image set the dimensions
width:30px;
height:30px;
}