bx-slider与图像一起滑动字幕外 [英] bx-slider sliding outside captions along with the image

问题描述

我正在尝试弄清楚如何在bx-slider类之外滑动自定义标题。我只找到了类似于这里的答案，它使用了图像属性，但我的问题是我希望能够将一个标题与div中的图像一起滑动，与bx-slider分开，如果可能的话。

到目前为止我有这个：

HTML：

  <！ - 图像滑块桌面 - > 
< div id =hero> 
< ul class =bxslider> 
< li> 
< a href =www.google.com> 
< img src =http://placehold.it/350x150class =slider-img-responsive> 
< / a> 
< / li> 
< li> 
< a href =www.google.com> 
< img src =http://placehold.it/350x150class =slider-img-responsive> 
< / a> 
< / li> 
< / ul> 
< / div> 
<！ - 滑块文字 - > 
< div class =mobile-homepage-header> 
<！ -  TODO：相对于图片滑块的幻灯片文字 - > 
< ul id =slider-textstyle =list-style-type：none; padding：0;> 
< li> 
< h1> Lorem ipsum 1< / h1> 
< h2> Lorem ipsum dolor sit 1< / h2> 
< a href =www.google.com>按钮1< / a> 
< / li> 
< li> 
< h1> Lorem ipsum 2.< / h1> 
< h2> Lorem ipsum dolor sit 2< / h2> 
< a href =www.google.com>按钮2< / a> 
< / li> 
< / ul> 
< / div> 
  

JQuery：

  $（'＃hero .bxslider'）。bxSlider（{
 auto：true，
 infiniteLoop：true，
 pager：false，
控制：true，
暂停：5000，
 onSliderLoad：function（currentIndex）{
 $（'＃slider-text li'）。html（$（'。bxslider li' ）.eq（currentIndex））; //选择滑块的当前索引
}，
 onSlideBefore：function（$ slideElement，oldIndex，newIndex）{
 $（'＃slider-text li'）。html（$ slideElement）; //幻灯片文字和图片
} 
}）; 
  

解决方案

听起来你想要的这个标题框有相同的用作滑块。我做了2个bxSliders：

• .bxslider 修改如下：
  
  
  
  
  • 引用 var bx
  
  
  • 删除 onSliderLoad（）回调
  
  
  • 更改了 onSlideBefore（） 回调新功能 syncTextSlider
  
  


• #slide-text 修改如下：
  
  
  
  
  • 实例化为bxSlider
  
  
  • 引用 var cx
  
  
  • 注意： controls：false
  
  


• 定义一个新函数 syncTextSlider
  
  
  
  
  • 在 .bxslider 之前移动到新幻灯片， syncSliderText 被调用。
  
  
  • 此函数然后使用bxSlider API方法 键 goToSlide（） on ＃slider-text
  
  


• 由于 #slider -text 的动作依赖于 .bxslider 我删除的动作＃slider-text 控件。


• 样式 .bxslider 两个滑块之间的控件，如果你喜欢它们在原始位置，只需在< head> 中删除​​位于< style> 块中的样式。

< pre class =snippet-code-html lang-html prettyprint-override> <！doctype html>< html>< head> < meta charset =utf-8> <标题> 35486338< /标题> < link rel =stylesheethref =https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css> <风格> / *删除样式以将控件重新定位到原始位置* / .bx-controls-direction a {top：125％！important; }< / style>< / head>< body> <！ - 图像滑块桌面 - > < div id =hero> < ul class =bxslider> <李> < a href =www.google.com> < img src =http://placehold.it/350x150/000/0ff/?text=1class =slider-img-responsive> < / A> < /锂> <李> < a href =www.google.com> < img src =http://placehold.it/350x150/000/fff/?text=2class =slider-img-responsive> < / A> < /锂> <李> < a href =www.google.com> < img src =http://placehold.it/350x150/000/e00/?text=3class =slider-img-responsive> < / A> < /锂> <李> < a href =www.google.com> < img src =http://placehold.it/350x150/000/f3f/?text=4class =slider-img-responsive> < / A> < /锂> <李> < a href =www.google.com> < img src =http://placehold.it/350x150/000/3f3/?text=5class =slider-img-responsive> < / A> < /锂> < / UL> < / DIV> <！ - 滑块文字 - > < div class =mobile-homepage-header> < ul id =slider-text> <李> < h1>标题1< / h1> < h2> Byline 1< / h2> < a href =www.google.com>按钮1< / a> < /锂> <李> < h1>标题2< / h1> < h2> Byline 2< / h2> < a href =www.google.com>按钮2< / a> < /锂> <李> < h1>标题3< / h1> < h2> Byline 3< / h2> < a href =www.google.com>按钮3< / a> < /锂> <李> < h1>标题4< / h1> < h2> Byline 4< / h2> < a href =www.google.com>按钮4< / a> < /锂> <李> < h1>标题5< / h1> < h2> Byline 5< / h2> < a href =www.google.com>按钮5< / a> < /锂> < / UL> < / DIV> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js>< / script> < script src =https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js>< / script> <脚本> var bx = $（'。bxslider'）。bxSlider（{auto：true，infiniteLoop：true，pager：false，controls：true，pause：5000，onSlideBefore：syncTextSlider}）; var cx = $（＃slider-text）。bxSlider（{infiniteLoop：true，pager：false，controls：false}）; function syncTextSlider（$ ele，from，to）{cx.goToSlide（to）; }< / script>< / body>< / html>

I'm trying to figure out how to slide custom captions outside of bx-slider class. I only found answers similar to this here, where it uses the image attribute, but my problem is I want to be able to slide a caption along with the image inside a div, separate from bx-slider, if that's possible.

So far I have this:

HTML:

<!--image slider desktop-->
<div id="hero">
   <ul class="bxslider">
      <li>
         <a href="www.google.com">
           <img src="http://placehold.it/350x150" class="slider-img-responsive">
         </a>
       </li>
       <li>
         <a href="www.google.com">
          <img src="http://placehold.it/350x150" class="slider-img-responsive">
         </a>
       </li>
    </ul>
</div>
<!-- slider text-->
<div class="mobile-homepage-header">
    <!-- TODO: slide text relative to image slider-->
    <ul id="slider-text" style="list-style-type:none;padding:0;">
        <li>
            <h1>Lorem ipsum 1</h1>
            <h2>Lorem ipsum dolor sit 1</h2>
            <a href="www.google.com">Button 1</a>
        </li>
        <li>
            <h1>Lorem ipsum 2.</h1>
            <h2>Lorem ipsum dolor sit 2</h2>
            <a href="www.google.com">Button 2</a>
        </li>
    </ul>
</div>

JQuery:

$('#hero .bxslider').bxSlider({
   auto: true,
   infiniteLoop: true,
   pager: false,
   controls: true,
   pause: 5000,
   onSliderLoad: function(currentIndex) {
       $('#slider-text li').html($('.bxslider li').eq(currentIndex)); // select the current index of the slider
   },
   onSlideBefore: function($slideElement, oldIndex, newIndex) {
       $('#slider-text li').html($slideElement); // slide text along with image
   }
});

解决方案

It sounds like this caption box you want has the same functions as a slider. I made 2 bxSliders:

• .bxslider is modified as follows:
  • Referenced by var bx
  • Removed onSliderLoad() callback
  • Changed onSlideBefore() callback to a new function syncTextSlider
• #slider-text is modified as follows:
  • Instantiated to a bxSlider
  • Referenced by var cx
  • Note: controls: false
• Defined a new function syncTextSlider
  • Before .bxslider moves to a new slide, syncSliderText is called.
  • This function then uses bxSlider API method goToSlide() on #slider-text
• Since #slider-text's movements depend on .bxslider's movements I removed #slider-text's controls.
• Styled .bxslider's controls in between both sliders, if you prefer them in the original position, just remove the style located in the <style> block inside the <head>.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35486338</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    /* Remove style to relocate controls to original position */
    .bx-controls-direction a {
      top: 125% !important;
    }
  </style>
</head>

<body>
  <!--image slider desktop-->
  <div id="hero">
    <ul class="bxslider">
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive">
        </a>
      </li>
    </ul>
  </div>
  <!-- slider text-->
  <div class="mobile-homepage-header">
    <ul id="slider-text">
      <li>
        <h1>Title 1</h1>
        <h2>Byline 1</h2>
        <a href="www.google.com">Button 1</a>
      </li>
      <li>
        <h1>Title 2</h1>
        <h2>Byline 2</h2>
        <a href="www.google.com">Button 2</a>
      </li>
      <li>
        <h1>Title 3</h1>
        <h2>Byline 3</h2>
        <a href="www.google.com">Button 3</a>
      </li>
      <li>
        <h1>Title 4</h1>
        <h2>Byline 4</h2>
        <a href="www.google.com">Button 4</a>
      </li>
      <li>
        <h1>Title 5</h1>
        <h2>Byline 5</h2>
        <a href="www.google.com">Button 5</a>
      </li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    var bx = $('.bxslider').bxSlider({
      auto: true,
      infiniteLoop: true,
      pager: false,
      controls: true,
      pause: 5000,
      onSlideBefore: syncTextSlider
    });

    var cx = $("#slider-text").bxSlider({
      infiniteLoop: true,
      pager: false,
      controls: false
    });

    function syncTextSlider($ele, from, to) {
      cx.goToSlide(to);
    }
  </script>
</body>

</html>

这篇关于bx-slider与图像一起滑动字幕外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！