Question

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



});
});

Answer 1

在您的代码中，我看不到您检查＆＃34;单击左箭头＆＃34;和＆＃34;点击向右箭头＆＃34;事件，所以#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选择器中忘记了。更新了我的答案和小提琴）

Answer 2

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

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

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

执行此操作的代码在此处：

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

你很难想出一个更简单的解决方案;）

Answer 3

当你附加箭头时，他们需要＆＃34; on＆＃34;在jquery中的函数，因为它们没有预先加载到文档中。见https://api.jquery.com/on/

因此箭头的click事件需要附加on函数，我认为你可以使用与你的悬停函数类似的东西。

使用Magicline和Flexslider

3 个答案: