0
我正在此: http://carousel7.bitballoon.com/缺少自定義圖標在引導4轉盤
我已閱讀各種Q版& A和使用我的代碼的開發者視圖。
當用戶點擊「下一個」或「後退」(自定義圖標)時,他應該能夠看到傳送帶中的下一張幻燈片。我從引導創建與引導4暢飲:
http://v4-alpha.getbootstrap.com/components/carousel/#multiple-carousels
我一直在努力,它在「圖標」的文件夾鏈接到「下一個」圖標。我也嘗試過創建一個自定義字體(用於「下一個」和「後退」),但它不起作用。
<div id="carousel-example-generic" class="carousel slide" data- ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="images/featured_image_grey1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="images/featured_image_grey2.jpg" alt="Second slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-back" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
和CSS:
.right .carousel-control {
}
.left .carousel-control {
}
.carousel-control {
background-color: transparent !IMPORTANT ;
background-image: none; !IMPORTANT;
\t font-size: 80px !IMPORTANT;
\t text-shadow: none;
color: red;
}
.body {
padding: 100px 0 !IMPORTANT;
font-weight: 40px !IMPORTANT;
background-color: transparent !IMPORTANT;
background-image: 'images/background.png' !IMPORTANT;
}
.container:first-child {margin-top: 90px !IMPORTANT;
}
.nav-link {
font-family: "DIN Condensed", Helvetica, Arial, sans-serif !IMPORTANT;
padding: 3px 0 !IMPORTANT;
font-weight: 40px !IMPORTANT;
}
.navbar-light .navbar-nav .nav-link {
color: #ff9999 !IMPORTANT;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .active>.nav-link:focus, .navbar-light .navbar-nav .active>.nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active:focus, .navbar-light .navbar-nav .nav-link.active:hover, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.open:focus, .navbar-light .navbar-nav .nav-link.open:hover, .navbar-light .navbar-nav .open>.nav-link, .navbar-light .navbar-nav .open>.nav-link:focus, .navbar-light .navbar-nav .open>.nav-link:hover {
color: #ff3333 !IMPORTANT;
}
/* START new icon */
.icon-back {
background-image: url("icons/back.svg") !IMPORTANT;
font-size: 100% !IMPORTANT;
}
.icon-next {
background-image: url("icons/next.svg") !IMPORTANT;
font-size: 100% !IMPORTANT;
}
/* END new icon */