bxSlider 自定义前下一个按钮答案

【问题标题】：bxSlider Custom pre next ButtonbxSlider 自定义前下一个按钮
【发布时间】：2013-03-28 11:29:45
【问题描述】：

我想使用自己的 pre 和 next 按钮，它也在滑块 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,
    });
  });

【问题讨论】：

标签： jquery navigation slider next bxslider

【解决方案1】：

像这样将你的图片src 添加到nextText：

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

Working JSFiddle 的一个工作示例：

【讨论】：

这样做没有任何意义。当然它会起作用，这是一个简单的解决方案，但大多数时候在带有自定义控件的滑块上工作可能需要更多的样式和复杂的元素。因此，我建议制作自定义的单击事件侦听器并自己处理控件。这是更好的恕我直言，让您可以更好地控制它的工作方式和外观。不过，是的，它会起作用，但它不是最好的解决方案。

【解决方案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;
    });

});

【讨论】：

分离的 DOM 元素需要它们的书写风格。