Переключение по слайдам в слайдере
Есть слайдер, с помощью которого можно листать слайды влево и вправо. Пыталась сделать так, чтобы можно было листать и по конкретным слайдам. (В данном случае их всего два)
+ чтобы при "листании" вправо или влево отмечалось на каком слайде находимся с помощью класса .block-pancakes-indicators__item_active Но у меня ничего не выходило. Прошу помочь, так как в первый раз делаю такого видела слайдер. https://jsfiddle.net/91py1awo/ |
простейший слайдер с точечной навигацией
Rimako,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<style type="text/css">
.block-pancakes__arrow-left, .block-pancakes__arrow-right {
cursor: pointer;
}
.block-pancakes__arrow-left, .block-pancakes__arrow-right {
vertical-align: middle;
height: 110px;
}
.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
display: inline-block;
}
.block-pancakes__slider-wrapper {
display: inline-block;
width: 360px;
overflow: hidden;
position: relative;
height: 90px;
margin: 0 auto;
}
.block-pancakes__slider-container {
width: 740px;
position: absolute;
}
.block-pancakes__slider-img {
margin: 0 14px;
}
.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
display: inline-block;
}
.block-pancakes__slider-img_type_block {
display: block;
}
.block-pancakes-indicators {
padding-left: 0;
list-style: none;
position: absolute;
left: 35%;
}
.block-pancakes-indicators__item {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 12px;
text-indent: -999px;
cursor: pointer;
background-color: #5a5751;
border-radius: 14px;
}
.block-pancakes-indicators__item_active {
margin: 0 12px 0 0;
background-color: #dabda6;
}
.block-pancakes__arrow.hide{
display: none;
}
</style>
<title></title>
<script>
$(function() {
var $container = $(".block-pancakes__slider-container"),
$arrow = $(".block-pancakes__arrow"),
i = 0,
len = 6,
n = 3,
$indicators = $(".block-pancakes-indicators__item");
$indicators.each(function(indx, li) {
$(li).on("click", function() {
setIndex(n * indx)
})
});
$arrow.on("click", function(e) {
var isLeft = $(this).hasClass("block-pancakes__arrow-left");
i += isLeft ? n : -n;
i > len - n && (i = len - n);
i < 0 &&
(i = 0);
setIndex(i)
});
function setIndex(i) {
$arrow.removeClass("hide");
i == 0 && $arrow.eq(1).addClass("hide");
i == len - n && $arrow.eq(0).addClass("hide");
$indicators.removeClass("block-pancakes-indicators__item_active")
.eq(i / n).addClass("block-pancakes-indicators__item_active");
var left = -i * 120 + "px";
$container.stop().animate({left: left}, 300)
}
});
</script>
</head>
<body>
<div class="block-pancakes__slider">
<div class="block-pancakes__arrow block-pancakes__arrow-left">
<img src="http://savepic.ru/14972720.png" alt="arrow left" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-wrapper">
<div class="block-pancakes__slider-container">
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14978864.png" alt="pancake 1" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14993200.png" alt="pancake 2" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14973745.png" alt="pancake 3" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14993200.png" alt="pancake 4" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14973745.png" alt="pancake 5" class="block-pancakes__slider-img_type_block">
</div>
<div class="block-pancakes__slider-img">
<img src="http://savepic.ru/14978864.png" alt="pancake 6" class="block-pancakes__slider-img_type_block">
</div>
</div>
</div>
<div class="block-pancakes__arrow block-pancakes__arrow-right hide">
<img src="http://savepic.ru/14954288.png" alt="arrow left" class="block-pancakes__slider-img_type_block">
</div>
<ol class="block-pancakes-indicators">
<li class="block-pancakes-indicators__item block-pancakes-indicators__item_active"></li>
<li class="block-pancakes-indicators__item"></li>
</ol>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:12. |