标签: jquery-cycle2

我正在使用Cycle2作为基本的旋转木马.我的幻灯片项有时在他们的数据中有一个url,因此我必须使用Cycle2 api事件来使用该URL.

我的问题是,当'cycle-after'事件触发时,没有任何初始化事件会触发.所以如果我的第一张幻灯片有一个网址,则没有任何反应.这是我的代码:

pressSlideshow.on({
'cycle-post-initialize': function(event) {
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
},
'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var a = $(incomingSlideEl);
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
}
});

第一个事件永远不会触发,但是当我滚动幻灯片时,'cycle-after'事件工作正常.我还尝试了从未触发过的'cycle-initialized'事件,以及仅在滚动后但未在初始化时触发的'cycle-update-view'事件.

是什么赋予了？&thnx提前:}

Cycle2活动文档

我有一个页面使用Cycle2来运行带有隐藏显示元素的幻灯片.

这一切都很好,除非我展开幻灯片并再次关闭它,高度就会消失.如果我稍微调整窗口大小,这将触发重新计算,然后从高度的空间被放回右侧.

我正在使用

data-cycle-auto-height="container"

我基本上只需要触发调整大小时发生的这个动作.

有小费吗？

它根本就没有激活.我完全按照插件的演示页面中的代码复制了代码,是否有一些我错过了？

<div class="slideshow" 
  data-cycle-fx=carousel
  data-cycle-timeout=0
  data-cycle-carousel-visible=2
  data-cycle-next="#next"
  data-cycle-prev="#prev"
  data-cycle-pager="#pager">
    <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach5.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach6.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach7.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach8.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>

<div class=center>
    <a href="#" id="prev">&lt;&lt; Prev </a>
    <a href="#" id="next"> Next &gt;&gt; </a>
</div>

<div class="cycle-pager" id="pager"></div

<script type="text/javascript" src="jquery-1.9.1.min.js?$staticlink$"></script>

 <!-- JS FILES TO BE INCLUDED-->
<script type="text/javascript" src="anniversary/js/jquery.easing.1.3.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/main.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/jquery.cycle2.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/jquery.cycle2.carousel.js?$staticlink$"></script>

我已经使用 jQuery Cycle 2 好几年了，想知道是否有一种方法可以在不需要 jQuery 的情况下完成大部分功能？http://jquery.malsup.com/cycle2/faq/

这是一个基本的 CSS 淡入/淡出循环过渡。

    var actual = 0;
    var total = 3;

    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }

    function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }

    function nextImg() {
        var e;

        e = document.getElementById("img" + actual);
        deleteClass(e, "visible");

        actual++;
        if (actual > total - 1) actual = 0;

        e = document.getElementById("img" + actual);
        addClass(e, "visible"); …

我使用cycle2插件显示由一些图像和另一个幻灯片组成的幻灯片.内部幻灯片的下一个和上一个按钮由于某些原因(在示例中向上和向下)不起作用,尽管它们已正确设置恕我直言:

data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"

和

<div id="upDiv">
    <a href="#" id="upImg"><img src="images/up.png" alt="" /></a>
    <p>scroll up</p>
</div>
<div id="downDiv">
    <p>to see more scroll down</p>
    <a href="#" id="downImg"><img src="images/down.png" alt="" class="outer-slide" /></a>
</div>

我怎样才能让他们工作？

这是一个演示:http://jsfiddle.net/FKU2L/22/

对于最近的项目,我们正在使用Cycle2.我已升级到最新版本.我们使用Sitecore来呈现内容.无论我采取的方法(下面),我都无法使自动停止运行.我们每张幻灯片有2-3张幻灯片,我们希望它按以下方式移动:1-2-3-1.

我们是否将其渲染为以下规则中的自动播放:

<ul class="<%# Sitecore.Context.PageMode.IsPageEditor ? String.Empty : "cycle-slideshow" %> interior" 
                data-cycle-speed="3000" 
                data-cycle-autostop="true"
                data-cycle-timeout="5000" 
                data-cycle-auto-height="container"
                data-cycle-slides="> li" >
                <sc:Placeholder  runat="server" ID="SlidePlaceholder" Key="SlidePlaceholder" /></ul>

或者,如果我们在没有"cycle-slideshow"类的JS中以编程方式播放:

$('#my-slideshow').cycle({
    speed: 3000,
    autostop: true,
    timeout: 5000,
    end: function() {
        $('#my-slideshow').cycle('stop');
    }
});

• 我们正在正确加载JQuery.
• 在对功能进行一些研究之后,我已经尝试了'true'和'1'来自动停止.
• 我们还使用Carousel和Swipe Cycle2库.
• 我们同时加载以下库:fancybox 2.1.4,查询,imagesloaded jquery.ba-resize,jquery.qtip,jquery.rwdImageMaps,Slimscroll和modernizer.
• 它正常循环.我们可以基于捕获视口的更改来使其停止内联,但标准的自动停止不起作用.这是一个快速的concole日志捕获(IE,FF和Chrome之间相同)
• [cycle2] --c2 init-- jquery.cycle2.min.js:6
• [cycle2] speed:3000(number)jquery.cycle2.min.js:6
• [cycle2] autostop:true(boolean)jquery.cycle2.min.js:6
• [cycle2] timeout:5000(number)jquery.cycle2.min.js:6
• [cycle2] autoHeight:container(string)jquery.cycle2.min.js:6
• [cycle2] slide:> li(string)jquery.cycle2.min.js:6
• 它在原始HTML模式下演示了与静态内容相同的行为
• 另外,我运行了通过JS Lint在页面中启动的所有JS.

任何帮助/建议表示赞赏.谢谢你的时间.

我正在使用Cycle2的Carousel寻呼机,这里的示例非常类似于设置.

我的问题是前一个和下一个滑块工作正常,但点击旋转木马不会改变另一个滑块中的幻灯片.它在上面链接的Cycle2示例中工作.

检查小提琴中的JS:

http://jsfiddle.net/yCCLL/1/

示例中的CSS已被破坏但无关紧要,您可以看到问题所在.如果单击下一步它循环但单击轮播中的图像不会更改滑块.

我总是在控制台中收到错误消息:

[cycle2] goto: invalid slide index

我使用JQuery Cycle 2,需要在显示时显示幻灯片的索引.

这是HTML:

 <div id="slideshow"  data-cycle-auto-height="container" data-cycle-slides="> div"  >
    <div>slide 1</div>
    <div>slide 2 </div>
    <div>slide 3 </div>
    <div>slide 4</div>
</div>
<div id="caption"></div>

这是Javascript:

$('#slideshow').cycle({
    delay: 0
});

$('#slideshow').on('cycle-before', function (e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var caption =  (optionHash.currSlide + 1) + ' of ' + optionHash.slideCount;
    $('#caption').html(caption);
});

这是小提琴演示:

http://jsfiddle.net/mddc/kKD9S/1/

问题是,在页面加载时,显示第一张幻灯片,但未触发事件"cycle-before",并且第一张幻灯片似乎在最后一张处理.

我做错了什么？

谢谢!