Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2016, 23:53
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

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

});
Ответить с цитированием
  #2 (permalink)  
Старый 30.09.2016, 00:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

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

http://javascript.ru/forum/showthread.php?p=417625#post417628
Ответить с цитированием
  #3 (permalink)  
Старый 30.09.2016, 09:20
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

Сообщение от рони Посмотреть сообщение
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)"); // Смещаем блок со слайдами к предыдущему
		}
	});

});
Ответить с цитированием
  #4 (permalink)  
Старый 30.09.2016, 10:45
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от insaidd
$("body .cliter .prev")
Это что за порнография? )))

insaidd, ты хочешь именно этот код починить, или вообще сделать рабочий слайдер по сценарию в первом сообщении?
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2016, 11:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

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()
});
Ответить с цитированием
  #6 (permalink)  
Старый 30.09.2016, 12:01
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

Сообщение от warren buffet Посмотреть сообщение
Это что за порнография? )))

insaidd, ты хочешь именно этот код починить, или вообще сделать рабочий слайдер по сценарию в первом сообщении?
Починить именно этот, если можно!
Ответить с цитированием
  #7 (permalink)  
Старый 30.09.2016, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

бесконечная прокрутка слайдера на 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>
Ответить с цитированием
  #8 (permalink)  
Старый 30.09.2016, 14:16
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

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

Единственное что, можно ли по бокам поставить стрелки для принудительной смены слайдов?
Ответить с цитированием
  #9 (permalink)  
Старый 30.09.2016, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

insaidd,
может не изобретать, а взять готовый слайдер которых кучи?
Ответить с цитированием
  #10 (permalink)  
Старый 30.09.2016, 15:36
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает автопрокрутка слайдера podsolomko95 Элементы интерфейса 0 06.04.2016 12:02
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 14:52
bxslider булиты(представления) в виде слайдера Baton1777 Элементы интерфейса 9 18.07.2015 23:48
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 15:56
Автоматизация слайдера IVAAAAN jQuery 1 25.10.2013 17:37