0
Я работаю над этим: http://carousel7.bitballoon.com/Отсутствует пользовательский значок в Bootstrap 4 карусели
Я прочитал различные Q & A и использовал вид разработчика моего кода.
Когда пользователь нажимает «рядом» или «назад» (пользовательские значки), он должен иметь возможность видеть следующий слайд в карусели. Я создал кутить с Bootstrap 4 из Bootstrap:
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 */