Jquery滑块不响应
Jquery slider not responsive - Wordpress
我正在整理一个响应式WordPress网站,但似乎在滑块方面被卡住了。我认为这是与我的网站上的东西冲突,因为默认的主题(http://wordpress.org/themes/intuition)有一个响应滑块。
这是我使用的脚本:
//SLIDESHOW
jQuery(document).ready(function(){
//HOMEPAGE SLIDES
jQuery('.slider-slides').cycle({
speed: 1000,
timeout: 4000,
fx: 'scrollHorz',
next: '.slider-next',
prev: '.slider-prev',
pager: '.slider-pages',
pause: true,
pauseOnPagerHover: true,
containerResize: false,
slideResize: false,
fit: 1
});
jQuery('.slider-prev, .slider-next').click(function(){
jQuery('.slider-slides').cycle('pause');
});
jQuery(window).scroll(function(){
if(jQuery(document).scrollTop() > 500)
jQuery('#toplink').addClass('active');
else
jQuery('#toplink').removeClass('active');
});
});
function slide_resize(curr, next, opts, fwd) {
var ht = jQuery(this).height();
jQuery(this).parent().animate({height: ht});
}
我试着将resize选项更改为true,但没有任何改变。我尝试添加宽度:100%和高度:450px的代码,建议在其他地方,但这并没有改变任何东西。
我真的是束手无策了!如果有人有什么建议,那就太好了。谢谢你!
这是我的header.php:
<?php if(cpotheme_get_option('cpo_slider_always') == 1 || is_front_page()){ ?>
<?php $feature_args = array(
'post_type' => array('post', 'page'),
'meta_key' => 'page_featured',
'meta_value' => 'slider',
'posts_per_page' => -1,
'orderby' => 'menu_order',
'ignore_sticky_posts' => 1,
'order' => 'ASC'); ?>
<?php $slider_posts = new WP_Query($feature_args); ?>
<?php if($slider_posts->post_count > 0): $slide_count = 0; ?>
<div id="slider" class="slider">
<ul class="slider-slides">
<?php while($slider_posts->have_posts()): $slider_posts->the_post(); ?>
<?php $slide_count++; ?>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), array(1500, 7000), false, ''); ?>
<?php $slide_position = get_post_meta(get_the_ID(), 'slide_position', true); ?>
<li id="slide_<?php echo $slide_count; ?>" class="slide slide-<?php echo $slide_position; ?>" style="background:url(<?php echo $image_url[0]; ?>) no-repeat center; background-size:cover;">
<div class="container">
<a class="slide-textbox" href="<?php the_permalink(); ?>">
<h2 class="slide-title"><?php the_title(); ?></h2>
<div class="slide-content"><?php the_excerpt(); ?></div>
</a>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php if($slider_posts->post_count > 1): ?>
<div class='slider-prev'></div>
<div class='slider-next'></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }else{ ?>
<?php $header_image = get_header_image(); if($header_image != ''): ?>
<img src="<?php echo $header_image; ?>" class="header-image" />
<?php endif; ?>
您似乎没有将slide_resize
绑定到任何东西上。该函数存在,但在任何地方都没有调用。如果碰巧在其他地方调用了它,但没有显示:
"slider"本身和"slides"本身会收缩以响应移动(至少宽度)。你只需要考虑滑块的高度,而不是图像本身。类似这样的代码应该可以达到这个目的(抱歉有语法错误):
jQuery(window).on('resize', function(){
var currentWidth = jQuery('.slider-slides .container').width();
var newHeight = currentWidth / 2.444; //2.444 is your 1100/450 from the full size slider
('.slider-slides .container').height(newHeight); //Container height
jQuery('.slider-slides .slide').height(newHeight); // Slide wrap's height
});
相关文章:
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- 在web应用程序中的新搜索中重新加载搜索结果(不带jQuery)
- 不带jquery的全屏分页
- 如何找到家长's的子级,使用querySelector而不是jQuery
- AJAX GET 请求内容不响应 jQuery
- jQuery 不响应无线电检查
- 将AJAX响应加载到浏览器中(不带jQuery)
- jquery自动完成不响应动态插入的元素
- jQuery `.click`条件不响应`else`
- JQuery:动态创建的html不响应JQuery函数
- 我的美元(窗口).滚动不响应(jQuery)
- 元素不响应JQuery单击
- jQuery .animate()不响应毫秒设置
- 在CodeIgniter中,模板上动态添加的内容不响应Javascript/AJAX/Jquery
- Jquery滑块不响应
- 当页面内容被Ajax响应替换时,为什么不应用jQuery插件
- Jquery 和 ajax 不响应级联下拉列表
- 返回当前页面时不显示jQuery ajax响应
- HTML Required标签不响应Jquery