滑块指示器:匹配两个 div 顺序

Question

我正在制作一个带有控件和指示器的滑块。我陷入了如何使指标与滑块本身链接的困境。我搜索了很多关键字，但没有一个答案可以帮助我:(

试图使其"单击指标>删除附近的活动类>将活动类添加到此>滑块div 匹配指标div 列表的顺序(

$('.carousel-indicators > div').on('click', function(){
    $(".carousel-indicators > div").something match the({
    'order of the': ($(".slider-inner > div").slider list() + 'order')
    });
    
    $(".carousel-indicators > div").closest('div').removeClass('active');
    $(this).addClass('active');
  });

.slider-inner{
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:left;
	padding:3px;
	border:#666 solid 1px;
}
.slider-inner > div{
	display:none;
	width:200px;
	height:200px;
}
.slider-inner .active{
	display:inline-block;
	cursor: pointer;
}
  .carousel-indicators{
    width: 500px;
    float: left;
  }
  .carousel-indicators > div{
    float: left;
    width: 30px;
    height: 8px;
    background-color: #D8D8D8;
    margin-right: 30px;
    cursor: pointer;
  }
  .carousel-indicators .active{
    background-color: #FF6600;
  }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-outer">
	<div class="slider-inner">
		<div id="item" class="active" ><p>#1 </p></div>
		<div id="item" ><p>#2 </p></div>
		<div id="item" ><p>#3 </p></div>
	</div>
	<div class="carousel-indicators">
		<div class="active"></div>
		<div></div>
		<div></div>
	</div>
</div>

Answer 1

您可以在 JS 中添加div 元素和目标的数据属性

$('#slider-indicator > li').on('click', function() {
  var slideNumber = $(this).data('slide');
  var slides = $('#slider > div');
  var indicators = $('#slider-indicator > li');
  // look for slide with same data-slide as the clicked li
  for (var i = 0; i < slides.length; i++) {
    if (i === slideNumber) {
      $(slides[i]).addClass('active');
      $(indicators[i]).addClass('active');
    } else {
      $(slides[i]).removeClass('active');
      $(indicators[i]).removeClass('active');
    }
  }
});

#slider {
  margin: 0 0 15px;
  padding: 0;
  width: 100%;
  height: 30vw;
  position: relative;
  overflow: hidden;
}
#slider div {
  margin: 0;
  width: 100%;
  height: 30vw;
  position: absolute;
  top: 0;
  left: 100%;
  background: green;
  transition: left 0.4s linear;
  color: white;
  text-align: center;
  padding: 10vw 0;
  font-size: 40px;
}
#slider div:nth-child(2n) {
  background: blue;
}
#slider div.active {
  left: 0;
}
ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  list-style: none;
  color: white;
  text-align: center;
  font-size: 12px;
}
ul li {
  margin: 0 16px;
  padding: 8px 12px;
  text-align: center;
  background: grey;
  display: inline-block;
  cursor: pointer;
  border-radius: 100%;
}
ul li.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div class="active">Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<ul id="slider-indicator">
  <li data-slide="0" class="active">1</li>
  <li data-slide="1">2</li>
  <li data-slide="2">3</li>
</ul>