kirilkirkov/divs_changing(Carousel)

## divs_changing(Carousel)
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            .game {display:none;}
            .active-g {display:block}
            .checked {color:red;}
        </style>
    </head>

    <body>
        <div class="game game-1 active-g">Div 1</div>
        <div class="game game-1 active-g">Div _1</div>

        <div class="game game-2">Div 2</div>
        <div class="game game-2">Div _2</div>

        <div class="game game-3">Div 3</div>
        <div class="game game-3">Div _3</div>

        <a href="#game-1" class="change-g checked">X</a>
        <a href="#game-2" class="change-g">X</a>
        <a href="#game-3" class="change-g">X</a>

        <script>
            if ($('.game').length / 2 > 1) {
                var current = 1;
                var again = false;
                function nextSlide() {
                    $('.game').fadeOut(1500);
                    $('.change-g').removeClass('checked');
                    again == true ? again = false : current++;
                    $('.game-' + current).delay(1505).fadeIn(1500);
                    $("a[href='#game-" + current + "']").addClass('checked');
                    if (current == $('.game').length / 2) {
                        again = true;
                        current = 1;
                    }
                }
                var interv = setInterval(function () {
                    nextSlide();
                }, 5000);
                $('.change-g').click(function () {
                    clearInterval(interv);
                    $('.change-g').removeClass('checked');
                    $(this).addClass('checked');
                    var game = $(this).attr('href').replace('#', '');
                    $('.game').hide();
                    $('.' + game).show();
                });
            }
        </script>
        <!-- http://jscc.info/ - Compatibility Tested! -->
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<style>
	.game {display:none;}
	.active-g {display:block}
	.checked {color:red;}
	</style>
	</head>

	<body>
	<div class="game game-1 active-g">Div 1</div>
	<div class="game game-1 active-g">Div _1</div>

	<div class="game game-2">Div 2</div>
	<div class="game game-2">Div _2</div>

	<div class="game game-3">Div 3</div>
	<div class="game game-3">Div _3</div>

	<a href="#game-1" class="change-g checked">X</a>
	<a href="#game-2" class="change-g">X</a>
	<a href="#game-3" class="change-g">X</a>

	<script>
	if ($('.game').length / 2 > 1) {
	var current = 1;
	var again = false;
	function nextSlide() {
	$('.game').fadeOut(1500);
	$('.change-g').removeClass('checked');
	again == true ? again = false : current++;
	$('.game-' + current).delay(1505).fadeIn(1500);
	$("a[href='#game-" + current + "']").addClass('checked');
	if (current == $('.game').length / 2) {
	again = true;
	current = 1;
	}
	}
	var interv = setInterval(function () {
	nextSlide();
	}, 5000);
	$('.change-g').click(function () {
	clearInterval(interv);
	$('.change-g').removeClass('checked');
	$(this).addClass('checked');
	var game = $(this).attr('href').replace('#', '');
	$('.game').hide();
	$('.' + game).show();
	});
	}
	</script>
	<!-- http://jscc.info/ - Compatibility Tested! -->
	</body>
	</html>