0

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”&gt;<slide #1></li> 
    <li class=”slide” target=”2”&gt;<slide #2></li> 
    <li class=”slide” target=”3”&gt;<slide #3></li> 
    <li class=”slide” target=”4”&gt;<slide #4></li> 
    <li class=”slide” target=”5”&gt;<slide #5></li> 
    <li class=”slide” target=”6”&gt;<slide #6></li> 
    <li class=”slide” target=”7”&gt;<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(); 
        }); 
    }); 
});
4

1 に答える 1