BxSlider Custom Preview Button

Question

I want to use my own previous and next buttons, and it also exits the slider. I am using BxSlider. I will share my code a bit. I will be glad if you can do this.

These are buttons and slides.

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

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

Add your src image to nextText as follows:

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

We work the JSFiddle working example:

Answer 2

you can try this code below. That should work.

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