$(document).ready(function() {
    $(".slides").cycle({
        fx: "scrollHorz",
        timeout: 8000,
        next: ".slider_right_control",
        prev: ".slider_left_control",
        after: onAfter
    });
});

function onAfter(curr, next, opts) {

    var currentSlide = opts.currSlide + 1;

    if (currentSlide == 1) {
        document.getElementById('slide_1').className = "slider_active";
        document.getElementById('slide_2').className = "slider_inactive";
        document.getElementById('slide_3').className = "slider_inactive";
        document.getElementById('slide_4').className = "slider_inactive";
    }
    else if (currentSlide == 2) {
        document.getElementById('slide_1').className = "slider_inactive";
        document.getElementById('slide_2').className = "slider_active";
        document.getElementById('slide_3').className = "slider_inactive";
        document.getElementById('slide_4').className = "slider_inactive";
    }
    else if (currentSlide == 3) {
        document.getElementById('slide_1').className = "slider_inactive";
        document.getElementById('slide_2').className = "slider_inactive";
        document.getElementById('slide_3').className = "slider_active";
        document.getElementById('slide_4').className = "slider_inactive";
    }
    else if (currentSlide == 4) {
        document.getElementById('slide_1').className = "slider_inactive";
        document.getElementById('slide_2').className = "slider_inactive";
        document.getElementById('slide_3').className = "slider_inactive";
        document.getElementById('slide_4').className = "slider_active";
    }
}