Using Magicline with Flexslider

Question

I'm using Flexslider for a slideshow and I'm trying to use Magicline with it.

So far everything works good, however if I click on the arrows to go to the next slide the magicline doesn't move - it only works if I hover over an element.

Any help would be greatly appreciated!

UPDATE: I made a fiddle of it - 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

In your code, I see no place where you check the "click left arrow" and "click right arrow" events, so it's normal that the #arrow only moves on hover.

Add this bit of code at the end of your javascript (to handle the click events):

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

And you're done.

Working jsfiddle: http://jsfiddle.net/zNxdU/6/

(update: I forgot the . in .flex-prev selector. Updated my answer and the fiddle)

Answer 2

I've implemented a solution here:

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

I've made use of flexsliders "after" event handler to make magicline move when you click the left/right arrow. "after" is ideal for this feature as it fires after each slider animation completes.

The code to do this is here:

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

You'll be hard pressed to come up with a simpler solution ;)

Answer 3

as you append the arrows they need the "on" function in jquery as they where not preloaded in the document. See https://api.jquery.com/on/

So the click event for the arrows need the on function attached, I think you can use something similar to your hover function.