光滑的幻灯片文本重叠第一个幻灯片类=＆＃34; slick-list.draggable＆＃34;使用jquery mobile

Question

我还在学习爬行，但这里有：  我有一个JQuery移动应用程序，它使用光滑的carousel jqm插件。在应用程序的第一页上，我想自动播放4张图片（幻灯片），我想将每张图片同步到它自己的幻灯片内容，这些内容应显示在下方。使用光滑，这一切似乎都有效，除了在第一次迭代中为第一张幻灯片显示的文本没有正确格式化，并且看起来好像正确的css类尚未与文本相关联。与文本关联的.css类似乎是slick-list.draggable。对于第二次迭代，文本正确地显示了.css类的光滑幻灯片光滑活动。我的代码如下所示：

$(window).on('load', function() {
    $('.slideContent').slick({
    slidesToShow : 1,
    slidesToScroll : 1,
    asNavFor : '.slideshow',
    dots : true,
    });

    $('.slideshow').slick({
        slidesToShow : 1,
        slidesToScroll : 1,
        autoplay : true,
        autoplaySpeed : 10000,
        initialSlide : 4,
        asNavFor : '.slideContent',
        mobileFirst : true,
        dots : true
     });
});

HTML看起来像这样：

<div id="#slides" class="slideshow">
            <div class="slide">
                <img src="images/slide1.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slide2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slide3.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slide4.jpg" alt="">
            </div>
        </div>
        <!-- end of slideshow -->
        <div class="slideContent">
            <div>
                <h3>abc</h3>
                abc123
            </div>
            <div>
                <h3>xyz</h3>
            xyz1234
            </div>

            <div>
                <h3>dfg</h3>
                dfg
            </div>

            <div>
                <h3>mnp</h3>
                lkj
            </div>

        </div>
        <!-- end of slideContent -->

我很乐意提供更多信息。谢谢你的任何建议！ JT