在动态编写时，幻灯片不使用swiper.js进行渲染

Question

使用swiper.js轮播动态写入幻灯片。检查HTML，幻灯片的代码就在那里。轮播幻灯片无法正确渲染，当我点击箭头时它们会消失。

轮播的内容：

function addLibraryCourses(libidx) {     

    var dynamiccontainer = $('.dynamic-library-container');
    dynamiccontainer.find('.spinner').remove();                            

    var pushcontainer = pushlibs[libidx];
    var dynamiccontainerclassname = 'dynamiccontainer_' + libidx;
    var dynamicSwipeName = 'dynamicSwipeName' + libidx;
    var outer = $('<div class="dynamiccontainer-item gray-bg" />')
        .append(
            $('<div class="text-header" />')
                .append(
                    $('<div class="leftside" />').html(pushcontainer.lefttext)
                )
                .append(
                    $('<div class="rightside" />')    
                        .attr('libraryid', pushcontainer.libraryid)   
                        .click(library_click)                                                     
                        .html(pushcontainer.righttext)                                                
                )
        )
        .append(
            $('<div class="swiper-container '+ dynamicSwipeName +'"><div class="' + dynamiccontainerclassname + ' course-list-container course-list-container-sm swiper-wrapper" /><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div>')
        );                                                    
        dynamiccontainer.append(outer);
        var courselistcontainer = $('.' + dynamiccontainerclassname);
        var swipeContainer = $('.' + dynamicSwipeName);
        addPlaylistToContainer(courselistcontainer, pushcontainer.courses, true); //global 

        var swipeContainer = new Swiper(swipeContainer, {
            slidesPerView: 3,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 0, 
            loop: true
        });
    _gettingDynamicContainers = false;
    getAndBuildLowerUI(); // get next
    /* end build dynamic containers */
};

部分代码页代码：

<div class="swiper-container dynamicSwipeName0 swiper-container-horizontal">
    <div class="dynamiccontainer_0 course-list-container course-list-container-sm swiper-wrapper" style="transform: translate3d(-851px, 0px, 0px); transition-duration: 0ms;">
       <div class="list-item playable swiper-slide carouselItem swiper-slide-duplicate" courseid="2461" data-swiper-slide-index="7" style="width: 283.667px;">
          <div class="cover-art">
            <img src="http://s3.amazonaws.com/images.learnsmartnow.com/LMS/CourseImagesHD/default.jpg">
          </div>
          <div class="progress">
            <img src="/Content/css/imported/global/course-completion-empty.png" title="Not Started 0%." alt="Not Started 0%.">
          </div>
          <div class="details">
            <div class="title" courseid="2461">Hacker: Cloud Computing-Attacks</div>
            <div class="list-view-play-button" style="display: none;"><img alt="play" title="play" style="cursor: pointer;" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/btnPlay.png" courseid="2461">                    
          </div>
          <div class="info">33m | 2 Lessons</div>
          <div class="rating"><div class="stars-container"><img class="star star-full" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/rating-star-full.png"><img class="star star-full" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/rating-star-full.png"><img class="star star-full" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/rating-star-full.png"><img class="star star-half" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/rating-star-half.png"><img class="star star-empty" src="https://media-public.learnsmartsystems.com/LMS2/siteicons/rating-star-empty.png"></div></div>
          </div>
        </div>

...

如何让旋转木马正确渲染？