如何将 bxSlider 选择器放入幻灯片中？

Question

我一直在尝试让 bxSlider 上的 selectors/arrows 随幻灯片一起移动，但仍然不知道该怎么做。我需要它们是这样的：

bxSlider 的示例只是展示了如何将它们固定在滑块外部(http://bxslider.com/examples/custom-next-prev-selectors)，但是当我尝试将它们放在幻灯片内部时，它们只出现在第一个滑块上。

有什么办法吗？我觉得我错过了一些非常愚蠢的东西。

感谢任何帮助！谢谢！ :)

这是我的 link jsfiddle

  $('.bxslider').bxSlider({
    auto: 'true',
    mode: 'horizontal',
    speed: 1000,
    pager: false,
    captions: true
  });

.bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1 }
.bx-wrapper img { margin: 0px; max-width: 100%; width: 1200px; height: 450px; display: block; object-fit: cover }
.bx-wrapper .bx-viewport { margin: 0 auto; text-align: center }
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100% }
.bx-wrapper .bx-prev { left: 30%; position: absolute; z-index: 9999; }
.bx-wrapper .bx-next { right: 30%; }
.bx-wrapper .bx-controls-direction a { position: absolute; top: 52%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999 }
.bx-wrapper .bx-caption { position: absolute; top: 40%; left: 0; right:0; text-align: center; width: 100%; background: none  }
.bx-wrapper .bx-caption-int { position: relative; margin: 0 auto; max-width: 33%; background: #fff; padding: 2em 1em; font-family: 'Century Gothic', sans-serif; color: #787878; }
.bx-wrapper .bx-caption-int a { text-transform: uppercase; letter-spacing: .1em; font-weight: bold; color: #787878; font-size: 1.6em; line-height: 1em; }
.bx-wrapper .bx-caption-int .bx-data { padding-top:.5em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<!--script src="https://code.jquery.com/jquery-1.12.4.min.js"></script-->
<div class="slide">
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

让箭头跟在每张幻灯片后面的最方便的方法是在每张幻灯片上添加一对箭头。您需要使用以下选项：prevText、nextText、prevSelector 和 nextSelector。代码段的来源中对详细信息进行了评论。

片段

  $('.bxslider').bxSlider({
    auto: 'true',
    mode: 'horizontal',
    speed: 1000,
    pager: false,
    captions: true,
    /*
    | Add the strings to next and prevText options
    | The string will be parsed into HTML
    */
    nextText: '<a href="#/"><i class="fa fa-chevron-right"><i></a>',
    prevText: '<a href="#/"><i class="fa fa-chevron-left"><i></a>',
    /*
    | Assign new classes to next and prevSelector options
    | These option values must match the new HTML
    */
    nextSelector: '.bx-next-arrow',
    prevSelector: '.bx-prev-arrow'
  });

/* I didn't spend much time on the CSS, it looks like you already have that part well in hand */

.bx-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  *zoom: 1
}
.bx-wrapper img {
  margin: 0px;
  max-width: 100%;
  width: 1200px;
  height: 450px;
  display: block;
  object-fit: cover
}
.bx-wrapper .bx-viewport {
  margin: 0 auto;
  text-align: center
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%
}
.bx-prev,
.bx-next {
  display: none;
}
/*.bx-wrapper .bx-prev {
  left: 30%;
  position: absolute;
  z-index: 9999;
}*/

/*.bx-wrapper .bx-next {
  right: 30%;
}*/

/*.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 52%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999
}*/

.bx-wrapper .bx-caption {
  position: absolute;
  top: 45%;
  left: 25%;
  text-align: center;
  width: 50%;
  height: 10%;
  background: transparent !important;
}
.bx-wrapper .bx-caption-int {
  position: relative;
  margin: 0 auto;
  max-width: 33%;
  background: #fff;
  padding: 2em 1em;
  font-family: 'Century Gothic', sans-serif;
  color: #787878;
}
.bx-wrapper .bx-caption-int a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: bold;
  color: #787878;
  font-size: 1.6em;
  line-height: 1em;
}
.bx-wrapper .bx-caption-int .bx-data {
  padding-top: .5em;
}
.bx-nav {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 200px;
  margin: 10px calc(50% - 100px) 0;
}
.bx-prev-arrow,
.bx-next-arrow {
  border-radius: 50%;
  background: rgba(0, 112, 255, .5);
  width: 32px;
  height: 28px;
  display: inline-block;
  padding-top: 4px;
}
.fa {
  color: rgba(255, 255, 255, .3);
  font: 400 36px/36px;
}

<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>

<!--Font-Awesome Stylesheet-->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js'></script>
<div class="slide">
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>

          <!--
         Add nav.bx-nav, div.bx-prev-arrow, and
         div.bx-next-arrow to each slide. The classNames
         .bx-next-arrow and .bx-prev-arrow need to be
         in the option: next and prevSelector
          -->

          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
  </ul>
</div>

如何将 bxSlider 选择器放入幻灯片中？

How to put bxSlider selector inside slide?

wordpress

bxslider

片段