Slider (Transdev) DEV 1.3 (+ touch)
Fixes Safari sizing issue Use improved touch Prevented cycle on hover Prevented multiple move events (ie when overclicking next) Renamed animation classnames Added min animation speed when swiping Added <=1 slide behaviour
by moob
HTML
<script src="http://www.stunn.co.uk/stunnplate/lib/touchListener/touchListener.1.0.1.js"></script>
<div id="aParent">
<div class="flexSlider">
<ul>
<li style="background-image:url('http://lorempixel.com/400/200/')">
<h2 class="animate-in-from-left">Slide 1</h2>
<h1 class="animate-in-from-bottom animate-custom-b">lorem</h1>
<h4 class="animate-in-from-right animate-custom-c">and of course...</h4>
<h3 class="animate-in-from-top animate-custom-a">ipsum</h3>
</li>
<li style="background-image:url('http://lorempixel.com/400/300/')">
<h1 class="animate-in-from-top">One helluvalotta text that will force this slide open and make the whole slider equally large</h1><h4 class="animate-in-from-right animate-custom-c">(unless you set a max-height in the css)</h4>
</li>
<li style="background-image:url('http://lorempixel.com/400/400/')"><h2 class="animate-in-from-right">Slide 3</h2><h2 class="animate-in-from-top animate-custom-c">Egestas Mollis Tristique</h2></li>
</ul>
</div>
</div>
<div style="margin:20px">
<h3>Responsive background slider thing</h3>
<p><strong><em>FlexSlider will automatically be initialised on elements with the class of .flexSlider</em></strong> but you can set up a custom version as required. To do so dont use the 'flexSlider' classname and call the plugin on dom ready (passing your required settings):</p>
<code><pre>
$('#myFlexSlider').flexSlider({
loop: true, //loop back to start else stop at end
transitionSpeed : 600, //slide animation speed (milliseconds)
cycle : 6000, //if >0 automatically cycle through slides every x milliseconds (pauses on hover)
complete: function(){alert('Slider is ready!')} //optional callback
});</pre>
</code>
<p><strong>Animated Slide Text</strong><br />
Your text can be animated when the slide comes into view. Style and...CSS
/* for demo only > */
html, body {
margin:0;
}
#aParent {
min-height:200px;
background-color:#666;
position:relative;
}
h1,h2,h3,h4,h5{
margin:.5em;
}
#aParent ul > li{
/* funky text stylng that can be seen on any colour background */
font-family:Georgia, serif;
font-size:200%;
color: #000;
text-shadow:
.2em .2em .5em #000,
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
padding-top:30px;
}
/* example custom animations */
.flexSlider [class*="animate-in-"].animate-custom-a {
-webkit-opacity:0.01;
opacity:0.01;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.flexSlider .current [class*="animate-in-"].animate-custom-a {
-webkit-transition-delay: 1000ms;
transition-delay: 1000ms;
color:#990000;
-webkit-opacity:1;
opacity:1;
}
.flexSlider .current [class*="animate-in-"].animate-custom-b {
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
-webkit-transform:rotate(350deg);
transform:rotate(350deg);
}
.flexSlider [class*="animate-in-"].animate-custom-c {
font-size:0%;
}
.flexSlider .current [class*="animate-in-"].animate-custom-c {
-webkit-transition-delay: 600ms;
transition-delay: 600ms;
color:#333;
font-size:100%;
}
/* example media-query */
@media only screen and (max-width : 400px) {
#aParent {
border:0px solid green;
min-height:0;
height:200px!important;
max-height:200px!important;
}
}
/* < for demo only */
/* flexslider styles */
.flexSlider {
width: 100%;
min-width:100%;
max-width:100%;
max-height:100%;
overflow:hidden;
position:relative;
z-index:1;
-webkit-backface-visibility:hidden;/* for safari */
}
.flexSlider.fill {
display:block; top:0; right:0; bottom:0; left:0;
overflow:hidden;
position:absolute;
z-index:1;
height:100%;...JavaScript
/*
A flexible background-image slider for Transdev
*/
(function ($) {
$.fn.flexSlider = function (options) {
// default settings
var settings = $.extend({
fillMode: 'flexfill', //other modes dont work!
transitionSpeed: 600, //ms (should speed should be uniform like MPH or the time taken to do one transition?)
cycle: 6000, //Should it automatically move to next slide? 0=off, 6000 = every 6 seconds
startPosition: 0, //startingSlide (zero index)
loop: true,//loop back to start else stop at end
complete: null //function callback on complete
}, options);
return this.each(function () {
var slider = $(this),
parent = slider.parent(),
cassette = slider.find("ul").first(),
slides = cassette.find("li"),
count = slides.length,
index = settings.startPosition,
minh = parseInt(parent.css("min-height")),
frozen=false;
//slider must have .flexSlider class for the associated CSS to work
slider.addClass('flexSlider');
function setHeight(){
slides.children().each(function(){
var c = $(this).attr("class");
//remove any animation offsets
//$(this).attr("class",c.replace("animate-","xanimate-"));
$(this).attr("class",c.replace(/animate-/g,"xanimate-"));
});
var slh = slider.height();
var mh = parent.height();
//console.log("mh="+mh);
if(slh>mh){mh=slh;}
slides.height(mh);
slides.children().each(function(){
var c = $(this).attr("class");
//reapply any animation offsets
...