1

我正在使用 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,
        });    
    });



});
});
4

3 回答 3

3

在您的代码中，我看不到您检查“单击左箭头”和“单击右箭头”事件的地方，因此#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选择器中的 . 。更新了我的答案和小提琴）

于 2014-03-19T22:42:57.253 回答
2

我在这里实现了一个解决方案：

http://jsfiddle.net/Fresh/dtk63/

当您单击左/右箭头时，我使用了 flexslider“ after ”事件处理程序来使魔术线移动。“after”非常适合此功能，因为它会在每个滑块动画完成后触发。

执行此操作的代码在这里：

after: function (slider) {
 $('.carousel-li.flex-active-slide').mouseover();
}

您将很难想出一个更简单的解决方案；）

于 2014-03-19T22:51:16.673 回答
1

当您附加箭头时，它们需要 jquery 中的“on”功能，因为它们没有预加载在文档中。见https://api.jquery.com/on/

所以箭头的点击事件需要附加 on 功能，我认为你可以使用类似于悬停功能的东西。

于 2014-03-19T22:42:49.473 回答