CODEWITHSUNDEEP
jquerycss
trevoray
trevoray

Reputation: 317

Matching rotating highlighted arrow divs

Using images in custom javascript jquery code that will properly display on page

Upvotes: 0

Views: 69

Answers (2)

TreeTree
TreeTree

Reputation: 3230

You can do this through the plugin by using its dots property. I'm aware that it doesn't work for the initial slide. You have to wait for it to go to the next slide for it to work.

http://codepen.io/anon/pen/gbZeaZ

$(function() {
    $('.banner').unslider(
    {
      speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 5000,

      dots:true,
      complete:function () {
        var index = $('#hp-banner .dot.active').index ();
        $('#hp-banner-right li').removeClass ('active').eq (index).addClass ('active');
      }
    }
    );
});

Enabling the dots will add dots to the slider that you can click to go to specific slides. The current dot will have an active class. You can use the complete callback to find out what index the active dot is, then give the corresponding banner link an appropriate class.

I found that method in this issue. https://github.com/idiot/unslider/issues/168

Upvotes: 1

Terry
Terry

Reputation: 66208

Unfortunately you can't, that is because even though the plugin has an inbuilt event that is triggered upon completion, which allows you to run a function (using the complete object, by checking the source we can see that it is impossible to access the current index of the slider image in view, and therefore you are unable to dictate which link to highlight.

This issue will have to be brought up with the plugin author to allow index access (like with the .move() method, which surprisingly allows index access and callback).

From lines 152 and 153:

//  Move Unslider to a slide index    // #152
_.to = function(index, callback) {    // #153

Upvotes: 0

Related Questions