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