Здравствуйте! Работаю над одним сайтом с поблочной прокруткой, использовал 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>
