Автоматизация слайдера
 

Друзья, есть скрипт слайдера, прошу помогите его активировать, что бы каждые 5 секунд слайд менялся, а после того как слайды кончились вернулся к 1 и пустился заново.

$(document).ready(function() { // Ждём загрузки страницы
						   
	var clites = $(".cliter .clites").children(".clite"); // Получаем массив всех слайдов
	var width = $(".cliter .clites").width(); // Получаем ширину видимой области
	var i = clites.length; // Получаем количество слайдов
	var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
	i--; // уменьшаем кол-во слайдов на один ( для проверки в будущем )
	$(".cliter .clites").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
	
	offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
	$("body .cliter .next").click(function(){	// Событие клика на кнопку "следующий слайд"
		if (offset < width * i) {	// Проверяем, дошли ли мы до конца
			offset += width; // Увеличиваем смещение до следующего слайда
			$(".cliter .clites").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
		}
	});


	$("body .cliter .prev").click(function(){	// Событие клика на кнопку "предыдущий слайд"
		if (offset > 0) { // Проверяем, дошли ли мы до конца
			offset -= width; // Уменьшаем смещение до предыдущегоо слайда
			$(".cliter .clites").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});

insaidd,
сделайте пример с html и css ... раз не нашли среди десятков примеров ответа на ваш вопрос.

http://javascript.ru/forum/showthread.php?p=417625#post417628

Рони, пардон за невежество, но мои знания в JS заканчиваются там где начинаются, у меня много примеров слайдеров с автоматическим проигрыванием, но я просто не смогу интегрировать эти решения в этот слайдер.

вот код HTML

<div class="cliter">
				<div class="next wow slideInRight2"></div>
				<div class="prev wow slideInLeft2"></div>
					<div class="clites">
						<div class="clite">
							<div class="clite1">
								<div class="cliteImg wow fadeInLeft2">
									<img src="/_include/index2/catalog/borstch.jpg" width="200" height="400" alt="Космическое питание - БОРЩ" title="Космическое питание - БОРЩ"/>
								</div>
								<div class="cliteH2 wow fadeInDown">
									<h2 class="h2first">БОРЩ</h2>
								</div>
								<div class="cliteDesc wow fadeInRight">
									<p class="justify"><span class="strong">Описание: </span>Традиционный продукт русской кухни, самое распространённое блюдо, как в домашнем, так и в любом ресторанном меню. По праву входит в состав корпоративного подарочного набора, так как вкус горячего, наваристого Борща с детства знаком каждому. </p>
									<p class="justify"><span class="strong">Состав: </span>Мясо говядина, капуста, свекла столовая, картофель, морковь, лук репчатый, масло растительное, паста томатная, сахар-песок, лимонная кислота, перец чёрный молотый, соль пищевая, бульон.</p>
									<p class="justify"><span class="strong">Срок годности: </span>12 месяцев</p>
								</div>
								<div class="cliteButton wow fadeInUp"><a href="/zakaz.php"><input type="button" value="Хочу попробовать" class="bottonindex2"/></a></div>
							</div>
						</div>
						<div class="clite">
							<div class="clite1">
								<div class="cliteImg">
									<img src="/_include/index2/catalog/soup_gribnoy.jpg" width="200" height="400" alt="Космическое питание - БОРЩ" title="Космическое питание - БОРЩ"/>
								</div>
								<div class="cliteH2">
									<h2 class="h2first">Крем-Суп грибной</h2>
								</div>
								<div class="cliteDesc wow fadeInRight">
									<p class="justify"><span class="strong">Описание: </span>Грибной суп издавна любят и употребляют все категории населения нашей страны, вкус грибного супа знает каждый. Этот чудный запах грибов в хвойном лесу будоражит сознание и мы уверены, что найдётся много желающих купить и попробовать на вкус грибной суп из тюбика.</p>
									<p class="justify"><span class="strong">Состав: </span>Грибы свежие шампиньоны, картофель, лук репчатый, морковь столовая, масло растительное, соль пищевая, перец чёрный молотый, мука пшеничная высший сорт, сливки, бульон.</p>
									<p class="justify"><span class="strong">Срок годности: </span>12 месяцев</p>
								</div>
								<div class="cliteButton wow fadeInUp"><a href="/zakaz.php"><input type="button" value="Хочу попробовать" class="bottonindex2"/></a></div>
							</div>
						</div>
						<div class="clite">
							<div class="clite1">
								<div class="cliteImg">
									<img src="/_include/index2/catalog/soup_gorohoviy.jpg" width="200" height="400" alt="Космическое питание - БОРЩ" title="Космическое питание - БОРЩ"/>
								</div>
								<div class="cliteH2">
									<h2 class="h2first">Суп гороховый</h2>
								</div>
								<<div class="cliteDesc wow fadeInRight">
									<p class="justify"><span class="strong">Описание: </span>Вкус горохового супа без преувеличения знаком каждому жителю нашей страны, это воспоминания о столовой в пионерском лагере, а для кого-то воспоминания об армейских буднях, но как бы то ни было, никто не откажется купить гороховый суп и предаться светлым воспоминаниям вместе с нашим продуктом.</p>
									<p class="justify"><span class="strong">Состав: </span>Мясо свинина, горох, лук репчатый, морковь столовая, масло растительное, картофель, соль пищевая, перец чёрный молотый, петрушка сушёная, петрушка корень сушёный, бульон.</p>
									<p class="justify"><span class="strong">Срок годности: </span>12 месяцев</p>
								</div>
								<div class="cliteButton wow fadeInUp"><a href="/zakaz.php"><input type="button" value="Хочу попробовать" class="bottonindex2"/></a></div>
							</div>
						</div>
					</div>
			</div>

вот код CSS

вод КОД JS

$(document).ready(function() { // Ждём загрузки страницы
						   
	var clites = $(".cliter .clites").children(".clite"); // Получаем массив всех слайдов
	var width = $(".cliter .clites").width(); // Получаем ширину видимой области
	var i = clites.length; // Получаем количество слайдов
	var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
	i--; // уменьшаем кол-во слайдов на один ( для проверки в будущем )
	$(".cliter .clites").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
	
	offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
	$("body .cliter .next").click(function(){	// Событие клика на кнопку "следующий слайд"
		if (offset < width * i) {	// Проверяем, дошли ли мы до конца
			offset += width; // Увеличиваем смещение до следующего слайда
			$(".cliter .clites").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
		}
	});


	$("body .cliter .prev").click(function(){	// Событие клика на кнопку "предыдущий слайд"
		if (offset > 0) { // Проверяем, дошли ли мы до конца
			offset -= width; // Уменьшаем смещение до предыдущегоо слайда
			$(".cliter .clites").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});

Это что за порнография? )))

insaidd, ты хочешь именно этот код починить, или вообще сделать рабочий слайдер по сценарию в первом сообщении?

insaidd,
если нужна только прокрутка

.cliter .clites {
      transition:0s;
    }

$(function() {
    var ul = $('.clites'), widthAll = 0;
    $('.clite', ul).each(function(indx, element){
      widthAll +=  this.offsetWidth
      });
    ul.width(widthAll);
    function go() {
        var li = $('.clite:first', ul), w = li.width();
        ul.delay(3000).animate({
            left: -w
        }, 2000, function () {
            li.appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
});

Починить именно этот, если можно!:lol:

бесконечная прокрутка слайдера на jquery, макет
 

insaidd,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;
  }
  #carusel {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  div{
     overflow:hidden; width: 200px; height:50px; position: relative;  margin: 100px auto;
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
   $(function() {
    var ul = $('#carusel'), widthAll = 0;
    $('li', ul).each(function(indx, element){
      widthAll +=  this.offsetWidth
      });
    ul.width(widthAll);
    function go() {
        var li = $('li:first', ul), w = li.width();
        ul.delay(3000).animate({
            left: -w
        }, 2000, function () {
            li.appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
});
})
  </script>
</head>

<body>
<div>
		<ul id="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;width: 120px;">2</li>
			<li  id = "3" style="background-color:Yellow;width: 70px; ">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
	</div>
</body>
</html>

РОНИ, это волшебство какое-то)) Честно!

Единственное что, можно ли по бокам поставить стрелки для принудительной смены слайдов?

insaidd,
может не изобретать, а взять готовый слайдер которых кучи?

рони, сам погибай, а товарища выручай, сделай товарищу стрелки и приготовься делать калбек на подписи )))

РОНИ, все слайдеры которые я нашел, слишком громоздкие, с дополнительными фичами. Мне нужен простой перелистователь, я пробовал брать готовые, но они очень криво встают, то DIV летают как попало, то сценарии косячат.

Все что ты мне написал меня устраивает, просто кнопки ну очень нужны))):-?

бесконечная прокрутка слайдера на jquery с кнопками, макет
 

insaidd,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .slider li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;

  }
 .slider .carusel {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  .slider{
     overflow:hidden; width: 200px; height:50px; position: relative;  margin: 100px auto;
  }


 .prev, .next{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #DCDCDC;
    top: 10px;
    left: 0;
    border-radius: 50%;
    opacity: .3;
    cursor: pointer;
 }
.next{
  left: 180px;
}
.slider:hover .prev,.slider:hover .next{
  opacity: 1;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

  $(function() {
    var ul = $(".carusel"),
        widthAll = 0,
        loop = true,
        pause = 2000,
        spide = 1200,
        next = false;
    $("li", ul).each(function(indx, element) {
        widthAll += this.offsetWidth
    });
    ul.width(widthAll);

    function go() {
        var li = next ? $("li:last", ul) : $("li:first", ul),
            w = li.width();
        next && (ul.prepend(li).css({
            left: -w
        }), w = 0);
        ul.delay(pause).animate({
            left: -w
        }, spide, function() {
            !next && ul.append(li).css({
                left: 0
            });
            loop && go()
        })
    }
    go();
    $(".slider").on("mouseenter", function() {
        loop = false;
        ul.stop()
    }).on("mouseleave", function() {
        ul.stop();
        loop = true;
        pause = 2000;
        spide = 1200;
        go()
    }).on("click", ".prev, .next", function() {
        pause = 0;
        spide = 800;
        next = $(this).is(".next");
        go()
    })
});

  </script>
</head>

<body>
<div class="slider">
	<ul class="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;width: 120px;">2</li>
			<li  id = "3" style="background-color:Yellow;width: 70px; ">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
<div class="prev"><</div>
<div class="next">></div>
	</div>
</body>
</html>

РОНИ ТЫ ВОЛЩЕБНИК!!!

рони,
Не могли бы объяснить код на 68-й строке, или дать ссылку, где такой прием объясняется?

loop && go();

То есть, можно написать так:

var act = false;
function func(a, b){}
act && func(a, b);
// или
act && function(){}

И если act является false, то функция не выполняется, а если true - выполняется?

да
:)
подробнее ниже по ссылке
&&