bxSlider Custom pre next Кнопка

Question

Я хочу использовать свои собственные кнопки предварительной и следующей кнопки, и она также находится вне слайдера div. Я использую BxSlider. Я поделюсь своим кодом. Буду рад, если вы сможете это сделать.

Это кнопки и слайды.

<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> 

Это Jquery

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

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

Answer 1

Добавить изображение src в nextText так:

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

Рабочая JSFiddle из рабочего примера:

Answer 2

вы можете попробовать этот код, приведенный ниже. Это должно сработать.

$(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; 
    }); 

});