Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
demo of cycle2 progressive loading bug
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width">
<meta name='description' content='' />
<title></title>
<style>
.cycle-slideshow {
outline: 2px dashed red;
width: 350px;
max-width: 100%;
}
.cycle-slideshow > div {width: 100%}
img {
display: block;
height: auto !important;
max-width: 100%;
}
#prev, #next {
float: left;
margin: 20px;
outline: 1px dashed blue;
width: 100px;
}
.disabled {opacity: .2}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-allow-wrap="false"
data-slides=">div"
data-cycle-fx="scrollHorz"
data-paused="true"
data-cycle-auto-height="calc"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-loader=true
data-cycle-progressive="#moreimages"
>
<div>
<img src="http://placekitten.com/g/300/300" />
<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat elit nec libero fermentum pellentesque. Donec suscipit ultricies porta. In mattis faucibus nulla, in hendrerit tortor dictum ut.</p>
</div>
</div>
<div class="slideshow-controls">
<a href=# id="prev">Previous</a>
<a href=# id="next">Next</a>
</div>
<script id="moreimages" type="text/cycle">
[
"<div><img src='http://placekitten.com/g/200/200' /><p>Slide 2.Nullam cursus massa eu turpis tristique adipiscing.</p></div>",
"<div><img src='http://placekitten.com/g/350/350' /><p>Slide 3. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p></div>"
]
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.