jquery - BX slider 自定义控件

Question

我正在尝试在 BX Slider 插件中使用自定义控件。我只关注文档:

<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">保持静态， anchor (#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>