Question

我正在使用Owl Carousel 2。我想在Bootstrap Accordion面板中加载Owl Carousel。我的代码是这样的......

HTML CODE：

public class ExportToExcel
{
    #region Export to Excel
    public static void PrepareGridViewForExport(Control gv)
    {
        Literal l = new Literal();

        for (int i = 0; i < gv.Controls.Count; i++)
        {
            if (gv.Controls[i].GetType() == typeof(LinkButton))
            {
                l.Text = (gv.Controls[i] as LinkButton).Text;

                gv.Controls.Remove(gv.Controls[i]);
                gv.Controls.AddAt(i, l);
            }
            else if (gv.Controls[i].GetType() == typeof(HyperLink))
            {
                l.Text = (gv.Controls[i] as HyperLink).Text;

                gv.Controls.Remove(gv.Controls[i]);
                gv.Controls.AddAt(i, l);
            }
            else if (gv.Controls[i].GetType() == typeof(DropDownList))
            {
                l.Text = (gv.Controls[i] as DropDownList).SelectedItem.Text;

                gv.Controls.Remove(gv.Controls[i]);
                gv.Controls.AddAt(i, l);
            }
            else if (gv.Controls[i].GetType() == typeof(CheckBox))
            {
                l.Text = (gv.Controls[i] as CheckBox).Checked ? "True" : "False";

                gv.Controls.Remove(gv.Controls[i]);
                gv.Controls.AddAt(i, l);
            }
            else if (gv.Controls[i].GetType().Name == "DataControlLinkButton")
            {
                l.Text = (gv.Controls[i] as LinkButton).Text;

                gv.Controls.Remove(gv.Controls[i]);
                gv.Controls.AddAt(i, l);
            }

            if (gv.Controls[i].HasControls())
            {
                PrepareGridViewForExport(gv.Controls[i]);
            }
        }
    }
    #endregion
}

jQuery代码：

<div class="panel-group users_block_accordion" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#usersPanel" aria-expanded="false" aria-controls="collapseTwo">
        <h4 class="panel-title">
          View Users in the Panel
        </h4>
      </a>
    </div>
    <div id="usersPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <div class="owl-carousel owl-theme">
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
          <div>
            <img src="http://placehold.it/500x500" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我也在分享最新动态的截图预览。

屏幕截图1（在页面加载 - Carousel看起来像这样）

屏幕截图2（调整屏幕大小后 - Carousel看起来像这样）

请在页面加载后帮助我完成此加载..这就像截图2 !!

Answer 1

您应该在显示的手风琴上启动猫头鹰旋转木马。 Bootstrap手风琴发射＆＃34; shows.bs.collapse＆＃34;。 docs

    $('#accordion').on('shown.bs.collapse', function () {
        var $carousel = $(".expert_block_accordion .owl-carousel").owlCarousel({
            navigation: true,
            navigationText: [
                "<i class='icon-chevron-left icon-white'><</i>",
                "<i class='icon-chevron-right icon-white'>></i>"
            ],
            items: 3
        });
    });

Answer 2

这可能有所帮助（我没做过）

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: 0,
    beforeActivate: function (event, ui) {
         window.dispatchEvent(new Event('resize'));
}
});

OR

$("a[data-toggle='tab']").on('shown', function () {
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt);
});

Answer 3

我在owl-carousel面临同样的问题。此脚本可能对您有所帮助，可以使用特定的div调整屏幕大小。

$(".accordion-toggle").on('click', function () {
    var width = $(".item").width();
    var owidth = width+"px";

    $(".wir").animate({"width":owidth}, 1);
});

Owl Carousel 2里面的bootstrap手风琴只在窗口调整大小？

3 个答案: