使用 BX-Slider，上一个和下一个箭头填充内部 Divs 以及主 Div

Question

我在每张幻灯片的左侧或右侧制作一个带有一些文本的内框 (div) 时遇到了这个问题。这很容易做，也很时尚，但问题是由于某些原因，上一个箭头和下一个箭头再次将它们自己定位在 secondary/inner div 内，如所附图片所示。

这是示例 html，其中包含与示例图片相对应的幻灯片部分：

  <div class="slide" id="slide2">
    <div class="band band-right red">
      <a href="/why-go-tec/" class="slider" ><h1 class="banner">Your Food Never Tasted This Good</h1></a>
      <a href="/why-go-tec/" class="slider" ><h2 class="banner">EXPERIENCE THE 100% INFRARED DIFFERENCE</h2></a>
    </div>
  </div>

  <div class="slide" id="slide3">
    <div class="band band-right slate">
      <a href="/performance-guarantee/" class="slider" ><h1 class="banner">TEC Owners Love Their Grills</h1></a>
      <a href="/performance-guarantee/" class="slider" ><h2 class="banner">WE WANT YOU TO LOVE YOURS TOO - OUR 30-DAY MONEY BACK GUARANTEE</h2></a>
    </div>
  </div>

我的需要是只显示主 div 两端的两个箭头，并消除显示在较小的纯色矩形内的第二对箭头。

这是我正在处理的页面的link： BX Slider page

Answer 1

好的，不用担心 WordPress 的怪癖，我会给你一个 Dual Flex-bxSlider 的例子，并介绍重要的部分。

两个 div .bxRight 和 .bxLeft 是 flex 容器 .bxMain 的子元素。这种 flexbox 布局是响应式的，并且有可能改变其他方式，比如堆叠成一列而没有任何 JS/jQuery。我只做了一些基本的 flexbox，如果你想了解更多信息，请访问 here.
回到那两个div.bxRight和.bxLeft，它们是两个bxSliders的容器：.mxDisplay和.txBoard
- .bxRight .txBoard
- .bxLeft .mxDisplay
我给了 .txBoard controls: true 和 .mxDisplay controls: false，然后使用 bxSlider 的回调，我将 .mxDisplay's 动作从动到 .txBoard's 动作：
- 两个 bxSliders 都有：onSlideNext: moveBX, 和 onSlidePrev: moveBX, 回调。
- 所以每次滑动移动都会调用 moveBX()：
  
  function moveBX($ele, from, to) { mx.goToSlide(to); tx.goToSlide(to); }
最后一个重要的细节是按钮，现在只有一对可以同时控制两个 bxSliders（从技术上讲不是真的，但肉眼看是这样。）控制按钮的外观和位置，我做了以下操作：
```
    nextSelector: '.bxRBtn',
    prevSelector: '.bxLBtn',
    nextText: '►',
    prevText: '◄'
```

转至 bx Options 了解完整详情。该演示在风格上有点原始（匆忙中写的）所以我会把美学留给你。如果这不是您想要的，请告诉我并提供更多详细信息。祝你好运，先生。 DEMO

CSS

.bxMain {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: stretch;
    justify-content: stretch;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.bxLeft {
    float: left;
    width: 100%;
    height: 100%;
    min-height: 390px;
    -webkit-order: 0;
    order: 1;
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: stretch;
    align-self: stretch;
}
.bxRight {
    float: left;
    width: 100%;
    height: 100%;
    min-height: 390px;
    -webkit-order: 2;
    order: 2;
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: stretch;
    align-self: stretch;
}
.bxLBtn, .bxRBtn {
    position: absolute;
    z-index: 999;
}
.bx-prev, .bx-next {
    font-size: 48px;
    font-family: Times;
    color: blue;
    text-decoration: none;
}
.bxLBtn {
    left: 0;
    top: 50%;
}
.bxRBtn {
    right: 0;
    top: 50%;
}

HTML

<section id="bxShell">


  <main class="bxMain">
  <div class="bxLeft">
    <ul class="mxDisplay">
      <li>
        <img src="https://placehold.it/670x630/000/fff.png&text=SLIDE+1">
      </li>
      <li> <p>N'ghft n'gha naflnilgh'ri llll stell'bsna Dagon kn'a ron ahog naflilyaa naflNyarlathotep, ebunma y'hah li'hee tharanakoth ngshagg chtenff gnaiih ehye lw'nafhoth geb, uaaah shtunggli cgeb llll mg sll'hanyth nog Yoggoth naflfm'latgh.</p> </li>
      <li>
        <img src="https://placehold.it/670x630/fff/000.png&text=SLIDE+3">
      </li>

    </ul>
  </div>
  <div class="bxLBtn"></div>
<div class="bxRBtn"></div>
  <div class="bxRight">
    <ul class="txBoard">
      <li>
        <p> Stell'bsna f'li'hee kn'a nglui hai bug vulgtlagln shtunggli ya k'yarnak, Azathoth y-ron Hastur tharanak 'fhalma Chaugnar Faugn fm'latgh lw'nafh 'fhalma nanw, tharanak ehye nilgh'ri nnnfhtagn vulgtm Hasturoth shugg y'hah. 
          Grah'n vulgtm sgn'wahl hlirgh syha'h hlirgh nw 'ai stell'bsna kn'a ngah shagg, zhro f'vulgtlagln y-ee nnnehye tharanak s'uhn y-uln cgof'nn ebunma gotha fhtagn, Chaugnar Faugn lw'nafh Chaugnar Faugn sgn'wahl h'gof'nn syha'hog nog czhro Hastur mnahn'. 
          Shub-Niggurath ehye fm'latgh uh'e h'gof'nn wgah'n hlirghog nalw'nafh Hastur stell'bsna ehyeagl kn'aoth cooboshu, uaaah s'uhn zhro gnaiih 'bthnk shtunggli ngli'hee ya ftaghu mnahn' cllll, Nyarlathotep s'uhn uh'e shagg gnaiih phlegeth ooboshu bug athg kadishtu chtenff. </p>
      </li>
            <li>
        <img src="https://placehold.it/670x630/ff8cff/00df00.png&text=SLIDE+2">
      </li>
      <li>
        <p> Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn. Uh'e nnnfhtagn, ilyaaagl li'hee gof'nn li'hee uln ooboshu, gof'nn Dagon phlegeth sll'ha tharanak ronor. 
          Ph'ch' naflhai naflnglui hrii ah mg k'yarnak clw'nafh, s'uhn gnaiih naflDagon naflathg ebunma ngy'hah 'bthnk ep, throdnyth ftaghu n'gha R'lyeh n'ghaor y-gotha. 
          Ngkadishtu ngfhtagn ehye uln zhro ya Dagon zhro Chaugnar Faugn r'luh sgn'wahl vulgtm nilgh'ri, h'ron llll vulgtmyar shugg syha'h uh'e ron chtenff k'yarnak naflphlegeth nnnah. 
          Ep shugg naflTsathoggua zhro nnnooboshu ah shugg naflehye throd, nw naflnglui fhtagn Dagon mnahn' shagg ebunma hupadgh ebunma, k'yarnak uaaahor Dagon ooboshu vulgtm athg cCthulhu. </p>
      </li>

    </ul>
  </div>
  </main>
</section>

jQuery

$(function() {
    var mx = $('.mxDisplay').bxSlider({
        pager: false,
        controls: false,
        onSlideNext: moveBX,
        onSlidePrev: moveBX,
        adaptiveHeight: true
    });

    var tx = $('.txBoard').bxSlider({
        pager: false,
        onSlideNext: moveBX,
        onSlidePrev: moveBX,
        nextSelector: '.bxRBtn',
        prevSelector: '.bxLBtn',
        nextText: '►',
        prevText: '◄',
                adaptiveHeight: true
    });
    function moveBX($ele, from, to) {
        mx.goToSlide(to);
        tx.goToSlide(to);
    }
});

Answer 2

在拉动线程球并使用 Firefox 的开发人员检查器查看用于形成和包含 prev-next 箭头的元素名称后，我确定问题出在 jquery.bxslider.js。我注释掉了两行，并更改了 class，我希望将 PREV 和 NEXT 箭头附加到宽 "slide" class（查看以下代码底部附近）：

     /**
     * Appends prev / next controls to the controls element
     */
    var appendControls = function(){
        //slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
        //slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
        slider.controls.next = $('<a class="bx-next" href=""><img src=\"images/next30.png\"></</a>');
        slider.controls.prev = $('<a class="bx-prev" href=""><img src=\"images/prev30.png\"></a>');

        // bind click actions to the controls
        slider.controls.next.bind('click', clickNextBind);
        slider.controls.prev.bind('click', clickPrevBind);
        // if nextSlector was supplied, populate it
        if(slider.settings.nextSelector){
            $(slider.settings.nextSelector).append(slider.controls.next);
        }
        // if prevSlector was supplied, populate it
        if(slider.settings.prevSelector){
            $(slider.settings.prevSelector).append(slider.controls.prev);
        }
        // if no custom selectors were supplied
        if(!slider.settings.nextSelector && !slider.settings.prevSelector){
            // add the controls to the DOM
            slider.controls.directionEl = $('<div class="bx-controls-direction" />');
            // add the control elements to the directionEl
            slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
            /* I commented out the following line: */
            //slider.viewport.append(slider.controls.directionEl);
            /* I ADDED this line. The divs with the class "slide" are the main, wide divs, where I want the arrows to be on either end: */
            $(".slide").append(slider.controls.directionEl);
            /* I commented out the following line: */
            //slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
        }
    }

我还要做的一件事是 fiddle 箭头的垂直定位，这样它们就不会与垂直居中的文本重叠，但更重要的是，我添加了一个高 z-index到 bx-prev 和 bx-next classes，这样箭头将始终显示在最顶层，而不是隐藏在我放置在幻灯片中的任何次要矩形下：

a.bx-prev{
    position:absolute;
    top:100%;
    margin-top:-35px;
    left:10px;
    margin-left:0px;
    z-index:10;
}
a.bx-next{
    position:absolute;
    top:100%;
    margin-top:-35px;
    left:100%;
    margin-left:-40px;
    z-index:10;
}

使用 BX-Slider，上一个和下一个箭头填充内部 Divs 以及主 Div

Using BX-Slider, Prev and Next Arrows populate Inner Divs as Well as Main Div

html

javascript

css

jquery

bxslider

CSS

HTML

jQuery