jquery - bxSlider 自定义上一个下一个按钮

Question

我想使用我自己的上一个和下一个按钮，它也在 slider 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一个工作示例: