javascript - 将 Magicline 与 Flexslider 结合使用

Question

我正在使用 Flexslider 进行幻灯片放映，我正在尝试使用 Magicline与它。

到目前为止一切正常，但是如果我单击箭头转到下一张幻灯片，magicline 不会移动 - 只有当我将鼠标悬停在某个元素上时它才会起作用。

任何帮助将不胜感激!

更新:我做了一个 fiddle - JSFiddle

HTML:

<div id="carousel" class="flexslider">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides">
            <li class="slide-li small-slide-li slide-1 flex-active-slide">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-2">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-3">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-4">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
        </ul>
    </div>
</div>

<ul class="flex-direction-nav">
    <li>
        <a class="flex-prev" href="#">Previous</a>
    </li>
    <li>
        <a class="flex-next" href="#">Next</a>
    </li>
</ul>

JS:

jQuery(document).ready(function($) {

jQuery(function scroller($) {

    var $el, leftPos, newWidth,
        $mainNav = $("#carousel");
    $mainNav.append("<div id='arrow'></div>");
    var $magicLine = $("#arrow");
    var $selector = $("#carousel li").position().left;
    console.log($selector)
    $magicLine
        .css("left", $("#carousel li.flex-active-slide").left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#carousel li").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        $magicLine.stop().animate({
            left: leftPos,
        });
    }, 

    function() {
        $magicLine.stop().animate({
            left: $("#carousel li.flex-active-slide").position().left,
        });    
    });



});
});

Answer 1

在你的代码中，我没有看到你检查“点击左箭头”和“点击右箭头”事件的地方，所以 #arrow 只在悬停时移动是正常的。

在您的 javascript 末尾添加这段代码(以处理点击事件):

 $('#sml-slider-container').on('click', '.flex-next, .flex-prev', function() {
     $el = $('.flex-active-slide');
     leftPos = $el.position().left;
     $magicLine.stop().animate({
         left: leftPos,
     });
 });

大功告成。

工作 jsfiddle:http://jsfiddle.net/zNxdU/6/

(更新:我忘记了 .flex-prev 选择器中的 .。更新了我的答案和 fiddle )