bootstrap Переключение слайдов BOOTSTRAP Carousel по клике по тексту

[UnWind]

Здравствуйте дамы и господа!)

У меня к Вам такой вопрос, как можно правильно реализовать следующее:

Мне нужно, чтобы при клике на строку/слово в тексте, галерея BOOTSTRAP Galerey переключалась на требуемый слайд и у слова, связанного с активным слайдов появлялось выделение в виде смены цвета текста, и подчеркиванием.

Так же мне нужно, чтобы это работало и было связано с автоматической сменой слайдов. Т.е. слайды к примеру менялись бы каждые секунд 5-ть, при этом слова в тексте автоматически бы выделялись в зависимости от активного слайда.

К примеру текст такой:

Цитата

Сегодня компания Google анонсировала линейку новых смартфонов "Real Phone". (...)

И такая галерея:

<div class="col-xs-12 col-sm-12 col-lg-offset-1 col-lg-4 carousel slide article-slide" id="searchAndReplace">
    <div class="carousel-inner cont-slider">
        <div class="item active">
            <img class="img-responsive" alt="Google company" title="Google company" src="<%=request.getContextPath() %>/lib/upload/img/270220172230.png">
        </div>

        <div class="item ">
            <img class="img-responsive" alt="Real phone" title="Real phone" src="<%=request.getContextPath() %>/lib/upload/img/270220172245.png">
        </div>
    </div>
</div>

Как такое реализовать ?

Заранее благодарю Вас за ответ!

Edited March 21, 2017 by UnWind

[andrey7287]

<p>Lorem <span class="text" data-num="0">ipsum dolor</span> sit amet, consectetur <span class="text" data-num="1">adipisicing</span> elit. Delectus nemo voluptatibus beatae officiis nam porro velit impedit. <span class="text" data-num="2">Expedita eaque</span> quam neque, ratione, hic dicta id officia quisquam vitae porro quia.</p>

.red { color: red;}

 

$('.text').click(function(e){
	
  e.preventDefault();
  
  var $this = $(this), 
      num = $this.attr('data-num');
  
  $('.carousel').carousel(+num);   
  $('.text').removeClass('red');
  $this.addClass('red');
  
});

Как то так. По поводу подсветки после автоматической смены сходу не скажу. У бутстраповского слайдера очень примитивное апи. Событие есть, но, вероятно придётся ловить активный слайд, вычислять его номер и потом уже подсвечивать соответствующий текст.

$('.text').removeClass('red').find('[data-num='+num+']').addClass('red');

Рекомендую поставить slick, там num уже встроен в событие.

[UnWind]

4 часа назад, andrey7287 сказал:

<p>Lorem <span class="text" data-num="0">ipsum dolor</span> sit amet, consectetur <span class="text" data-num="1">adipisicing</span> elit. Delectus nemo voluptatibus beatae officiis nam porro velit impedit. <span class="text" data-num="2">Expedita eaque</span> quam neque, ratione, hic dicta id officia quisquam vitae porro quia.</p>

.red { color: red;}

 

$('.text').click(function(e){
	
  e.preventDefault();
  
  var $this = $(this), 
      num = $this.attr('data-num');
  
  $('.carousel').carousel(+num);   
  $('.text').removeClass('red');
  $this.addClass('red');
  
});

Как то так. По поводу подсветки после автоматической смены сходу не скажу. У бутстраповского слайдера очень примитивное апи. Событие есть, но, вероятно придётся ловить активный слайд, вычислять его номер и потом уже подсвечивать соответствующий текст.

$('.text').removeClass('red').find('[data-num='+num+']').addClass('red');

Рекомендую поставить slick, там num уже встроен в событие.

 Спасибо большое! Очень информативно, завтра гляну - отпишу, что получилось) Покажу как я сделал) За основу возьму ваше решение.

Edited March 21, 2017 by UnWind