Слайдер с Случайным контентом из списка.

[berap]

Я нашел скрипт который выводит контент по рандому.

Но у него нет кнопок. А мне нужно чтоб была возможность менять картинки кнопками.

Попытался сделать их но что то не вышло.

Помогите пожалуйста исправить.

<!--BANNER HEADINGS FOR index.html-->
        <div class="banner-slide-wrapper">
            <div class="banner-slide-ie-fix">
            </div>
        </div>
        <!--BANNER PICTURE FOR index.html-->
        <ul id="banner-slide-images">
            <li class="banner-slide-1"></li>
            <li class="banner-slide-2"></li>
            <li class="banner-slide-3"></li>
            <li class="banner-slide-4"></li>
            <li class="banner-slide-5"></li>
            <li class="banner-slide-6"></li>
            <li class="banner-slide-7"></li>
        </ul>
    
        <!--BANNER CONTROLS-->
	<div id="controls">   
        	<a href="#" id="control-left">
            <div class="control-left" onclick="function(getRan())"></div>
       	    </a>
            <a href="#" id="control-left">
            <div class="control-right" onclick="function(show)"></div>
            </a>
            <div class="control-left-triangle-top"></div>
			<div class="control-left-triangle-bottom"></div>
			<div class="control-right-triangle-top"></div>
			<div class="control-right-triangle-bottom"></div>
	</div>

this.randomtip = function(){

	var pause = 4000; // define the pause for each tip (in milliseconds) Feel free to make the pause longer so users can have time to read the tips :)
	var length = $("#banner-slide-images li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
    
	this.show = function(){
		var ran = getRan();
		// to avoid repeating tips we need to check 
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#banner-slide-images li").hide();	
		$("#banner-slide-images li:nth-child(" + ran + ")").fadeIn("fast");	     
	};
    
		$("#control-left").click(function(){
		$("#banner-slide-images li").hide();
		$("#banner-slide-images li:nth-child(" + temp + ")").fadeIn("fast");	
		});

		$("#control-right").click(function(){
		$("#banner-slide-images li").hide();
        $("#banner-slide-images li:nth-child(" + ran + ")").fadeIn("fast");
		});      
    
	// initiate the script and also set an interval
	show(); setInterval(show,pause);
};
    
$(document).ready(function(){	
	randomtip();
});

[Tek]

Есть где в онлайне посмотреть? +не хватает сброса счетчика:

//Если картинки по клику выбраться случайно, объединяем их	
$("#control-right, #control-left").click(function(){
$("#banner-slide-images li").hide();
    //не получаешь новое значение ran
    while (ran == temp){
        ran = getRan();
    };  
    clearInterval(interval);//обнуляем таймер 
    interval = setInterval(show,pause);
    $("#banner-slide-images li:nth-child(" + ran + ")").fadeIn("fast");
});

на клик. забыл для обнуления интервала его нужно присваивать в переменную, замени show(); setInterval(show,pause); на:

show(); var interval = setInterval(show,pause);

[berap]

Спасибо большое за помощь. Надо учить JS и jQuery(

Сейчас сделал вот так вот следуя вашим советам.

Попытался сделать чтоб сохранялась последняя позиция чтоб кнопка назад работала нормально.
Но не всегда работает правильно не знаю почему.

this.randomImg = function(){

	var pause = 4000; // define the pause for each tip (in milliseconds) Feel free to make the pause longer so users can have time to read the tips :)
	var length = $("#banner-slide-images li").length; 
	var temp = -1; 
    var temp2 = 0;
    
	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
    
this.show = function(){
   var ran = getRan();
   // to avoid repeating tips we need to check
   temp2 = temp;
   while (ran == temp){
   ran = getRan();
   };
   temp = ran;
   $("#banner-slide-images li").hide();   
   $("#banner-slide-images li:nth-child(" + ran + ")").fadeIn("fast");     
};    
	
$("#control-left").click(function(){
$("#banner-slide-images li").hide();
    clearInterval(interval);//обнуляем таймер 
    interval = setInterval(show,pause);
    $("#banner-slide-images li:nth-child(" + temp2 + ")").fadeIn("fast");
});

$("#control-right").click(function(){
clearInterval(interval);//обнуляем таймер 
interval = setInterval(show,pause);
var ran = getRan();
temp2 = temp;
while (ran == temp){
ran = getRan();
};
temp = ran;
$("#banner-slide-images li").hide();
$("#banner-slide-images li:nth-child(" + ran + ")").fadeIn("fast");
}); 
    
	// initiate the script and also set an interval
	show(); var interval = setInterval(show,pause);
};
    
$(document).ready(function(){	
	randomImg();
});