jcslider
Version:
A responsive slider jQuery plugin with CSS animations from animate.css
121 lines (116 loc) • 5.78 kB
HTML
<html lang="en">
<head>
<title>jcSlider: A responsive slider jQuery plugin with CSS animations from animate.css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- CSS stylesheet for example -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<!-- CSS stylesheet for jcSlider -->
<link rel="stylesheet" href="css/jcslider.css">
<!-- animate CSS stylesheet library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
</head>
<body>
<p>
<a class="back" href="http://joanclaret.github.io/jcSlider/" title="Back to plugin website"><< Back to plugin website</a>
</p>
<main>
<section class="example">
<h2>Example 1:</h2>
<!-- Slider start -->
<ul class="jc-slider">
<li class="jc-animation">
<div class="wrap">
My life fades. The vision dims. All that remains are memories. I remember a time of chaos... ruined dreams... this wasted land. But most of all, I remember The Road Warrior. The man we called "Max." To understand who he was, you have to go back to another time...
</div>
</li>
<li class="jc-animation">
<div class="wrap">
I'm sorry, did I break your concentration? I didn't mean to do that. Please, continue, you were saying something about best intentions. What's the matter? Oh, you were finished! Well, allow me to retort. What does Marsellus Wallace look like?
</div>
</li>
<li class="jc-animation">
<div class="wrap">
Way out west there was this fella... fella I wanna tell ya about. Fella by the name of Jeff Lebowski. At least that was the handle his loving parents gave him, but he never had much use for it himself. Mr. Lebowski, he called himself "The Dude"
</div>
</li>
</ul>
<!-- Slider end -->
<h2>Example 2:</h2>
<!-- Slider start -->
<ul class="jc-slider2">
<li class="jc-animation">
<img src="img/1.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="img/2.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="img/3.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
<h2>Example 3:</h2>
<!-- Slider start -->
<ul class="jc-slider3">
<li class="jc-animation">
<img src="img/4.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="img/5.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="img/6.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
<h2>Example 4:</h2>
<!-- Slider start -->
<ul class="jc-slider4">
<li class="jc-animation">
<img src="img/7.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="img/8.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="img/9.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
</section>
</main>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Slider Javascript file -->
<script src="../jquery.jcslider.js"></script>
<script>
$(document).ready(function() {
$('.jc-slider').jcSlider({
animationIn: 'bounceInRight',
animationOut: 'bounceOutLeft',
stopOnHover: false
});
$('.jc-slider2').jcSlider({
animationIn: 'zoomInUp',
animationOut: 'flipOutX',
stopOnHover: false
});
$('.jc-slider3').jcSlider({
animationIn: 'flipInX',
animationOut: 'shake',
stopOnHover: false
});
$('.jc-slider4').jcSlider({
animationIn: 'zoomIn',
animationOut: 'zoomOut',
stopOnHover: false
});
});
</script>
<a href="https://github.com/joanclaret"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png"></a>
</body>
</html>