具有动态 html 的 bxslider

Question

我在模态中使用 bxslider，由于模态应根据用户选择显示图像，因此我在滑块中动态写入 html。

这是我的模态代码：

<div class="modal fade" id="figure_carousel" role="dialog">
    <div class="modal-dialog" style="width: 80%; height: 100%;">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <br>
            </div>

            <div class="modal-body">

                <ul class="bxslider" id="elements">



                </ul>

            </div>

            <div class="modal-footer">
                <input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
            </div>  

        </div>
    </div>
</div>

单击图像时我运行以下脚本

<script>
    $(document).on("click",".paper_img",function(event){
        var modalview = get_html()
        document.getElementById('elements').innerHTML = ""
        $('#figure_carousel').modal('show');
        $('.bxslider').append(modalview.innerHTML);

        var slider = $('.bxslider').bxSlider({mode: 'horizontal'});
        slider.reloadSlider();
    });
</script>

它获取一些 html（使用 get_html 函数），将其写入模态中的 id=elements ul 并启动模态。让我们假设从 get_html 函数返回的 html 代码看起来像这样

<li><img src="/static/sourcefiles/image.png" alt="figure"/></li>

打开模态时，图片大小不对。如果我手动调整浏览器 window 的大小，幻灯片就会变得正确。不知何故，bxslider 无法处理我动态编写 html 代码的问题。在编写 html 代码或任何其他解决此问题的方法后，如何加载 bxslider？谢谢卡尔编辑：这是我在示例中遇到的问题

http://plnkr.co/edit/sHVq6cggMfVVS4QywQNs?p=preview

Answer 1

试试这个：

CSS

.bx-viewport { min-height: 90vh !important; }

如果这不起作用或只起作用一次，请尝试：

CSS

.bx-viewport.extend { min-height: 90vh !important; }

jQuery

添加这个选项：

onBeforeSlide: extendVP;

将此添加到 </body> 结束标记上方：

function extendVP($ele, from, to) {
     var vp = $('.bx-viewport');
     vp.addClass('extend');
}

更新 1

如果图像没有以适当的宽高比缩放或什至没有缩放，这里有 2 个建议：

CSS

简单

img { width: 100%; height: auto; }

更好

此过程涉及使用背景图像：

在幻灯片中放置一个 <div>（<li> 作为您的标记），给它一个 class（例如 imgFrame）
然后在其上放置一个内联 style 属性。将图像分配给 imgFrame，如下所示：
- <div class="imgFrame" style="background-image: url('path/to/img.jpg')"></div>
接下来将此添加到您的 CSS:
- .imgFrame { width: 100%; height: auto; background-repeat: no-repeat; background-size: contain; }

更新 2

对这个 bxSlider 演示所做的修改并不是为了显示它可以工作，因为它首先没有高度问题。它的目的是显示源代码并解释它的作用。在制作这个演示时，我创建了一个函数 adaptiveWidth()，它是可选的。它所做的是在页面加载时它有一个覆盖层，一旦点击它，它将进入全屏模式，然后随着覆盖层消失而快速退出全屏。希望这会唤醒 bxSlider 从它的昏迷中。

CodePen

CSS

<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>

/* Default Style ____________________________________________________*/

html, body { box-sizing: border-box; }
html { height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; }
body { height: 100%; width: 100%; position: relative; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }

/* Aesthetics [Optional]_____________________________________________*/

html { font: 400 16px/1.45 'Source Code Pro'; }
body { background: #000; color: #FFF; font-variant: small-caps; }
h1 { font-size: 3rem; font-weight: 700; }

/* jquery.bxslider.css jsDelvr.com Image Override ___________________*/

.bx-wrapper .bx-loading { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif') center center no-repeat #ffffff; }
.bx-wrapper .bx-prev { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat 0 -32px; }
.bx-wrapper .bx-next { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat -43px -32px; }
.bx-wrapper .bx-controls-auto .bx-start { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -11px no-repeat; }
.bx-wrapper .bx-controls-auto .bx-stop { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -44px no-repeat; }

/* bxSlider init Style ___________________________________________*/

#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999; height: 101%; width: 101%; overflow: hidden; cursor: pointer; pointer-events: auto; background-color: black; opacity: .5; }
.ext { max-width: -moz-fit-content; max-width: -webkit-fit-content; max-width: fit-content; width: auto; height: auto; padding: 25%; } /* adaptiveWidth Style [Optional] */

HTML

<body class="expand">
<div id="overlay"><h1>Click anywhere to start</h1></div>
<div class="ext"> <!-- adaptiveWidth Wrapper [Optional] -->
<ul class='bxslider'>
    <li>
        <img src="http://dummyimage.com/500X16:9/000/FFF.png&text=1"/>
    </li>
    <li>
        <img src="http://dummyimage.com/500X4:3/07C/FC0.png&text=2"/>
    </li>
    <li>
        <img src="http://dummyimage.com/4:3X400/D06/0FF.png&text=3"/>
    </li>
    <li>
        <img src="http://dummyimage.com/640X16:9/765/cee.png&text=4"/>
    </li>
    <li>
        <img src="http://dummyimage.com/210X16:9/B40/6F3.png&text=5"/>
    </li>
    <li>
        <img src="http://dummyimage.com/16:9X420/E2F/FC9.png&text=6"/>
    </li>
</ul>
</div>

jQ/JS

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> 
<!-- [Suggestion] Don't use the minified version: jquery.bxslider.min.js, it's buggy -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script> 

/* Page loads #overlay */
$(document).ready(function() {                      // jQ DocReady
    $("#overlay").one('click', function(event) {    // User  clicks #overlay
        event.stopImmediatePropagation();           // Isolate Event
        var tgt = document.querySelector('.expand'),// Target <body>
                that = this;                // Establish this as that
        enterFS(tgt);                       // Enter full screen to wakeup bxSlider!
        exitFS();                                  // Exit full screen
            $(that).fadeOut(1000, function() {     // #overlay fades...
                $(that).remove();                  // #overlay is gone
        });
    });
    /* Adaptive bxSlider */ 
    var bx = $('.bxslider').bxSlider({
        adaptiveHeight: true,   // http://bxslider.com/options#adaptiveHeight
        onSlideBefore: adaptiveWidth    // Callback [optional]
    });
});

/* adaptiveHeight [Optional] */
function adaptiveWidth($ele, from, to) {
    var imgWidth = $ele.find('img').width();
    var bxWidth = $('.bx-wrapper').width(imgWidth);
}

/* Enter Full Screen */ 
function enterFS(element) {
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } 
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } 
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } 
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

/* Exit Full Screen */
function exitFS() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } 
    else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } 
    else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

Answer 2

当 bootstrap 模式被隐藏时，您正在调用 bxSlider()。可能是 bxSlider 无法检测到图像高度的原因。

var bx;
$('#myModal1').on('shown.bs.modal', function () {
  if(bx === undefined){
    bx= $('.bxslider').bxSlider();
  } else {
    bx.reloadSlider(); 
  }
});

'shown.bs.modal' 它会在模型对用户可见时触发 bootstrap 事件。然后我们调用 bxSlider()，每次我们添加图像时我们调用 bx.reloadSlider();

示例：http://plnkr.co/edit/LTMCuDUc3vUm9VnmmvzG?p=preview

具有动态 html 的 bxslider

bxslider with dynamic html

javascript

jquery

html

bxslider