Flex Slider 无法在手机上运行

2024-05-03

我在这个页面上使用 flexslider 的网站上工作:http://www.intensetomatoes.co.nz/story-timeline/ http://www.intensetomatoes.co.nz/story-timeline/

我只是想知道滑块在移动设备上无法正常工作的可能原因是什么。

我在该网站上使用了 WordPress 的 Genesis 主题。

必要的代码如下:

<div id="timewrap" class="slidewrap">
        <h1>The Full Intense story...</h1>
        <div id="timeline-section" class="flexslider">
            <ul class="slides">
                <?php while($the_query->have_posts()): $the_query->the_post();?>
                    <li>
                        <div class="col_one">
                            <img src="<?php the_field('timeline_image'); ?>" alt="<?php the_title(); ?>"/>
                        </div>
                        <div class="col_two">
                            <h1><?php the_title(); ?></h1>
                            <div class="description"><?php the_content(); ?></div>
                        </div>

                    </li>
                <?php endwhile; wp_reset_query(); ?>
            </ul>
        </div>

柔性滑块代码:

 $('#control').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 50,
    itemMargin: 6,
    asNavFor: '#timeline-section'
  });
  $('#timeline-section').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    controlsContainer: ".slidewrap",
    slideshow: false,
    sync: "#control"
  }); 

我目前不知道如何解决这个问题。任何关于如何解决这个问题的解决方案的想法都会有很大的帮助。


我已经修好了!刚刚发现由于一些响应式媒体查询,滑块掉落在其原始位置:

@media only screen and (max-width: 1023px){
    .site-inner {
        padding-left: 0%;
        padding-right: 0%;
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flex Slider 无法在手机上运行 的相关文章

随机推荐