Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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: 800px;
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;
}
#kittycounter {float: left}
.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-caption="#kittycounter"
data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
>
<div>
<img src="http://placekitten.com/g/800/800" />
<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
<img src="http://placekitten.com/g/800/100" />
<p>Slide 2. 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. 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>
</div>
<div class="slideshow-controls">
<a href=# id="prev">Previous</a>
<p id="kittycounter"></p>
<a href=# id="next">Next</a>
</div>
<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.