Skip to content

Instantly share code, notes, and snippets.

@lkacenja
Created October 12, 2015 19:53
Show Gist options
  • Save lkacenja/101c75d9fec86366a1c9 to your computer and use it in GitHub Desktop.
Save lkacenja/101c75d9fec86366a1c9 to your computer and use it in GitHub Desktop.
Cycle2 Text Slider Prev Next Controls
<!doctype html>
<html>
<head>
<title>Impact Story Rotator</title>
<style>
.cycle-slideshow {
width: 500px;
margin: auto;
}
.slide {
width: 500px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-slides="> div.slide"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next">
<div class="slide">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ligula at mauris aliquam placerat et elementum risus. Vestibulum tincidunt viverra libero, lobortis eleifend sem facilisis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam et eleifend eros, vel fermentum mi. Curabitur dignissim vulputate velit, vel posuere quam accumsan non. Fusce odio tortor, varius non nibh pharetra, faucibus pharetra dolor. Sed ut est nec velit lacinia laoreet. Nullam tempus posuere mattis. Praesent et pellentesque diam. Donec cursus, ex sed vehicula dictum, mauris tortor faucibus libero, sit amet tincidunt nibh metus vel lectus. Morbi quis quam felis. Proin fermentum libero vel purus hendrerit, et hendrerit felis consequat. Mauris et erat a velit efficitur volutpat quis vitae est. Integer iaculis, augue sed congue vulputate, orci neque finibus nisi, non convallis ex nunc a purus.</div>
<div class="slide">Vivamus quis ipsum sed felis interdum tincidunt. Morbi ullamcorper euismod elit, ac condimentum diam vestibulum eget. Phasellus placerat, tellus nec imperdiet viverra, magna risus lacinia neque, sit amet cursus nisl sapien non mauris. Maecenas sit amet urna tempor, fermentum odio sed, efficitur nibh. Fusce sit amet enim non purus congue euismod. Duis sollicitudin mi odio, sed luctus lacus ornare sed. In a finibus urna. Vestibulum et porta purus. Mauris non pulvinar ipsum, nec efficitur ante. Nulla porta vehicula dignissim. Fusce vitae imperdiet lectus, in viverra tortor. Integer faucibus venenatis placerat. Cras bibendum lorem at lorem pretium aliquet. Cras placerat purus ac auctor pellentesque. Quisque vel nulla nisi.</div>
<div class="slide">Proin gravida mollis tempor. Phasellus interdum tristique condimentum. Mauris viverra metus in tincidunt ornare. Nam ac nisi non dolor faucibus ultricies. Mauris nibh libero, sagittis in pharetra pulvinar, ornare sit amet libero. Nullam imperdiet odio sit amet lectus tristique, nec facilisis sapien gravida. Quisque facilisis, augue et cursus volutpat, lectus tellus varius quam, et pulvinar enim felis sed enim.</div>
</div>
<div class="cycle-prev">Prev</div>
<div class="cycle-next">Next</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment