点击图片后面包屑向左移动
Breadcrumb moves on the left after click of image
我在顶部有 3 个面包屑导航箭头。当我在第一张幻灯片中单击轮播主体中的三个（石膏板、混凝土、加气混凝土和砖）的图像时，其中一个箭头指向最左边。我想让它要么在中间，要么在右边。
锚导航
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
margin-left: 655px;
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-left: 30px solid #5fdba7;
padding-left: 65px;
}
.breadcrumb li.completed a:after {
border-left: 30px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 10px 10px 45px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(0, 0%, 83%, 1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}
<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我希望箭头按顺序向右移动。
例如 Start > Process > End（这将根据用户的状态在最右边一一进行。
看看是不是我理解的问题。您可以将 CSS 与您的进行比较以采用更改。
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb {
margin: auto;
width: 440px;
}
.breadcrumb li {
float: left;
}
.carousel-inner{
background-color: #e9ecef;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
/*margin-left: 655px;*/
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-right: 34px solid #5fdba7;
/*padding-left: 65px;*/
}
.breadcrumb li.completed a:after {
border-right: 34px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 35px 10px 30px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 50%;
margin-top: -50px;
left: -19px;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: -20px;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}
<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我在顶部有 3 个面包屑导航箭头。当我在第一张幻灯片中单击轮播主体中的三个（石膏板、混凝土、加气混凝土和砖）的图像时，其中一个箭头指向最左边。我想让它要么在中间，要么在右边。
锚导航
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
margin-left: 655px;
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-left: 30px solid #5fdba7;
padding-left: 65px;
}
.breadcrumb li.completed a:after {
border-left: 30px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 10px 10px 45px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(0, 0%, 83%, 1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}
<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我希望箭头按顺序向右移动。
例如 Start > Process > End（这将根据用户的状态在最右边一一进行。
看看是不是我理解的问题。您可以将 CSS 与您的进行比较以采用更改。
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb {
margin: auto;
width: 440px;
}
.breadcrumb li {
float: left;
}
.carousel-inner{
background-color: #e9ecef;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
/*margin-left: 655px;*/
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-right: 34px solid #5fdba7;
/*padding-left: 65px;*/
}
.breadcrumb li.completed a:after {
border-right: 34px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 35px 10px 30px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 50%;
margin-top: -50px;
left: -19px;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: -20px;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}
<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>