BX滑塊自定義控件

Question

我試圖在BX滑塊插件中使用自定義控件。我只遵循以下文檔：

<div class="inner-hold"> 
<div class="mask"> 
    <div class="slideset"> 
     <div class="slide"> 
      <div class="img-hold"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img29.jpg" 
       alt=""> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="img-hold"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img29.jpg" 
       alt=""> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="img-hold"> 
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/img29.jpg" 
       alt=""> 
      </div> 
     </div> 
    </div> 
</div> 
<a id="slider-prev" class="btn-prev" href="#"></a> 
<a id="slider-next" class="btn-next" href="#"></a> 
</div> 


<script> 
jQuery(document).ready(function ($) { 

$('.slideset').bxSlider({ 
    wrapperClass: 'foo', 
    controls: false, 
    slideWidth: 220, 
    minSlides: 4, 
    maxSlides: 4, 
    slideMargin: 20, 
    pager: false, 
    nextSelector: "#slider-next", 
    prevSelector: "#slider-prev", 
}); 
</script> 

未能產生魔法。我的<div class="slide">的錨點（＃slider-prev，＃slider-next）僅保留靜態，僅指向http://exmple.com/#？

編輯：

謝謝。現在它是動態的，但現在HTML顯然是錯誤的。我的來源是這樣的：

<a id="slider-prev" class="btn-prev" href="#"> 
<a class="bx-prev disabled" href="">Prev</a> 
<a class="bx-prev" href="">Prev</a> 
</a> 
<a id="slider-next" class="btn-next" href="#"> 
<a class="bx-next disabled" href="">Next</a> 
<a class="bx-next" href="">Next</a> 
</a> 

而我的自定義按鈕不工作

Answer 1

2個選項prevText和nextText可以將其值解析爲HTML。會導致該

nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>', 
prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>', 

：所以像這樣的價值

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<i class="fa fa-arrow-circle-left fa-3x"></i> 
 
<i class="fa fa-arrow-circle-right fa-3x"></i>

$(function() { 
 
    var bx = $('.bx').bxSlider({ 
 

 
    slideWidth: 1200, 
 
    minSlides: 4, 
 
    maxSlides: 4, 
 
    moveSlides: 4, 
 
    shrinkItems: true, 
 

 
    /* Controls must be true */ 
 
    controls: true, 
 

 
    /* Class selectors from step 1 */ 
 
    nextSelector: '.ext .bxNext', 
 
    prevSelector: '.ext .bxPrev', 
 

 
    /* Here's the heart of how to customize nav arrows. 
 
    || Enter a HTML string for both prevText and nextText. 
 
    || Here I used Font-Awesome icons. Sprites are commonly 
 
    || used, but try to use only one element per option. 
 
    */ 
 
    nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>', 
 
    prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>', 
 

 
    pager: false, 
 
    wrapperClass: '.ext', 
 
    adaptiveHeight: true 
 
    }); 
 
});

html, 
 
body { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: black; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0px solid transparent; 
 
} 
 
.ext { 
 
    margin: 0px auto; 
 
    background: rgba(200, 163, 33, .1); 
 
} 
 
.controls a, 
 
.controls a:link, 
 
.controls a:visited { 
 
    color: cyan; 
 
    position: relative; 
 
    0 
 
    /**/ 
 
    top: 0; 
 
    /*______________*/ 
 
    z-index: 99; 
 
    /*_________*/ 
 
    transition: all 1s ease-in; 
 
} 
 
.controls a:hover, 
 
.controls a:active { 
 
    color: rgba(127, 127, 0, .7); 
 
    transition: all 1s ease-out; 
 
} 
 
#NEXT { 
 
    left: 85%; 
 
    /*___________*/ 
 
}

<!-- Font-Awesome for the arrow icons --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 

 
<main class="ext"> 
 

 
    <ul class="bx"> 
 

 
    <!-- Stripped out extra divs for better performance 
 
      and easier laylout --> 
 
    <img src="http://placehold.it/200x220/ace/001?text=1"> 
 

 
    <img src="http://placehold.it/200x220/00f/fc0?text=2"> 
 

 
    <img src="http://placehold.it/200x220/000/3f3?text=3"> 
 

 
    <img src="http://placehold.it/200x220/f9b/333?text=4"> 
 

 
    <img src="http://placehold.it/200x220/ef9/e75?text=5"> 
 

 
    <img src="http://placehold.it/200x220/d9a/fee?text=6"> 
 

 
    <img src="http://placehold.it/200x220/ada/f0f?text=7"> 
 

 
    <img src="http://placehold.it/200x220/eea/e00?text=8"> 
 

 
    <img src="http://placehold.it/200x220/ded/730?text=9"> 
 

 
    <img src="http://placehold.it/200x220/a1a/caef?text=10"> 
 

 
    <img src="http://placehold.it/200x220/c8a/e00?text=11"> 
 

 
    <img src="http://placehold.it/200x220/ebb/000?text=12"> 
 

 
    </ul> 
 

 
    <!-- This is the 1st step to take in order to customize nav arrows. 
 
    Make 2 anchors, place them in a block element, and ensure that the 
 
    styles marked with`/*_*/` are used. --> 
 
    <nav class='controls'> 
 
    <a href='#' id='PREV' class='bxPrev'></a> 
 
    <a href='#' id='NEXT' class='bxNext'></a> 
 
    </nav> 
 
</main>

Answer 2

刪除controls: false,

而且，我希望你的實際代碼確實接近jQuery(document).ready(function ($) {與});