personnalisé pager en jquery plugin bxslider

Je vais avoir un problème avec jQuery et je ne sais pas vraiment par où commencer.

Fondamentalement, je suis en utilisant le bxslider plugin pour faire un carrousel.

Ici est simplifié en HTML:

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>

Et le jquery :

$('ul#promos').after('<div id="pager1"></div>');
$('ul#promos').bxSlider({
    displaySlideQty: 1,
    moveSlideQty: 1,
    infiniteLoop: false,
    controls: false, 
    pager: true,
    pagerSelector: '#pager1',
    auto: true,
    pause: 5000,
    speed: 1000
});

Ce qui rend la sortie:

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>
<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">1</a>
    <a href="" class="pager-link pager-2">2</a>
</div>

Cependant, je veux le pager utiliser le relatif h2 titres, plutôt que des numéros croissants. Donc, idéalement, il devrait ressembler à:

<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">Event Title 1</a>
    <a href="" class="pager-link pager-2">Event Title 2</a>
</div>

Remarque: il peut y avoir jusqu'à six événements dans ce carrousel.

Voici un exemple:
http://jsfiddle.net/adrianjacob/gHpBT/3/

Tous les pointeurs par où commencer serait très apprécié.

InformationsquelleAutor Adi | 2011-08-19
  1. 1

    Je viens de construire mon propre pager à l'aide de la bxSlider des rappels et des méthodes publiques.

    Je suis en utilisant haml et coffeescript, mais vous devriez obtenir l'idée.

    Je suis en utilisant un attribut id sur le pager liens à nouer de lien vers une diapositive particulière

    HAML

    %ul.landing-links
  %li <a href="#" data-id="0" class="active">Slide One</a>
  %li <a href="#" data-id="1">Slide Two</a>

    CoffeeScript

    landing_slides = $("#landing-slides").bxSlider
  controls: false,
  auto: true,
  pause: 10000,
  autoHover: true,
  onAfterSlide: (num, qty, obj) ->
    # Switch the active class to the corresponding pager link
    $("ul.landing-links li a.active").removeClass("active")
    $("ul.landing-links li a[data-id=#{num}]").addClass("active")

$('ul.landing-links li a').click (e) ->
  e.preventDefault()
  landing_slides.goToSlide($(this).data('id')) # Get the data-id attribute value
  landing_slides.startShow() # This is needed to restart the auto scroll
    InformationsquelleAutor jfeust
  2. 1

    J'ai compris cela à l'aide d'un exemple sur http://bxslider.com/examples/thumbnail-pager-2

    L'exemple utilise "buildPager:" remplace la norme 1,2,3,4 pager avec des images, l'exemple:

    $(function(){
  $('#slider1').bxSlider({
    pager: true,
    buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet1_thumb.jpg" /></a>';
        case 1:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet2_thumb.jpg" /></a>';
        case 2:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet3_thumb.jpg" /></a>';
        case 3:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet4_thumb.jpg" /></a>';
      }
    }
  });
});
    • Toutes les idées sur la manière de cibler l'état actif du pager à la source d'une image différente?
    InformationsquelleAutor Duncanmoo
  3. 0

    S'il vous plaît vérifier le code html ci-dessous pour la pagination

    JS:

    jQuery(document).ready(function(){        
  jQuery('#bxslider1').bxSlider({
    pagerCustom: '#bxsliderlist1'
  });   
});

    HTML:

    <ul id="bxslider1">
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
</ul>
<ul id="bxsliderlist1">
  <li>
    <a data-slide-index="0">your contant</a>
  </li>
   <li>
    <a data-slide-index="1">your contant</a>
  </li>
   <li>
    <a data-slide-index="2">your contant</a>
  </li>
   <li>
    <a data-slide-index="3">your contant</a>
  </li>
  
</ul>

    InformationsquelleAutor Jitendra Y