Bonjour, j'utilise jQuery pour créer une navigation personnalisée, mais je ne peux pas trouver comment détecter la diapositive active et appliquer un état actif au bouton de cette diapositive.

J'ai configuré un jsfiddle pour mieux montrer ce que j'essaie de faire, essentiellement la même fonction que les points / pager dans le curseur mais sur les boutons 1 2 et 3.

Je suis nouveau dans la partie .data de jQuery: P

http://jsfiddle.net/unknown601/yxErC/17/

<div class="number" id="" data-slider="0">
  Button 1
</div>
<div class="number" id="" data-slider="1">
  Button 2
</div>
<div class="number" id="" data-slider="2">
  Button 3
</div>

<ul class="slider">
  <li data-current="1">
    <img src="http://placehold.it/350x150">
    <p>Slider-1</p>
  </li>

  <li data-current="2">
    <img src="http://placehold.it/350x150">
    <p>Slide 2</p>
  </li>

  <li data-current="3">
    <img src="http://placehold.it/350x150">
    <p> Slide 3</p>
  </li>

</ul>



   #current {
  color: red;
  font-weight: bold;
}

.number:hover {
  color: blue;
  cursor: pointer;
}

Vous avez les boutons pour contrôler le curseur :)

var Slider;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
  });
});
4
user3972139 8 mars 2016 à 02:06

3 réponses

Meilleure réponse

Violon de travail .

Vous pouvez ajouter une classe au bouton cliqué et la supprimer d'un autre bouton à l'intérieur de l'événement click:

$('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');

    $('.number').removeClass('active'); //Remove class active from all buttons
    $(this).addClass('active'); //Add active class to the clicked one

    Slider.goToSlide(index);
});

Étant donné que vous essayez d'activer les boutons relatifs à la diapositive, vous pouvez utiliser le onSlideBefore() rappel à add/remove la classe active pour les boutons basés sur data-slider:

Slider = $('.slider').bxSlider({
  pager: true,
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
      $('.number').removeClass('active');
      $('.number[data-slider="'+newIndex+'"]').addClass('active');
  }
});

J'espère que cela t'aides.

1
Zakaria Acharki 7 mars 2016 à 23:39

Essayer:

var Slider;
var minState = 0;
var maxState = 2;
var currState = 0;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });

  var changeActiveLink = function() {
    $('.active').removeClass('active');
    $('.number[data-slider='+currState+']').addClass('active');
  }
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
    currState = index;
    changeActiveLink();
  });
  $('.bx-pager-link').on('click', function(e){
    e.preventDefault();
    var activeButton = $(this).data('slide-index');
    currState = activeButton;
    changeActiveLink();
  });
  $('.bx-next').on('click', function(e){
    e.preventDefault();
    if(currState == maxState) {
        currState = 0;
    } else {
        currState++;
    }
    changeActiveLink();
  });
  $('.bx-prev').on('click', function(e){
    e.preventDefault();
    if(currState == 0) {
        currState = maxState;
    } else {
        currState--;
    }
    changeActiveLink();
  })

});

http://jsfiddle.net/yxErC/32/

0
Fhtagn 8 mars 2016 à 00:02

Voulez-vous créer un bouton personnalisé «Page précédente / suivante»? Si c'est le cas, vous pouvez obtenir la page actuelle («active») en appelant getCurrentSlide(). Consultez la documentation sur http://bxslider.com/option pour plus de détails. Et si vous voulez juste faire un contrôle de navigation en dehors de la diapositive, il y a un exemple sur la page bxslider: http://bxslider.com/examples/custom-next-prev-selectors

0
Kyungjae Park 7 mars 2016 à 23:29