Индикаторы ползунка: соответствие двух Div - PullRequest
Новая
       11

Индикаторы ползунка: соответствие двух Div

0 голосов
/ 14 июня 2019

Я делаю слайдер с управлением и индикаторами. Я застрял в том, как сделать так, чтобы индикаторы связывались с самим слайдером. Я ищу много ключевых слов, но ни один из ответов не может мне помочь :(

Попытка сделать это «Нажмите на индикаторы> удалите соседний активный класс> добавьте активный класс к этому> слайдер 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>

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете добавить атрибуты данных к элементам div и цели в JS 

$('#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>
...