Slider (Transdev) DEV 1.0 with touch
HTML
<script src="http://www.stunn.co.uk/stunnplate/lib/touchListener/touchListener.1.0.js"></script>
<div id="aParent">
<div class="flexSlider">
<div class="open">
<div class="close" style="background-image:url('http://lorempixel.com/400/200/')">
</div>
<div class="close" style="background-image:url('http://lorempixel.com/400/300/')">
</div>
<div class="close" style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
</div>
</div>
CSS
/* for demo only > */
html, body {
margin:0;
}
#bigger {
font-size:180%;
}
#aParent {
min-height:300px;
background-color:#666;
position:relative;
}
@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 styles */
.flexSlider {
width: 100%;
min-width:100%;
max-width:100%;
max-height:100%;
overflow:hidden;
position:relative;
z-index:1;
}
.flexSlider.fill {
display:block; top:0; right:0; bottom:0; left:0;
overflow:hidden;
position:absolute;
z-index:1;
height:100%; min-height:100%;
border:0px solid red;
}
.flexSlider.fill .open {
display:block; top:0; right:0; bottom:0; left:0;
position:absolute;
height:100%; min-height:100%;
}
.flexSlider.fill .open .close {
height:100%; min-height:100%;
}
.flexSlider.fill .open .close:first-of-type, .slyduh.fill .open li:last-of-type {
box-shadow:0px 0 14px black;
}
.flexSlider .open {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 10000%;
display:block;
}
.flexSlider .open > li {
display:inline-block;
position:relative;
margin-right:-4px;
width:1%;
font-size: 30px;
text-align: center;
vertical-align:top;
height:100%;
max-height:100%;
background: #666666 repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:black;
text-shadow:0px 0px 10px white;
overflow:hidden;
}
.flexSlider-nextButton, .flexSlider-prevButton {
display:block;
position:absolute;
height:50px;
z-index:100;
top:0;
bottom:0;
margin:auto;
right:-1px;
background:rgba(255, 255, 255, .6);
border-radius:5px 0 0 5px;
width:80px;
...
JavaScript
/*
a background-image slider
*/
(function ($) {
$.fn.flexSlider = function (options) {
// default settings
var settings = $.extend({
fillMode: 'flexfill', //other modes dont work!
transitionSpeed: 750, //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: false,
complete: null //function callback on complete
}, options);
return this.each(function () {
var slider = $(this),
parent = slider.parent(),
cassette = slider.find(".open").first(),
slides = cassette.find(".close"),
count = slides.length,
index = settings.startPosition,
minh = parseInt(parent.css("min-height"));
function setHeight(){
slides.children().each(function(){
var c = $(this).attr("class");
$(this).attr("class",c.replace("slide-","xslide-"));
});
slides.height(slider.height());
slides.children().each(function(){
var c = $(this).attr("class");
$(this).attr("class",c.replace("xslide-","slide-"));
});
}
goToSlide(); //ititial slide
//add dots
var dot = "<a href='#'>•</a>",
dotWrapper = $("<div class='flexSlider-dots' />"),
currentDot = 0;
temp = count;
while(temp--){
dotWrapper.append($(dot));
};
dotWrapper.append(dots);
parent.append(dotWrapper);
//var currentDot = dots.eg(index);
var dots =...