jQuery - Simple slider with toggleclass method. Animations can be defined from css.

ready-slider.js

// Sample: http://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect/12608357#12608357

var $selector = $(selector);
var $btnPrev = $selector.find('.tri-prev');
var $btnNext = $selector.find('.tri-next');

var $slides = $selector.find('.slides li');
var lastIndex = $slides.length-1;
var index;

// Reset Slider
$slides.first().addClass('active');

// If One Slide Hide Buttons
if ( !lastIndex ) {
    $btnPrev.hide();
    $btnNext.hide();
}

// Slide Change Response
function sliderResponse(index) {
    if ( lastIndex ) {
        $selector.addClass('isAni');// prevent consecutively click
        $slides.removeClass('active');
        setTimeout(function () {
            $selector.removeClass('isAni');
            $slides.eq(index).addClass('active');
        },444);
    }
}

// Button Prev Response
$btnPrev.click(function() {
    if ( !$selector.hasClass('isAni') ) {
        index = $selector.find('.slides li.active').index();
        index === 0 ? index = lastIndex : index = index-1;
        sliderResponse(index);
        resetTiming();
    }
    return false;
});

// Button Next Response
$btnNext.click(function() {
    if ( !$selector.hasClass('isAni') ) {
        index = $selector.find('.slides li.active').index();
        index === lastIndex ? index = 0 : index = index + 1;
        sliderResponse(index);
        resetTiming();
    }
    return false;
});

// Timing Responses
function sliderTiming() {
    index = $selector.find('.slides li.active').index();
    index === lastIndex ? index = 0 : index = index+1;
    sliderResponse(index);
}
var timingRun = setInterval(function() { sliderTiming(); },7000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },7000);
}