将Magicline与Flexslider一起使用

mark 发表于 Dev

标记

我正在使用Flexslider进行幻灯片演示，并且正在尝试使用Magicline。

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

任何帮助将不胜感激！

更新：我做了一个小提琴-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,
        });    
    });



});
});

本杰明·克鲁兹耶（Benjamin Crouzier）

在您的代码中，我看不到任何地方可以检查“单击左箭头”和“单击右箭头”事件，因此，#arrow只有鼠标悬停时才移动是正常的。

在JavaScript的末尾添加以下代码（以处理click事件）：

 $('#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选择器中的.。更新了我的答案和小提琴）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。