Flex滑块在手机上不工作 [英] Flex Slider is not working on mobile phones

问题描述

我在此网页上使用flexslider的网站上工作： http：//www.intensetomatoes .co.nz / story-timeline /

Im working on a site with a flexslider on this page: http://www.intensetomatoes.co.nz/story-timeline/

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

I just want to know if what could be the possible reason why the slider is not working on properly in mobile devices.

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

I used Genesis theme for wordpress for the site.

必要的代码如下： p>

The necessary codes are below:

<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>

Flex Slider代码：

Flex Slider Code:

 $('#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"
  }); 

我现在不知道如何解决这个问题。任何想法的解决方案如何解决这个将是一个很大的帮助。

I don't have any idea at this point on how to fix this. Any idea for a solution how to fix this would be a great help.

推荐答案

我已经修复了它！刚刚发现滑块由于一些响应媒体查询而下降到其原始位置：

I already fixed it! Just found out that the slider dropped on its original location due to some responsive media query:

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

这篇关于Flex滑块在手机上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！