Royalslider API には、イベントでトリガーできる rsSlideClick 関数があります。
次のようになります。
var slider = $('#royalSliderStart').data('royalSlider');
slider.ev.on('rsSlideClick', function() {
リスト内のアンカー リンクにスムーズ スクロールを使用する追加関数は、次のようになります。
$('ul.nav > a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
できればアンカーリンクを参照せずに、rsSlideClick関数でスムーズスクロール機能を使用するソリューションを探しています。
ソリューションの例として、ユーザーが特定のスライドをクリックすると、ページの別の領域に (おそらく id によって) スムーズにスクロールします。
ソリューション?
更新 1:
HTML
<div class="container">
<ul class"nav">
<div class="royalSlider" id="royalSliderStart">
<li class=”slide” target=”1”><slide #1></li>
<li class=”slide” target=”2”><slide #2></li>
<li class=”slide” target=”3”><slide #3></li>
<li class=”slide” target=”4”><slide #4></li>
<li class=”slide” target=”5”><slide #5></li>
<li class=”slide” target=”6”><slide #6></li>
<li class=”slide” target=”7”><slide #7></li>
</div>
</ul>
</div>
スクリプト (意図したとおりに機能しません。レビューが必要です。)
var slider = $('#royalSliderStart').data('royalSlider');
slider.ev.on('rsSlideClick', function() {
$('.slide').on('click',function(event){
var el = $(this);
$('html, body').stop().animate({
scrollTop: $(el.attr('target')).offset().top
}, 1500);
event.preventDefault();
});
});
});