Question

我试图在bootstrap模式中加载外部html文件中运行光滑的滑块，但我无法做到。这是简单的按钮;

<p>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal">#bigmodal</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal1">#bigmodal1</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal2">#bigmodal2</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal3">#bigmodal3</a>

<p>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal">#bigmodal4</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal1">#bigmodal5</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal2">#bigmodal6</a>
<a data-toggle="modal" href="ajax/ajax.html" data-target="#bigmodal3">#bigmodal7</a>

它们是相同的，只是有不同的目标。这是我的jquery代码;

$.fn.extScripts = function() {

    $(".modal-slider").slick({
        dots: true,
        arrows: false,
        infinite: true,
        fade: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
};

//Start Modal Function
$('[data-toggle=modal]').each(function(){
    var $targetID = $(this).data('target').replace('#', ""),
        $modalID = $targetID.replace(/\d+/g, '');
    //Add modal elements
    $('body').append('<div class="modal fade bigmodal" id="'+ $targetID +'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-content"><button type="button" class="next modal-change">Next Project <i class="fa fa-long-arrow-right"></i></button><button type="button" class="close-button" data-dismiss="modal"></button><button type="button" class="prev modal-change">Previous Project <i class="fa fa-long-arrow-left"></i></button><div class="modal-body"></div></div></div>"'); 

    //Run Modal
    $(this).on('click', function (e) {
        var $loader = $('.item-loader'),
            $target = $($(this).data('target')),
            $href = $(this).attr('href'),
            $mBody = $target.find('.modal-body');

        //Load HTML File
        $($mBody).load($href);

            //Wait for loading
            $loader.fadeIn(300);
            setTimeout(function() {
                $loader.fadeOut(300);

            }, 2000);
            //Show Modal

            setTimeout(function() {

                $target.modal('toggle'); // prevents multiple clicks from reopening
                    //Run Slick Slider
                     $($mBody).extScripts();

            }, 2550);
            return false;
    });
    //Calculate to next/prev modals
    $("div[id^='"+ $modalID +"']").each(function(){

        var currentModal = $(this);
        //click next
        currentModal.find('.next.modal-change').click(function(){
            currentModal.modal('hide');
            currentModal.closest("div[id^='"+ $modalID +"']").nextAll("div[id^='"+ $modalID +"']").first().modal('show'); 
        });
        //click prev
        currentModal.find('.prev.modal-change').click(function(){
            currentModal.modal('hide');
            currentModal.closest("div[id^='"+ $modalID +"']").prevAll("div[id^='"+ $modalID +"']").first().modal('show'); 
        });
    });
});

这是我的外部文件;

<section class="bigmodal">
<div class="modal-slider">
    <div><img src="images/about_01.jpg" alt="about "></div>
    <div><img src="images/about_02.jpg" alt="about "></div>
    <div><img src="images/about_03.jpg" alt="about "></div>
</div>

Slider正在首先点击几下，但点击不同的模态按钮后停止。我如何为外部html文件运行光滑的滑块？

Answer 1

当您通过ajax调用内容或使用innerHTML输入代码时，您需要重新启动调用函数的效果。

试试这个

＆＃13;

var callEffect = function () {
  $(".modal-slider").slick({
    /* rest of code */
  });
}

$(window).load(function() {
  callEffect();
});

＆＃13;

当你的内容加载时，你再次调用该函数。

外部html文件没有工作滑块

1 个答案: