1

手動コントロールで flexslider を使用していますが、正常に動作しています。ただし、コントロールをクリックする代わりに、コントロールにカーソルを合わせたときにスライドを変更する必要があります。これは可能ですか？js ファイルを調べましたが、変更するクリック機能が見つかりません。

flexslider js は次のとおりです: https://raw.github.com/woothemes/FlexSlider/master/jquery.flexslider.js

そして、これは私のコードです:

$(window).load(function(){
    $('.flexslider').flexslider({
     animation: "slide",
     directionNav: true,
     controlsContainer: "header#site",
     manualControls: ".nav1 li"
    });
});

そして、HTMLは（簡略化された）これです：

<header id="site">
<ul class="nav1">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

<div class="flexslider">
<ul class="slides">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>
</header>
4

6 に答える 6

5

jquery.flexslider.js では、21 行目を変更するだけです。

eventType = "click touchend MSPointerUp"

に

eventType = "mouseover touchend MSPointerUp"

そのため、反応しmouseover、クリックイベントをリンクに使用できます。

于 2013-12-26T18:47:20.560 に答える
0

これを解決する簡単な方法は次のとおりです。

jQuery('.flex-control-nav li').on('mouseenter', function () {
    $(this).trigger('click');
});
于 2016-09-08T14:24:09.580 に答える
0

controlnav のリンクをクリックして記事に移動できるようにする必要がありました。私は frendo の答えから構築し、これを flexslider 関数に追加しました:

        start: function (slider) {
        $('.top-btns a').mouseover(function () {
            $('#home-banner').flexslider($(this).index());
        });

次に、JavaScript の別の場所で次のようにします。

$(document).ready(function () {
    $('.top-btns a').click(function () {
        window.location.href = $(this).attr('href');
    });
});

「.top-btns a」を変更して controlnav を参照し、「#home-banner」を変更したいフレックススライダーに変更する必要があります。次に、controlnav の各リンクの href を、ユーザーが移動するページにします。

于 2015-06-17T20:44:12.363 に答える
0

私が取り組んでいるプロジェクトではflexsliderスクリプトまたは初期化スクリプトを変更できないため、回答を使用できませんでした。

以下のソリューションでは、flexslider に manualControl リスト要素を含めることができ、その中にカスタム リンクを含めることができます。ホバーするとスライドが切り替わり、クリックするとページに移動します。

//Define the navigation elements of the manualControls flexslider
            var $sb = $('.product-slider-nav li a');

//Flexslider click hover handler
            function FlexHoverHandler(event) {
                $element = $(this);
                if (event.data.event == 'mouseover') {
                    $element.trigger('click');
                }
                if (event.data.event == 'mouseup') {
                    window.location.href = $element.attr('href');
                }
            }

//Bind mouseover and mouseup 
            $sb.on('mouseover', {event: 'mouseover'}, FlexHoverHandler);
            $sb.on('mouseup', {event: 'mouseup'}, FlexHoverHandler);
于 2017-05-01T12:47:45.327 に答える