Я пытаюсь понять, как перемещать пользовательские подписи вне класса bx-slider. Я нашел только ответы, подобные этому здесь, где используется атрибут изображения, но моя проблема в том, что я хочу иметь возможность перемещать заголовок вместе с изображением внутри div, отдельно от bx-слайдера, если это возможно.
Пока у меня это:
HTML:
<!--image slider desktop-->
<div id="hero">
<ul class="bxslider">
<li>
<a href="www.google.com">
<img src="http://placehold.it/350x150" class="slider-img-responsive">
</a>
</li>
<li>
<a href="www.google.com">
<img src="http://placehold.it/350x150" class="slider-img-responsive">
</a>
</li>
</ul>
</div>
<!-- slider text-->
<div class="mobile-homepage-header">
<!-- TODO: slide text relative to image slider-->
<ul id="slider-text" style="list-style-type:none;padding:0;">
<li>
<h1>Lorem ipsum 1</h1>
<h2>Lorem ipsum dolor sit 1</h2>
<a href="www.google.com">Button 1</a>
</li>
<li>
<h1>Lorem ipsum 2.</h1>
<h2>Lorem ipsum dolor sit 2</h2>
<a href="www.google.com">Button 2</a>
</li>
</ul>
</div>
JQuery:
$('#hero .bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
onSliderLoad: function(currentIndex) {
$('#slider-text li').html($('.bxslider li').eq(currentIndex)); // select the current index of the slider
},
onSlideBefore: function($slideElement, oldIndex, newIndex) {
$('#slider-text li').html($slideElement); // slide text along with image
}
});