单击图像后，面包屑在左侧移动

Question

我的顶部有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;}我希望箭头向右并按顺序排列。例如，“开始”>“处理”>“结束”（根据用户的状态，此选项将一一显示在最右边。