1

我在创建图库页面时遇到问题。我正在使用 Bootstrap 作为基础，并且可以很好地使用它。我查看了各种滑块和旋转木马并选择了 Flexslider2 - 它工作得很好，看起来很棒，并且作为单个滑块工作得很好。

但是我现在想使用 4 个 Flexslider，每个选项卡上一个用于画廊页面。好的，所以我可以有 4 页，但只有 1 页看起来会更好。

我对 Javascript 很陌生，但知道 html（但不知道 DOM）。为简单起见，我下面的示例只是为 2 个 Flexslider 设置。

当我的页面触发初始 Flexslider 时很好，但是当我切换选项卡时，第二个选项卡没有显示，没有错误，但是当我在第二个 Flexslider 初始化时在屏幕上发出警报时，它会显示。这指向一个 DOM 问题，但我似乎找不到解决方案。

HTML;

<div class="row-fluid">
<div class="span9"> 
  <section id="tabs">
    <div class="bs-docs-example">
        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>this is tab1 (0)</p>
            <section class="slider">
              <div id="slider1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
          <div class="tab-pane" id="profile">
            <p>this is tab2 (1)</p>
            <section class="slider">
              <div id="slider2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
        </div>
    </div>
    <hr class="bs-docs-separator">
  </section>
</div>
</div>

而javascript是；

<script type="text/javascript">
    $('#myTab a').click(function (e) {
    e.preventDefault();
    alert("just about to call initflex");
    initflexsliders();
    $(this).tab('show');
})  
</script> 

<script type="text/javascript">
   $(window).load(function(){
       initflexsliders();   
}); 
</script> 

<script type="text/javascript">
function initflexsliders(){
          $('#carousel1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider1'
          });

          $('#slider1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel1",
          });
          $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider2'
          });

          $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel2",
          });
       }
</script>

有没有人有任何想法？我希望这很简单，但它让我把头发拔了出来？

4

4 回答 4

1

我也有解决方案，这适用于 flexslider 2.5

我们在选项卡已经打开时捕获事件，然后初始化 flexslider：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var selectedTab = $(e.target).attr("href") // activated tab
  if( $(selectedTab + ' .flexslider' ).length  ){

        $(window).trigger('resize'); //this should fix for you but you can also try this


        var carousel_sliders = $(selectedTab + ' .flexslider');

        for (var i = 0; i < carousel_sliders.length; i++) {
            var element = carousel_sliders.eq(i);
             element.flexslider({
                animation: "slide",
                controlsContainer: $(selectedTab + " .custom-navigation-m .custom-controls-container"),
                customDirectionNav: $(selectedTab + " .custom-navigation-m a")
            });
        }



    }
});
于 2015-10-07T19:58:57.693 回答
0

玩了一下，似乎您不应该在页面加载时初始化每个滑块，而只是在每个选项卡上分别调用它。

小提琴：http: //jsfiddle.net/qSqpD/709/

$('#myTab a:first-child').click(function (e) {
e.preventDefault();
$(this).tab('show'); 
  $('#carousel1').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 400,
        itemMargin: 5,
        asNavFor: '#slider1'
      });
  });

希望能帮助到你

于 2013-07-16T15:18:50.207 回答
0

我有一个解决方案。

请前往

https://github.com/liangrongze/flexslider-compatible-bootstrap-tab

并下载 flexslider 文件以替换旧的 js 文件。

它适用于我的项目。

于 2015-04-26T14:03:17.987 回答
0

一个简单的解决方案是：

在 HTML 中：

<div class="tab-pane" id="videos" align="center">

在 JS 中：

$('#video').click( function (e) {
            e.preventDefault();
            $('#slider2').flexslider({
                animation: "slide",
                animationLoop: false,
                slideshow: false,
                itemMargin: 5,
                video: true
            });
于 2017-09-25T20:04:32.557 回答