Cycle2 Plugin Ẩn / Hiện các nút jQuery (Cycle2 Plugin Hide/Show buttons jQuery)

問題描述

Cycle2 Plugin Ẩn / Hiện các nút jQuery (Cycle2 Plugin Hide/Show buttons jQuery)

I have used the jQuery cycle2 plugin on a blog website. What i want the slideshow to do is when there is more than 1 image displayed, the controls will show‑at the moment they are hidden through css.

The plugin is used by declaring it in my header (here is the link to the js file: http://malsup.github.com/jquery.cycle2.js

And then my css contains a class for the container of the slideshow, class for the container for the buttons and a class each for prev and next buttons:

css:

.cycle‑slideshow {
    height:400px;
    z‑index:0;
}

.cycle‑slideshow  img{
    width:100%;
    height:100%;
    z‑index:3;
}

.center {
 display:none;  
}

.center a{
    z‑index:4;
    position:absolute;
    margin‑top:‑48px;
}

.center a:hover {
    display:block;
}


.center a#prev, .center a#next{
    position:relative;
    width:4%;
    height:60px;
    width:60px;
    margin‑top:‑60px;
    font‑size:40px;
    text‑align:center;  
    color:#FFF;

}

.center a#next{
    float:right;
    background:url(images/next.png) center ‑2px no‑repeat;
}

.center a#prev {
        float:left;
    background:url(images/prev.png) center ‑2px no‑repeat;
}

My html code is actually embedded within a wordpress function but the html format goes along the lines of:

<div class="cycle‑slideshow"
    data‑cycle‑fx="scrollHorz"
    data‑cycle‑pause‑on‑hover="true"
    data‑cycle‑speed="200"
    data‑cycle‑next="#next"
    data‑cycle‑prev="#prev"
    data‑cycle‑swipe="true">

    //does stuff here
    </div>
    <div class="center">
        <a href="javascript:void(0);" id="prev">&nbsp;</a> 
        <a href="javascript:void(0);" id="next">&nbsp;</a>
    </div>

The following code i was told to do (the first three lines) but this still doesn't seem to work. 

$(document).ready(function () {   
            $('.cycle‑slideshow').on( 'cycle‑initialized', function( e, opts ) {
            if ( opts.slideCount > 1 ) {
                $(".center").css("display", "block");
            }
    });
});

Im not the best with jQuery so can anyone help or give me any guidance please?

參考解法

方法 1:

In this case you are going to want to initialize the slideshow via code AFTER you add the event handler.  Remove the cycle‑slideshow  class so it doesn't auto initialize and then you can do this:

Demo:  http://jsfiddle.net/lucuma/zyhrK/1/

$('.slideshow').on('cycle‑initialized', function (e, opts) {
    if (opts.slideCount > 1) {
        $(".center").css({
            "display": "block"
        });
    }
});

$('.slideshow').cycle();

(by Shimsham84、lucuma)

參考文件

1. Cycle2 Plugin Hide/Show buttons jQuery (CC BY‑SA 3.0/4.0)