jquery-cycle2 | 易学教程

Velocity.js/Blast.js starting opacity at 0

阅读更多关于 Velocity.js/Blast.js starting opacity at 0

问题 I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2. I have a few issues with what I am trying to achieve that I cannot work out from the documentation. A 'Velocity/Blast function' can exist on many slides throughout in a cycle2 slider so it needs to re-run each time. This is what I am trying to achieve: The Velocity animation needs to begin at opacity:0 each time... so when you cycle to a

jQuery Cycle2 per-slide speed option

阅读更多关于 jQuery Cycle2 per-slide speed option

问题 I can change timeout using the timeoutFn. How can I do the same for speed ? I seached and could not find any way other that having the data-speed attribute on the slide elements. Is there any way to change that programmatically? $('.slideshow').cycle({ speed: 100, timeoutFn: calculateTimeout, slides: "li", fx: 'scrollLeft,scrollDown,scrollRight' }); function calculateTimeout(currElement, nextElement, opts, isForward) { var currentElementTransition = $(currElement).attr('data-timeout'); return

Cycle2: Center Carousel active slide below main slideshow

阅读更多关于 Cycle2: Center Carousel active slide below main slideshow

问题 I have a jCycle2 slideshow with pager carousel like this demo I would like to have the active slide centered under the main carousel, but I have not found a valid solution. I have tried adding data-cycle-carousel-offset="40%" to the carousel, which works great, but then I can not access the final 3 slides of the carousel because of the offset. I have also tried a CSS solution with the same results. Images attached of desired result. Current: Desired: Thanks! 来源： https://stackoverflow.com

Cylcle2 no cycle-pager shows up

阅读更多关于 Cylcle2 no cycle-pager shows up

问题 I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php my HTML: <div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager"> <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"> <img src="http://jquery.malsup

Cycle2 Carousel active slide in center

阅读更多关于 Cycle2 Carousel active slide in center

问题 I am using Cycle2 with a carousel pager, in the same way as this demo: http://jquery.malsup.com/cycle2/demo/caro-pager.php Currently the active slide in the demo is on the left unless you are on the last few slides. What I would like is: for the active slide to start on the left, on slide 1 then when slide 2 is clicked, the thumbnails don't move but the second thumbnail shows as active. When slide 3 is clicked, the thumbnails don't move but the third thumbnail (in the middle) becomes active).

Load JQuery cycle2 on loaded Ajax content

阅读更多关于 Load JQuery cycle2 on loaded Ajax content

问题 I'm trying to initiate JQuery cycle on external HTML content loaded in with Ajax, but this doesn't seem to work: $(".container").load("step2.html", function() { $.fn.cycle.defaults.autoSelector = '.cycle-slideshow'; }); the html is as follows: <div class="cycle-slideshow second-prize-slider" data-cycle-manual-speed="2000" data-cycle-slides="p" data-cycle-timeout=5000 > <p>Jetzt<br />mitmachen & <br />gewinnen</span></p> <p >Täglich<br>mitspielen & <br> Gewinnchance<br> steigern!</p> </div>

Cycle2 Initialization events not firing

阅读更多关于 Cycle2 Initialization events not firing

问题 I'm using Cycle2 for a basic carousel. My slide items sometimes have a url in their data, so I have to use the Cycle2 api events to use that url when it is there. My problem is that while the 'cycle-after' event fires fine, none of the initialize events will fire. So if my first slide has a url, nothing happens. This is my code: pressSlideshow.on({ 'cycle-post-initialize': function(event) { console.log('call'); var a = $('img.cycle-slide-active'); var d = a.data('url'); if (d !== undefined) {

With jQuery Cycle 2 how do I show a part of the next and previous slides

阅读更多关于 With jQuery Cycle 2 how do I show a part of the next and previous slides

问题 I've been struggling with this for a while now and have seen some very complex JavaScript based solutions. I finally cracked it (for my needs anyway) with a minimal CSS solution. 回答1: Essentially you move the "overflow: hidden" from the slideshow element to a parent element that is wider, and then set a left margin on the slideshow element. I've updated a JSFiddle for a fixed layout: http://jsfiddle.net/mledwards34/x89sQ/5/ .slideshow-container { overflow: hidden !important; width: 300px; }

Cycle2 Initialization events not firing

阅读更多关于 Cycle2 Initialization events not firing

I'm using Cycle2 for a basic carousel. My slide items sometimes have a url in their data, so I have to use the Cycle2 api events to use that url when it is there. My problem is that while the 'cycle-after' event fires fine, none of the initialize events will fire. So if my first slide has a url, nothing happens. This is my code: 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