Flex Slider 不适用于手机

Posted 2023-03-31

【中文标题】Flex Slider 不适用于手机

【英文标题】：Flex Slider is not working on mobile phones

【发布时间】：2014-05-20 06:03:00

【问题描述】：

我正在使用此页面上的 flexslider 开发一个网站：http://www.intensetomatoes.co.nz/story-timeline/

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

我使用 Genesis 主题作为网站的 wordpress。

必要的代码如下：

<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'); ?>" />
                        </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"
  ); 

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

【问题讨论】：

向我们展示您的代码，首先是您的努力

@pc-shooter 我已经编辑了我的帖子。

【参考方案1】：

我已经修好了！刚刚发现由于一些响应式媒体查询，滑块掉到了原来的位置：

@media only screen and (max-width: 1023px)
    .site-inner 
        padding-left: 0%;
        padding-right: 0%;