问题描述
我在此网页上使用flexslider的网站上工作:
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滑块在手机上不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!