Javascript 使用BX滑块，上一个和下一个箭头填充内部Div以及主Div_Javascript_Jquery_Html_Css_Bxslider

Javascript 使用BX滑块，上一个和下一个箭头填充内部Div以及主Div

javascript jquery html css

Javascript 使用BX滑块，上一个和下一个箭头填充内部Div以及主Div,javascript,jquery,html,css,bxslider,Javascript,Jquery,Html,Css,Bxslider,我有一个问题，我在每张幻灯片的左边或右边制作一个内框（div），里面有一些文本。这很容易做到，也很容易设置样式，但问题是，由于某种原因，上一个箭头和下一个箭头再次将自己定位在secondary/inner div中，如所附图片所示。下面是示例html，它包括与示例图像对应的幻灯片部分： <div class="slide" id="slide2"> <div class="band band-right red"> <a href="/w

我有一个问题，我在每张幻灯片的左边或右边制作一个内框（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两端的两个箭头，并消除在较小的纯色矩形中显示的第二对箭头

这是指向我正在处理的页面的链接：

好的，我不必担心WordPress的怪癖，我将给您一个双Flex bxSlider的示例，并介绍重要的部分

两个div
```
.bxRight
```
和
```
.bxLeft
```
是flex容器
```
.bxMain
```
的子级。这种flexbox布局响应迅速，并且有可能在不使用任何JS/jQuery的情况下将其他方式（如堆栈）更改为列。我只做了一些基本的flexbox，如果你想了解更多信息，就去吧

回到这两个分区

.bxRight

和

.bxLeft

，它们是两个bxslider的容器：

.mxDisplay

和

.txBoard

```
.bxRight.txBoard
```
```
.bxLeft.mxDisplay
```

我给出了

.txBoard

控件：true

和

.mxDisplay

控件：false

，然后使用bxSlider的回调，我将

.mxDisplay的

操作变为

。txBoard的

操作：

两个bxslider都有：

onslidext:moveBX、

和

onSlidePrev:moveBX、

回调

因此，每次幻灯片移动都会调用moveBX（）：

函数moveBX（$ele，from，to）{
mx.goToSlide（to）；
德克萨斯州戈托利德（to）；
}

最后一个重要的细节是按钮，现在只有一对按钮可以同时控制两个bxslider（从技术上讲不是真的，但在肉眼看来是）。为了控制按钮的外观和位置，我做了以下工作：
```
    nextSelector: '.bxRBtn',
    prevSelector: '.bxLBtn',
    nextText: '►',
    prevText: '◄'
```

有关详细信息，请转到。这个演示有点粗制滥造（匆忙编写），所以我将把美学留给你。如果这不是你想要的，让我知道并提供更多的细节。祝你好运，先生。

CSS HTML

在完成这一任务后，使用Firefox的开发者检查器查看用于形成和包含上一个下一个箭头的元素的名称，我在jquery.bxslider.js的这一部分中指出了问题所在。我注释掉了两行，只是更改了希望将上一个箭头和下一个箭头附加到宽“slide”类的类（查看下面代码底部附近）：

你们有演示吗？我想看看您的bxSlider插件jQuery。HTML信息不足以评估你的问题。我做不到，但我添加了一个链接到主帖子。所以。。。你测试过我的答案吗？它不涉及修改插件。

.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%;
}

<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>

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

     /**
     * 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);
        }
    }

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