29.09.2016, 22:53
|
|
Новичок на форуме
|
|
Регистрация: 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)"); // Смещаем блок со слайдами к предыдущему
}
});
});
|
|
30.09.2016, 08:20
|
|
Новичок на форуме
|
|
Регистрация: 29.09.2016
Сообщений: 6
|
|
Рони, пардон за невежество, но мои знания в 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)"); // Смещаем блок со слайдами к предыдущему
}
});
});
|
|
30.09.2016, 09:45
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от insaidd
|
|
$("body .cliter .prev")
|
Это что за порнография? )))
insaidd, ты хочешь именно этот код починить, или вообще сделать рабочий слайдер по сценарию в первом сообщении? |
|
30.09.2016, 10:57
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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()
});
|
|
30.09.2016, 11:01
|
|
Новичок на форуме
|
|
Регистрация: 29.09.2016
Сообщений: 6
|
|
Сообщение от warren buffet
|
Это что за порнография? )))
insaidd, ты хочешь именно этот код починить, или вообще сделать рабочий слайдер по сценарию в первом сообщении?
|
Починить именно этот, если можно!  |
|
30.09.2016, 11:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
бесконечная прокрутка слайдера на 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>
|
|
30.09.2016, 13:16
|
|
Новичок на форуме
|
|
Регистрация: 29.09.2016
Сообщений: 6
|
|
|
РОНИ, это волшебство какое-то)) Честно!
Единственное что, можно ли по бокам поставить стрелки для принудительной смены слайдов?
|
|
30.09.2016, 13:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
insaidd,
может не изобретать, а взять готовый слайдер которых кучи?
|
|
30.09.2016, 14:36
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
рони, сам погибай, а товарища выручай, сделай товарищу стрелки и приготовься делать калбек на подписи )))
|
|
|
|
