Flex Slider is not working on mobile phones

问题

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.

I used Genesis theme for wordpress for the site.

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

回答1:

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%;
    }
}

来源：https://stackoverflow.com/questions/23752098/flex-slider-is-not-working-on-mobile-phones

标签

javascript

css

wordpress

mobile

flexslider