bxSlider自定義pre next按鈕

我想使用自己的上一個和下一個按鈕，它也不在滑塊div中。我正在使用BxSlider。我會分享我的代碼。如果你能幫到你，我會很高興。bxSlider自定義pre next按鈕

這是按鈕和幻燈片。

<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, 
    }); 
    });

來源

2013-04-05 Berke Atmaca

圖像0添加到nextText這樣的：

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

工作的工作實例JSFiddle：

來源

2013-07-10 10:00:25 dhruv1000

這樣做沒有任何意義。當然，它會工作，這是一個簡單的解決方案，但大多數時間在自定義控件的滑塊上工作可能需要更多的樣式和複雜的元素。因此，我建議製作自定義的點擊事件偵聽器並自行處理控件。這是更好的恕我直言，讓你更多地控制它的工作方式和外觀。然而，是的，它會工作，但它不是最好的解決方案。 – Pknife 2017-10-06 09:50:56

，你可以試試下面這段代碼。這應該工作。

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

});

來源

2013-04-17 16:45:04 qsmiley86

有分離的DOM元素需要寫作風格他們。 – zennin 2016-12-20 15:11:44

bxSlider自定義pre next按鈕

回答

相關問題