Skip to content Skip to sidebar Skip to footer
Home / Bxslider / Html / Javascript / Jquery

Bx-slider Sliding Outside Captions Along With The Image

Post a Comment
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

Solution 1:

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><metacharset="utf-8"><title>35486338</title><linkhref="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"><style>/* Remove style to relocate controls to original position */.bx-controls-directiona {
      top: 125%!important;
    }
  </style></head><body><!--image slider desktop--><divid="hero"><ulclass="bxslider"><li><ahref="www.google.com"><imgsrc="http://placehold.it/350x150/000/0ff/?text=1"class="slider-img-responsive"></a></li><li><ahref="www.google.com"><imgsrc="http://placehold.it/350x150/000/fff/?text=2"class="slider-img-responsive"></a></li><li><ahref="www.google.com"><imgsrc="http://placehold.it/350x150/000/e00/?text=3"class="slider-img-responsive"></a></li><li><ahref="www.google.com"><imgsrc="http://placehold.it/350x150/000/f3f/?text=4"class="slider-img-responsive"></a></li><li><ahref="www.google.com"><imgsrc="http://placehold.it/350x150/000/3f3/?text=5"class="slider-img-responsive"></a></li></ul></div><!-- slider text--><divclass="mobile-homepage-header"><ulid="slider-text"><li><h1>Title 1</h1><h2>Byline 1</h2><ahref="www.google.com">Button 1</a></li><li><h1>Title 2</h1><h2>Byline 2</h2><ahref="www.google.com">Button 2</a></li><li><h1>Title 3</h1><h2>Byline 3</h2><ahref="www.google.com">Button 3</a></li><li><h1>Title 4</h1><h2>Byline 4</h2><ahref="www.google.com">Button 4</a></li><li><h1>Title 5</h1><h2>Byline 5</h2><ahref="www.google.com">Button 5</a></li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><scriptsrc="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
    });

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

Post a Comment for "Bx-slider Sliding Outside Captions Along With The Image"