2016-06-23 64 views
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 */

回答

0

我現在已經糾正了我的CSS:兩個新的控制圖標現在的工作! 在這裏看到: http://carousel8.bitballoon.com/

  • 我現在固定的尺寸和新的旋轉木馬的定位控制圖標