Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоматизация слайдера (https://javascript.ru/forum/dom-window/65149-avtomatizaciya-slajjdera.html)

insaidd 29.09.2016 23:53

Автоматизация слайдера
 
Друзья, есть скрипт слайдера, прошу помогите его активировать, что бы каждые 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)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});

рони 30.09.2016 00:27

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

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

insaidd 30.09.2016 09:20

Цитата:

Сообщение от рони (Сообщение 430266)
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

Код:

.cliter {
                overflow:hidden; /* Скрываем всё что за блоком слайдера */
                position:relative;
                margin:0 auto;
                width:250px;
                height:190px;
                margin: 0 10px 0 0 ;
        }
       
       
.cliter .clites {
                        position:relative;
                        transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */
                }
               
.cliter .clites .clite {
                                float:left;
                                display:block;
                        }
                       
.cliter .next {
                        position:absolute;
                        height:50px;
                        width:30px;
                        background: url(/_include/index2/images/2next.png) no-repeat center;
                        right:0;
                        top:70px;
                        z-index:1;
                        cursor:pointer;
                }
.cliter .next:hover {
                        position:absolute;
                        height:50px;
                        width:30x;
                        background: url(/_include/index2/images/2next2.png) no-repeat center;
                        right:0;
                        top:70px;
                        z-index:1;
                        cursor:pointer;
                }
               
.cliter .prev {
                        position:absolute;
                        height:50px;
                        width:20px;
                        background: url(/_include/index2/images/2prev.png) no-repeat center;
                        left:0;
                        top:70px;
                        z-index:1;
                        cursor:pointer;
                }
.cliter .prev:hover {
                        position:absolute;
                        height:50px;
                        width:20px;
                        background: url(/_include/index2/images/2prev2.png) no-repeat center;
                        left:0;
                        top:70px;
                        z-index:1;
                        cursor:pointer;
                }
               
.clite1 {
        width:250px;
        height:190px;
       
}

.cliteImg {
        width:200px;
        height:152px;
        position:relative;
        float:left;
        left:22.5px;
        top:19px;
}

.cliteH2 {
        margin-left:25px;
        width:650px;
        height:50px;
        position:relative;
        left:100px;
        top:50px;
        float:left;
}
@font-face {
        font-family: DINPro;
        src: url(/_include/font/DINPro-Black.ttf);
}

.cliteH2 .h2first {
        font-family: DINPro, 'Comic Sans MS', cursive;
        color: #e20e0e;
        font-size:45px;
        padding:0;
        margin:0;
}

.cliteH2 .h2second {
        font-family: DINPro, 'Comic Sans MS', cursive;
        color: #f7941e;
        font-size:45px;
        padding:0;
        margin:0;
}

.cliteH2 .h2poridge {
        font-family: DINPro, 'Comic Sans MS', cursive;
        color: #d31576;
        font-size:45px;
        padding:0;
        margin:0;
}
.cliteH2 .h2desert {
        font-family: DINPro, 'Comic Sans MS', cursive;
        color: #d31576;
        font-size:35px;
        padding:0;
        margin:0;
}
.cliteH2 .h2drinks {
        font-family: DINPro, 'Comic Sans MS', cursive;
        color: #12bab0;
        font-size:45px;
        padding:0;
        margin:0;
}

.cliteDesc {
        margin-left:25px;
        width:650px;
        height:250px;
        position:relative;
        left:100px;
        top:75px;
        float:left;
}
.cliteButton {
        text-align:center;
        margin-left:25px;
        width:650px;
        height:50px;
        position:relative;
        left:100px;
        top:100px;
        float:left;
}

вод КОД 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)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});

warren buffet 30.09.2016 10:45

Цитата:

Сообщение от insaidd
$("body .cliter .prev")

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

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

рони 30.09.2016 11:57

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()
});

insaidd 30.09.2016 12:01

Цитата:

Сообщение от warren buffet (Сообщение 430281)
Это что за порнография? )))

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

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

рони 30.09.2016 12:02

бесконечная прокрутка слайдера на 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 30.09.2016 14:16

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

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

рони 30.09.2016 14:24

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

warren buffet 30.09.2016 15:36

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


Часовой пояс GMT +3, время: 22:31.