0

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

1
  • Сделайте выборку "детей" div .slider_wrap с селектором div .slide. Количество детей подставьте в slides_indicator. Возможно, в вашем слайдере уже всё реализовано, нужно только найти в документации.
    – ArchDemon
    10 дек 2017 в 6:33

1 ответ 1

1

Что то типа того? Или я не совсем понял?

$(document).ready(function() {
  $('#fullpage').fullpage({ 
    slidesNavPosition: 'top',
    sectionsColor : ['#d8d3ff', '#fff'],
    paddingTop: '0',
    paddingBottom: '0', 
    controlArrows: false, //Отключаем стрелки
    sectionsColor: ['#8FB98B', '#DE564B', '#EAE1C0'], //Фон скролов
    slidesNavigation: true,// Навигация точками
  });
  
  $("#all").text($(".slide").length); //Общие количество слайдов
  var index = 1; var all = $("#all").text();
  
  $('.nav_prev').on('click', function(){
    $.fn.fullpage.moveSlideLeft();   
    $("#start").text( $('.slide.active').index()+1 ); //index активного слайда    
  });
   
  $('.nav_next').on('click', function(){
    $.fn.fullpage.moveSlideRight();
    $("#start").text( $('.slide.active').index()+1 ); //index активного слайда
  });  
});
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 id="start">1</span> / <span id="all">0</span>
          </div>
        <div class="nav_next"> next </div>
      </div>
      <!-- Slider Nav -->
    </div>    
  </div>
	<div class="section">Some section</div>
</div>

1
  • Большое спасибо! Да, это то что нужно! 10 дек 2017 в 20:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.