Question

我只遇到过idangerous JS插件，当加载页面没有加载该功能时。虽然另一个旋转木马刷卡工作正常。

        <div class="feedhead news clearfix">News</div>
        <div class="newscol-items swiper-wrapper">
            <?php
            //Instead do this using a WP Query and loop.
            $queryargs = array(
                'post_type'=>'news',
                'showposts'=>5
            );
            query_posts($queryargs);
            if (have_posts()){
                $count = 0;
                while (have_posts()) {
                    the_post();
                    $count++;
                    get_template_part('content','news');
                }
            } else {
                get_template_part('content','noposts');
            }
            wp_reset_query();
            ?>
        </div>
    </div>

     <script type="text/javascript">
      jQuery(function(){
         // Tries to initialise the slider before the page has loaded
         var mySwiper2 = jQuery('.swiper-container.newscol').swiper({
             slideClass: 'post-item',
             slidesPerView: 4,
             slidesPerViewFit: false,
             loop: true,
             centeredSlides: true,
             autoplay: 5000,
             speed: 500,
             calculateHeight: true,
             roundLength: true,
             mode: 'horizontal'
         }); 
      });
      </script>

我检查了控制台日志及其显示＆＃34; 未捕获的TypeError：无法读取属性＆＃39; getWidth＆＃39;未定义的 ＆＃34;。在控制台上输入时，该功能起作用。

Answer 1

我最近遇到了同样的问题，并通过明确设置幻灯片元素的宽度（以像素为单位）来解决它。你可以用css：

做到这一点

.swiper-slide{
    width: 300px; /*change as what width suits you*/    
}

或者使用js，在初始化swiper之前。

请考虑您需要遵循给定的html结构，如＃34; Swiper Full HTML Layout＆＃34;部分所示，在此链接中http://www.idangero.us/sliders/swiper/api.php

Answer 2

如果父级具有精确宽度或全屏宽度且响应灵敏，则容器必须具有1170像素或100％的精确宽度。当然是px的高度：

.swiper-container {
    width: 100%;
    height: 300px;
    margin: 20px 0;
}

在css中不会触及包装器。

幻灯片只获得以下css：

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

Swiper-slide中的所有元素都像div liw一样。必须有100％的宽度才能从插件中自动获得正确的宽度。

idangerous swiper JS

2 个答案: