1

При клике на изображение к его ссылке добавляется класс class="active" как на JQuery прокрутить картинки в блоке id="bx-pager" к ссылке с классом active

#bx-pager {
	border:1px solid #000;
	height: 120px;
	overflow: hidden;
  width:370px;
}
<div id="bx-pager">
		<a data-slide-index="0" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="3" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="4" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="5" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="6" href=""><img src="http://placehold.it/120x120"/></a>
		<a data-slide-index="7" href=""><img src="http://placehold.it/120x120"/></a>
	</div>

1 ответ 1

2

Так?:

$('a').on('click', function(e){
  e.preventDefault();
  
  if(!$(this).hasClass('active')){     
    $(this).addClass('active')
      .siblings()
      .removeClass('active');
  } else {
    $(this).removeClass('active');
  }
  
  
  $('#bx-pager').animate({
     scrollLeft: $(this).offset().left
  }, 1000);
  
  
});
#bx-pager {
	border:1px solid #000;
	height: 120px;
    width:360px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;  /* чтобы картинки стояли в одну линию, не переходя на другую строку */
	word-wrap: normal;  /* то же для IE */
}

a {
  display: inline-block;
  border: 1px solid #ccc;
}

.active {  
  border: 1px solid red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  
  <div id="bx-pager">
    <a data-slide-index="0" href="" class="active"><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="3" href=""><img src="http://placehold.it/120x120"/></a>
  </div>

Вариант 2:

$('a').on('click', function(e){
  e.preventDefault();
  
  if(!$(this).hasClass('active')){     
    $(this).addClass('active')
      .siblings()
      .removeClass('active');
  } else {
    $(this).removeClass('active');
  }
  
  
  $('#bx-pager').animate({
     scrollLeft: $(this).offset().left
  }, 1000);
  
  
});

$('#bx-pager').animate({
     scrollLeft: $('.active').offset().left
}, 1000);
#bx-pager {
	border:1px solid #000;
	height: 120px;
    width:360px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;  /* чтобы картинки стояли в одну линию, не переходя на другую строку */
	word-wrap: normal;  /* то же для IE */
}

a {
  display: inline-block;
  border: 1px solid #ccc;
}

.active {  
  border: 1px solid red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  
  <div id="bx-pager">
    <a data-slide-index="0" href="" ><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a>
    <a data-slide-index="3" href="" class="active"><img src="http://placehold.it/120x120"/></a>
  </div>

4
  • Да, спасибо. А то я уже начал отступами играть.
    – Tokwiro
    14 дек 2017 в 19:05
  • А как сделать чтобы без клика, сразу при загрузки страницы работал?
    – Tokwiro
    14 дек 2017 в 19:50
  • @Tokwiro, добавила второй вариант
    – SVE
    14 дек 2017 в 19:52
  • штука в том, что классы ссылок у блока id="bx-pager" меняются без клика. Я думаю запускать твою функцию с другой и чтобы твоя просто проверяла и скролила.
    – Tokwiro
    14 дек 2017 в 19:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.