php - JavaScript slider 不工作

Question

我在 wordpress 主题中有这个 slider ，但它不起作用。我已经正确完成所有设置，它不会滑动。自动或手动。据我所见，一切似乎都是正确的。我也遵循了所有制造商的说明，但似乎无法解决。这是网站:www.casavulturului.com

<?php if ( !$paged && get_option('woo_featured') == "true" ) { ?>
<script type="text/javascript">
  jQuery(document).ready(function(){
jQuery("#loopedSlider").loopedSlider({
<?php
    $autoStart = 0;
    $slidespeed = 600;
    if ( get_option("woo_slider_auto") == "true" ) 
       $autoStart = get_option("woo_slider_interval") * 1000;
    else 
       $autoStart = 0;
    if ( get_option("woo_slider_speed") <> "" ) 
        $slidespeed = get_option("woo_slider_speed") * 1000;
?>
    autoStart: <?php echo $autoStart; ?>, 
    slidespeed: <?php echo $slidespeed; ?>, 
    autoHeight: true
});
});
</script>
<?php } ?>
<div id="sliderWrap">
<div class="innerwrap">
<div id="loopedSlider">
<?php $img_pos = get_option('woo_featured_img_pos'); ?>
<?php $saved = $wp_query; query_posts('suppress_filters=0&post_type=slide&order=ASC&orderby=date&showposts=20'); ?>
<?php if (have_posts()) : $count = 0; $postcount = $wp_query->post_count; ?>


<div class="container">

    <div class="slides">

        <?php while (have_posts()) : the_post(); ?>
        <?php if (!woo_image('return=true')) continue; // Don't show slides without   image ?>
        <?php $count++; ?>

        <div id="slide-<?php echo $count; ?>" class="slide">

            <div class="slide-content <?php if($img_pos == "Left") { echo "fr"; } else { echo "fl"; } ?>">

                <h2 class="slide-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?   php the_title(); ?>"><?php the_title(); ?></a>
                    <?php if ($postcount > 1) echo '<span   class="controlsbg">&nbsp;</span>'; ?>
                </h2>

                <p><?php the_content(); ?></p>

            </div><!-- /.slide-content -->

            <?php if (woo_image('return=true')) { ?>
            <div class="image <?php if($img_pos == "Left") { echo "fl"; } else { echo "fr"; } ?>">
                <?php woo_image('width=515&height=245&class=feat-image&link=img'); ?>
            </div>
            <?php } ?>

            <div class="fix"></div>

        </div>

        <?php endwhile; ?> 

    </div><!-- /.slides -->
    <?php if($count > 1) { ?>
        <ul class="nav-buttons <?php if($img_pos == "Left") { echo "right"; } else { } ?>">
            <li id="p"><a href="#" class="previous"></a></li>
            <li id="n"><a href="#" class="next"></a></li>
        </ul>
    <?php } ?>

</div><!-- /.container -->

<div class="fix"></div>

 <?php else :  ?>
    <p class="note"><?php _e( 'Please add some "Slides" to the featured slider.', 'woothemes' ); ?></p>
 <?php endif; $wp_query = $saved;?>   
</div><!-- /#loopedSlider --> 
</div>
</div><!-- /#sliderWrap -->

JQUERY 代码:

(函数(jQuery){ jQuery.fn.loopedSlider = 函数(选项){

var defaults = {            
    container: '.container',
    slides: '.slides',
    pagination: '.pagination',
    containerClick: false, // Click container for next slide
    autoStart: 0, // Set to positive number for auto start and interval time
    restart: 0, // Set to positive number for restart and restart time
    slidespeed: 100, // Speed of slide animation
    fadespeed: 100, // Speed of fade animation
    autoHeight: false // Set to positive number for auto height and animation speed
};

this.each(function() {

    var obj = jQuery(this);
    var o = jQuery.extend(defaults, options);
    var pagination = jQuery(o.pagination+' li a',obj);
    var m = 0;
    var t = 1;
    var s = jQuery(o.slides,obj).children().size();
    var w = jQuery(o.slides,obj).children().outerWidth();
    var p = 0;
    var u = false;
    var n = 0;
    var interval=0;
    var restart=0;

    jQuery(o.slides,obj).css({width:(s*w)});

    jQuery(o.slides,obj).children().each(function(){
        jQuery(this).css({position:'absolute',left:p,display:'block'});
        p=p+w;
    });

    jQuery(pagination,obj).each(function(){
        n=n+1;
        jQuery(this).attr('rel',n);
        jQuery(pagination.eq(0),obj).parent().addClass('active');
    });

    if (s!=1) { // WooThemes add
    jQuery(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
    } // WooThemes add

    if (s>3) {
        jQuery(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
    }

    if(o.autoHeight){autoHeight(t);}

    jQuery('.next',obj).click(function(){
        if(u===false) {
            animate('next',true);
            if(o.autoStart){
                if (o.restart) {autoStart();}
                else {clearInterval(sliderIntervalID);}
            }
        } return false;
    });

    jQuery('.previous',obj).click(function(){
        if(u===false) { 
            animate('prev',true);
            if(o.autoStart){
                if (o.restart) {autoStart();}
                else {clearInterval(sliderIntervalID);}
            }
        } return false;
    });

    if (o.containerClick) {
        jQuery(o.container ,obj).click(function(){
            if(u===false) {
                animate('next',true);
                if(o.autoStart){
                    if (o.restart) {autoStart();}
                    else {clearInterval(sliderIntervalID);}
                }
            } return false;
        });
    }

Answer 1

您在“#loopedslider”元素上使用幻灯片:

jQuery("#loopedSlider").loopedSlider({

但是那个 div 包含一个包含幻灯片的容器，而不是幻灯片本身。所以你有两个选择:1)取出容器或者2) 将 slider 切换到包含幻灯片的元素:

jQuery(".slides").loopedSlider({