How do I add a class of “active” to a visible slide within a slideshow?

Question

I have a page that is mainly a large slider, I am using unslider (unslider.com) right now, but would be willing to switch to a different slider if it provides the functionality I need. The goal is to have the slide show move through my different projects. At the bottom of the page, will be an arrow button that when clicked will slide in the specific project details for the current or visible slide. I was planning to load the project details into a hidden div via ajax based on the data attribute of the "active" slide.

The problem I am having is that I don't know how to add a class of "active" to the visible slide. I am fairly new, but I believe I will need to use javascript or jquery to change the "active" class appropriately. Here is the HTML and jQuery for the slider:

<div class="banner">
        <ul>  
            <li class="slide_1" data-link="ajaxed_content_url">
                <img src="slide_1.jpg" />           
            </li>
            <li class="slide_2" data-link="ajaxed_content_url">
                <img src="slide_2.jpg" />           
            </li>
            <li class="slide_3" data-link="ajaxed_content_url">
                <img src="slide_3.jpg" />           
            </li>
        </ul>

    <a class="details_btn" href="#"></a>
</div>

<script>
    $('.banner').unslider({
        speed: 500,              
        delay: 5000,              
        complete: function() {},  
        keys: true,              
        dots: true,              
        fluid: true              
    });
</script>

When the slider is rendered in the browser, an "active" class is not added to the code. Any help would be greatly appreciated.

Answer 1

Unslider simply animates the ul, so it does not actually change the picture li's. However, it DOES add an active class to the dots. Digging through the source code, I found where it adds the active class to the dots and edited in a similar line that should apply an active class to the pictures. Here is the edited source code:

/**
 *   Unslider by @idiot
*/

(function($, f) {
//  If there's no jQuery, Unslider can't work, so kill the operation.
if(!$) return f;

var Unslider = function() {
    //  Set up our elements
    this.el = f;
    this.items = f;

    //  Dimensions
    this.sizes = [];
    this.max = [0,0];

    //  Current inded
    this.current = 0;

    //  Start/stop timer
    this.interval = f;

    //  Set some options
    this.opts = {
        speed: 500,
        delay: 3000, // f for no autoplay
        complete: f, // when a slide's finished
        keys: !f, // keyboard shortcuts - disable if it breaks things
        dots: f, // display ••••o• pagination
        fluid: f // is it a percentage width?,
    };

    //  Create a deep clone for methods where context changes
    var _ = this;

    this.init = function(el, opts) {
        this.el = el;
        this.ul = el.children('ul');
        this.max = [el.outerWidth(), el.outerHeight()];         
        this.items = this.ul.children('li').each(this.calculate);

        //  Check whether we're passing any options in to Unslider
        this.opts = $.extend(this.opts, opts);

        //  Set up the Unslider
        this.setup();

        return this;
    };

    //  Get the width for an element
    //  Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0)
    this.calculate = function(index) {
        var me = $(this),
            width = me.outerWidth(), height = me.outerHeight();

        //  Add it to the sizes list
        _.sizes[index] = [width, height];

        //  Set the max values
        if(width > _.max[0]) _.max[0] = width;
        if(height > _.max[1]) _.max[1] = height;
    };

    //  Work out what methods need calling
    this.setup = function() {
        //  Set the main element
        this.el.css({
            overflow: 'hidden',
            width: _.max[0],
            height: this.items.first().outerHeight()
        });

        //  Set the relative widths
        this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'});
        this.items.css('width', (100 / this.items.length) + '%');

        if(this.opts.delay !== f) {
            this.start();
            this.el.hover(this.stop, this.start);
        }

        //  Custom keyboard support
        this.opts.keys && $(document).keydown(this.keys);

        //  Dot pagination
        this.opts.dots && this.dots();

        //  Little patch for fluid-width sliders. Screw those guys.
        if(this.opts.fluid) {
            var resize = function() {
                _.el.css('width', Math.min(Math.round((_.el.outerWidth() / _.el.parent().outerWidth()) * 100), 100) + '%');
            };

            resize();
            $(window).resize(resize);
        }

        if(this.opts.arrows) {
            this.el.parent().append('<p class="arrows"><span class="prev">â†</span><span class="next">→</span></p>')
                .find('.arrows span').click(function() {
                    $.isFunction(_[this.className]) && _[this.className]();
                });
        };

        //  Swipe support
        if($.event.swipe) {
            this.el.on('swipeleft', _.prev).on('swiperight', _.next);
        }
    };

    //  Move Unslider to a slide index
    this.move = function(index, cb) {
        //  If it's out of bounds, go to the first slide
        if(!this.items.eq(index).length) index = 0;
        if(index < 0) index = (this.items.length - 1);

        var target = this.items.eq(index);
        var obj = {height: target.outerHeight()};
        var speed = cb ? 5 : this.opts.speed;

        if(!this.ul.is(':animated')) {          
            //  Handle those pesky dots
            _.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active');
           //HERE IS WHAT I ADDED
           _.el.find('ul li:eq(' + index + ')').addClass('active').siblings().removeClass('active');
            this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
                _.current = index;
                $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el);
            });
        }
    };

    //  Autoplay functionality
    this.start = function() {
        _.interval = setInterval(function() {
            _.move(_.current + 1);
        }, _.opts.delay);
    };

    //  Stop autoplay
    this.stop = function() {
        _.interval = clearInterval(_.interval);
        return _;
    };

    //  Keypresses
    this.keys = function(e) {
        var key = e.which;
        var map = {
            //  Prev/next
            37: _.prev,
            39: _.next,

            //  Esc
            27: _.stop
        };

        if($.isFunction(map[key])) {
            map[key]();
        }
    };

    //  Arrow navigation
    this.next = function() { return _.stop().move(_.current + 1) };
    this.prev = function() { return _.stop().move(_.current - 1) };

    this.dots = function() {
        //  Create the HTML
        var html = '<ol class="dots">';
            $.each(this.items, function(index) { html += '<li class="dot' + (index < 1 ? ' active' : '') + '">' + (index + 1) + '</li>'; });
            html += '</ol>';

        //  Add it to the Unslider
        this.el.addClass('has-dots').append(html).find('.dot').click(function() {
            _.move($(this).index());
        });
    };
};

//  Create a jQuery plugin
$.fn.unslider = function(o) {
    var len = this.length;

    //  Enable multiple-slider support
    return this.each(function(index) {
        //  Cache a copy of $(this), so it 
        var me = $(this);
        var instance = (new Unslider).init(me, o);

        //  Invoke an Unslider instance
        me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance);
    });
};
})(window.jQuery, false);

Answer 2

I don't think you will be able to add an active class. However, The complete function is executed after every slide animation, try something like this:

<script>
    var NB_OF_SLIDES = ...;
    var i = 0;
    loadAjaxForSlide i;
    $('.banner').unslider({
        speed: 500,              
        delay: 5000,              
        complete: function() {
            i++;
            if(i >= NB_OF_SLIDES){
               i = 0;
            }
            loadAjaxForSlide i;
        },  
        keys: true,              
        dots: true,              
        fluid: true              
    });
</script>

But I wouldn't consider loading data via Ajax after every slide animation, it's kinda messy. Try loading everything at once at page load.