Здравствуйте! Работаю над одним сайтом с поблочной прокруткой, использовал jquery плагин fullpage.js. Плагин также включает в себя свой горизонтальный слайдер, индикаторы слайдера можно сделать только точечками, а мне нужно сделать циферки как 1 из 7 (см. скрин), как сделать свои стрелочки для навигации я нашел, осталось сделать циферки.
Как можно это реализовать на jQ или га чистом JS?
По мне, задача вроде не очень сложная, но сам не могу сделать, я еще не очень в JS.
Буду очень признателен за помощь! Заранее спасибо!
$(document).ready(function() {
$('#fullpage').fullpage({
slidesNavigation: true,
slidesNavPosition: 'top',
sectionsColor : ['#d8d3ff', '#fff'],
paddingTop: '0',
paddingBottom: '0'
});
$('.nav_prev').on('click', function(){
$.fn.fullpage.moveSlideLeft();
});
$('.nav_next').on('click', function(){
$.fn.fullpage.moveSlideRight();
});
});
body {
font-family: sans-serif, arial;
font-size: 16px;
text-align: center;
}
.slider_nav {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
z-index: 1;
}
.nav_prev, .nav_next {
display: inline-block;
margin: 0 10px;
padding: 5px 10px;
background: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav_prev:hover, .nav_next:hover {
cursor: pointer;
background: #fff;
}
.slides_indicator {
display: inline-block;
font-size: 14px;
}
.slides_indicator span:first-child {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet"/>
<div id="fullpage">
<div class="section">
<div class="slider_wrap">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
<!-- Slider Nav -->
<div class="slider_nav">
<div class="nav_prev"> prev </div>
<div class="slides_indicator">
<span>1</span> / <span>7</span>
</div>
<div class="nav_next"> next </div>
</div>
<!-- Slider Nav -->
</div>
</div>
<div class="section">Some section</div>
</div>
div .slider_wrap
с селекторомdiv .slide
. Количество детей подставьте вslides_indicator
. Возможно, в вашем слайдере уже всё реализовано, нужно только найти в документации.