Simple Carousel

HTML

<div class="tgt-carousel">
	<span id="tgt-prev">prev</span>
	<ul>
		<li>First Text goes here . . .</li>
		<li>Second Text goes here . . .</li>
		<li>Third Text goes here . . .</li>
		<li>Fourth Text goes here . . .</li>
		<li>Fifth Text goes here . . .</li>
		<li>Sixth Text goes here . . .</li>
		<li>Seventh Text goes here . . .</li>
	</ul>
	<br><span id="tgt-next">next</span>
</div>

CSS

.tgt-hide{display:none;}
.tgt-show{display:block;}
.tgt-arrows{cursor:pointer;}

JavaScript

/**
 * This Plugin is used to do Simple text carousel.
 */

(function ( $ ) {

	var tgtConfig = {
        'hide': 'tgt-hide',
        'prevClass': 'tgt-prev',
        'nextClass': 'tgt-next',
        'arrowClass': 'tgt-arrows',
        'activeClass': 'tgt-active'
    };

    $.fn.tgtCarousel = function(settings) {
    	if (settings){
    		$.extend(tgtConfig, settings);
    	}

        var prevButton = '#' + tgtConfig.prevClass;
        var nextButton = '#' + tgtConfig.nextClass;
        var arrowButtons = prevButton + ', ' + nextButton;
        $(arrowButtons).addClass(tgtConfig.arrowClass);

        this.children('ul').children('li:eq(0)').addClass(tgtConfig.activeClass);
		this.children('ul').children('li:gt(0)').addClass(tgtConfig.hide);

		$(prevButton).bind( "click", function() {
			var activeItem = $(this).next('ul').children('.' + tgtConfig.activeClass);
			if(activeItem.prev().size() > 0) {
				activeItem.prev().removeClass(tgtConfig.hide).addClass(tgtConfig.activeClass);
				activeItem.removeClass(tgtConfig.activeClass).addClass(tgtConfig.hide);
			}
		});

		$(nextButton).bind( "click", function() {
			var activeItem = $(this).prev('ul').children('.' + tgtConfig.activeClass);
			if(activeItem.next().size() > 0){
				activeItem.next().removeClass(tgtConfig.hide).addClass(tgtConfig.activeClass);
				activeItem.removeClass(tgtConfig.activeClass).addClass(tgtConfig.hide);
			}
		});

        return this;
    };

}( jQuery ));

$(function() {
    // Initialize the Carousel.
    $( ".tgt-carousel" ).tgtCarousel({
        'hide': 'tgt-hide'
    });
});