example - slider jquery plugin

bxSlider Custom pre next Button

Question

Quiero usar mis propios botones pre y próximo y también está fuera del control deslizante. Estoy usando BxSlider. Compartiré mi código un poco. Me alegrará si puedes ayudarme con esto.

Estos son los botones y las diapositivas.

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

Este es el 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

puedes probar este código a continuación. Esto debería funcionar.

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

});

Answer 2

Agregue su imagen src a nextText esta manera:

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

Trabajo JSFiddle de un ejemplo de trabajo: