bxSlider Personnalisé pré Bouton suivant

Je veux utiliser mon propre pre et boutons suivant et il est hors de curseur div trop. Je suis à l'aide de BxSlider.
Je vais partager mon code un peu.
Je serai heureux si vous pouvez aider cette.

C'est les boutons et les diapositives.

  <div class= "productsbuttons"><img id ="proprev" src="images/productleftarrow.png" /><img style="margin-left:10px;" id="pronext" src="images/productrightarrow.png" /> </div>
            </div>       
            <div class = "products">
              <ul class = "mainslider">
                <li><img class = "productslider" src="images/menu-image/img1.png" /> Lores ASda</li>
                <li><img class = "productslider" src="images/img1.png" /> ASDasdasd</li>
                <li><img class = "productslider" src="images/menu-image/img1.png" /> ASd</li>
                <li><img class = "productslider" src="images/img1.png" /> ASas</li>
              </ul>

C'est le jquery

$(document).ready(function() {
  var mySlider =   $('.mainslider').bxSlider({
  nextSelector: '#pronext',
  prevSelector: '#proprev',

  prevText: '',   
  nextText: '',
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  slideMargin: 5,
  pager:false,
    });
  });

OriginalL'auteur Berke Atmaca | 2013-04-05

  1. 25

    Ajouter votre image src à nextText comme ceci:

    nextText: '<img src="images/next.jpg" height="25" width="25"/>',
prevText: '<img src="images/previous.jpg" height="25" width="25"/>'

    De travail JSFiddle d'un exemple de travail:

    Faire cela n'a aucun sens. Bien sûr, il va travailler, c'est une solution simple mais la plupart du temps à travailler sur un curseur avec des contrôles de pourrait nécessiter plus de style et des éléments complexes. Donc je suggère de faire personnalisé cliquez sur les écouteurs d'événements et de gérer le contrôle de vous-même. C'est bien mieux à mon humble avis et vous donne plus de contrôle sur la façon dont il fonctionne et semble. Néanmoins, oui, il fonctionne, mais ce n'est pas la meilleure solution.

    OriginalL'auteur dhruv1000

  2. 14

    vous pouvez essayer ce code ci-dessous. Cela devrait fonctionner.

    $(document).ready(function(){

    var slider = $('.mainslider').bxSlider({
        minSlides: 2,
            maxSlides: 2,
            slideWidth: 360,
            slideMargin: 5,
            pager:false,
    });

    $('#pronext').click(function(){
      slider.goToNextSlide();
      return false;
    });

    $('#proprev').click(function(){
      slider.goToPrevSlide();
      return false;
    });

});
    Ayant séparé les éléments DOM nécessite style d'écriture.

    OriginalL'auteur qsmiley86