<!-- FlexSlider pieces -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!-- main styles -->
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<!-- Hook up the FlexSlider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<section id="wrapper">
<div id="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/P1010276.JPG" />
<p class="flex-caption">© 2014 Court Laszlo Wright // <i>Rushcutters Bay</i></p>
</li>
<li>
<img src="https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/P1010360.JPG" />
<p class="flex-caption">© 2014 Court Laszlo Wright // <i>Some bridge somewhere</i></p>
</li>
<li>
<img src="https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/P1010371.JPG" />
<p class="flex-caption">© 2014 Court Laszlo Wright // <i>Rushcutters grain</i></p>
</li>
</ul>
</div>
</section><!-- END wrapper -->
</body>
</html>/*
* jQuery FlexSlider v1.8
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: 4px solid #fff;position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
/* reset */
* {
margin: 0;
padding: 0;
}
ol, ul {
list-style: none;
}
a img{
border: none;
}
a { text-decoration: none; }
.clearfix {
display: block;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* end reset */
#wrapper { width: 80%; max-width:800px; margin: 0 auto;}
/* main styles */
body {
background: url('https://mail.mannatech.com.au/court-do-not-delete/clwp/responsive-image-slider/images/bg.png') repeat left top;
font-family: 'Georgia', 'Arial', sans-serif;
}
h2 {
font-family: 'Lobster', cursive;
font-size: 2.3em;
margin: 50px 0;
color: #d1c8ba;
text-shadow: #fff 1px 1px;
}
/*
* jQuery FlexSlider v1.8
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*
* Contrib: Darin Richardson
*/
;(function ($) {
//FlexSlider: Object Instance
$.flexslider = function(el, options) {
var slider = el;
slider.init = function() {
slider.vars = $.extend({}, $.flexslider.defaults, options);
slider.data('flexslider', true);
slider.container = $('.slides', slider);
slider.slides = $('.slides > li', slider);
slider.count = slider.slides.length;
slider.animating = false;
slider.currentSlide = slider.vars.slideToStart;
slider.animatingTo = slider.currentSlide;
slider.atEnd = (slider.currentSlide == 0) ? true : false;
slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
slider.cloneCount = 0;
slider.cloneOffset = 0;
slider.manualPause = false;
slider.vertical = (slider.vars.slideDirection == "vertical");
slider.prop = (slider.vertical) ? "top" : "marginLeft";
slider.args = {};
//Test for webbkit CSS3 Animations
slider.transitions = "webkitTransition" in document.body.style;
if (slider.transitions) slider.prop = "-webkit-transform";
//Test for controlsContainer
if (slider.vars.controlsContainer != "") {
slider.controlsContainer = $(slider.vars.controlsContainer).eq($('.slides').index(slider.container));
slider.containerExists = slider.controlsContainer.length > 0;
}
//Test for manualControls
if (slider.vars.manualControls != "") {
slider.manualControls = $(slider.vars.manualControls, ((slider.containerExists) ? slider.controlsContainer : slider));
slider.manualExists = slider.manualControls.length > 0;
}
///////////////////////////////////////////////////////////////////
// FlexSlider: Randomize Slides
if (slider.vars.randomize) {
slider.slides.sort(function() { return (Math.round(Math.random())-0.5); });
slider.container.empty().append(slider.slides);
}
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// FlexSlider: Slider Animation Initialize
if (slider.vars.animation.toLowerCase() == "slide") {
if (slider.transitions) {
slider.setTransition(0);
}
slider.css({"overflow": "hidden"});
if (slider.vars.animationLoop) {
slider.cloneCount = 2;
slider.cloneOffset = 1;
slider.container.append(slider.slides.filter(':first').clone().addClass('clone')).prepend(slider.slides.filter(':last').clone().addClass('clone'));
}
//create newSlides to capture possible clones
slider.newSlides = $('.slides > li', slider);
var sliderOffset = (-1 * (slider.currentSlide + slider.cloneOffset));
if (slider.vertical) {
slider.newSlides.css({"display": "block", "width": "100%", "float": "left"});
slider.container.height((slider.count + slider.cloneCount) * 200 + "%").css("position", "absolute").width("100%");
//Timeout function to give browser enough time to get proper height initially
setTimeout(function() {
slider.css({"position": "relative"}).height(slider.slides.filter(':first').height());
slider.args[slider.prop] = (slider.transitions) ? "translate3d(0," + sliderOffset * slider.height() + "px,0)" : sliderOffset * slider.height() + "px";
slider.container.css(slider.args);
}, 100);
} else {
slider.args[slider.prop] = (slider.transitions) ? "translate3d(" + sliderOffset * slider.width() + "px,0,0)" : sliderOffset * slider.width() + "px";
slider.container.width((slider.count + slider.cloneCount) * 200 + "%").css(slider.args);
//Timeout function to give browser enough time to get proper width initially
setTimeout(function() {
slider.newSlides.width(slider.width()).css({"float": "left", "display": "block"});
}, 100);
}
} else { //Default to fade
//Not supporting fade CSS3 transitions right now
slider.transitions = false;
slider.slides.css({"width": "100%", "float": "left", "marginRight": "-100%"}).eq(slider.currentSlide).fadeIn(slider.vars.animationDuration);
}
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// FlexSlider: Control Nav
if (slider.vars.controlNav) {
if (slider.manualExists) {
slider.controlNav = slider.manualControls;
} else {
var controlNavScaffold = $('<ol class="flex-control-nav"></ol>');
var j = 1;
for (var i = 0; i < slider.count; i++) {
controlNavScaffold.append('<li><a>' + j + '</a></li>');
j++;
}
if (slider.containerExists) {
$(slider.controlsContainer).append(controlNavScaffold);
slider.controlNav = $('.flex-control-nav li a', slider.controlsContainer);
} else {
slider.append(controlNavScaffold);
slider.controlNav = $('.flex-control-nav li a', slider);
}
}
slider.controlNav.eq(slider.currentSlide).addClass('active');
slider.controlNav.bind(slider.eventType, function(event) {
event.preventDefault();
if (!$(this).hasClass('active')) {
(slider.controlNav.index($(this)) > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
slider.flexAnimate(slider.controlNav.index($(this)), slider.vars.pauseOnAction);
}
});
}
///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Direction Nav
if (slider.vars.directionNav) {
var directionNavScaffold = $('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + slider.vars.prevText + '</a></li><li><a class="next" href="#">' + slider.vars.nextText + '</a></li></ul>');
if (slider.containerExists) {
$(slider.controlsContainer).append(directionNavScaffold);
slider.directionNav = $('.flex-direction-nav li a', slider.controlsContainer);
} else {
slider.append(directionNavScaffold);
slider.directionNav = $('.flex-direction-nav li a', slider);
}
//Set initial disable styles if necessary
if (!slider.vars.animationLoop) {
if (slider.currentSlide == 0) {
slider.directionNav.filter('.prev').addClass('disabled');
} else if (slider.currentSlide == slider.count - 1) {
slider.directionNav.filter('.next').addClass('disabled');
}
}
slider.directionNav.bind(slider.eventType, function(event) {
event.preventDefault();
var target = ($(this).hasClass('next')) ? slider.getTarget('next') : slider.getTarget('prev');
if (slider.canAdvance(target)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Keyboard Nav
if (slider.vars.keyboardNav && $('ul.slides').length == 1) {
function keyboardMove(event) {
if (slider.animating) {
return;
} else if (event.keyCode != 39 && event.keyCode != 37){
return;
} else {
if (event.keyCode == 39) {
var target = slider.getTarget('next');
} else if (event.keyCode == 37){
var target = slider.getTarget('prev');
}
if (slider.canAdvance(target)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
}
}
$(document).bind('keyup', keyboardMove);
}
//////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// FlexSlider: Mousewheel interaction
if (slider.vars.mousewheel) {
slider.mousewheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
slider.bind(slider.mousewheelEvent, function(e) {
e.preventDefault();
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40,
target = (wheelData < 0) ? slider.getTarget('next') : slider.getTarget('prev');
if (slider.canAdvance(target)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
}
///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Slideshow Setup
if (slider.vars.slideshow) {
//pauseOnHover
if (slider.vars.pauseOnHover && slider.vars.slideshow) {
slider.hover(function() {
slider.pause();
}, function() {
if (!slider.manualPause) {
slider.resume();
}
});
}
//Initialize animation
slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Pause/Play
if (slider.vars.pausePlay) {
var pausePlayScaffold = $('<div class="flex-pauseplay"><span></span></div>');
if (slider.containerExists) {
slider.controlsContainer.append(pausePlayScaffold);
slider.pausePlay = $('.flex-pauseplay span', slider.controlsContainer);
} else {
slider.append(pausePlayScaffold);
slider.pausePlay = $('.flex-pauseplay span', slider);
}
var pausePlayState = (slider.vars.slideshow) ? 'pause' : 'play';
slider.pausePlay.addClass(pausePlayState).text((pausePlayState == 'pause') ? slider.vars.pauseText : slider.vars.playText);
slider.pausePlay.bind(slider.eventType, function(event) {
event.preventDefault();
if ($(this).hasClass('pause')) {
slider.pause();
slider.manualPause = true;
} else {
slider.resume();
slider.manualPause = false;
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider:Touch Swip Gestures
//Some brilliant concepts adapted from the following sources
//Source: TouchSwipe - https://www.netcu.de/jquery-touchwipe-iphone-ipad-library
//Source: SwipeJS - http://swipejs.com
if ('ontouchstart' in document.documentElement) {
//For brevity, variables are named for x-axis scrolling
//The variables are then swapped if vertical sliding is applied
//This reduces redundant code...I think :)
//If debugging, recognize variables are named for horizontal scrolling
var startX,
startY,
offset,
cwidth,
dx,
startT,
scrolling = false;
slider.each(function() {
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
function onTouchStart(e) {
if (slider.animating) {
e.preventDefault();
} else if (e.touches.length == 1) {
slider.pause();
cwidth = (slider.vertical) ? slider.height() : slider.width();
startT = Number(new Date());
offset = (slider.vertical) ? (slider.currentSlide + slider.cloneOffset) * slider.height() : (slider.currentSlide + slider.cloneOffset) * slider.width();
startX = (slider.vertical) ? e.touches[0].pageY : e.touches[0].pageX;
startY = (slider.vertical) ? e.touches[0].pageX : e.touches[0].pageY;
slider.setTransition(0);
this.addEventListener('touchmove', onTouchMove, false);
this.addEventListener('touchend', onTouchEnd, false);
}
}
function onTouchMove(e) {
dx = (slider.vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX;
scrolling = (slider.vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY));
if (!scrolling) {
e.preventDefault();
if (slider.vars.animation == "slide" && slider.transitions) {
if (!slider.vars.animationLoop) {
dx = dx/((slider.currentSlide == 0 && dx < 0 || slider.currentSlide == slider.count - 1 && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
}
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + (-offset - dx) + "px,0)": "translate3d(" + (-offset - dx) + "px,0,0)";
slider.container.css(slider.args);
}
}
}
function onTouchEnd(e) {
slider.animating = false;
if (slider.animatingTo == slider.currentSlide && !scrolling && !(dx == null)) {
var target = (dx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
if (slider.canAdvance(target) && Number(new Date()) - startT < 550 && Math.abs(dx) > 20 || Math.abs(dx) > cwidth/2) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
} else {
slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction);
}
}
//Finish the touch by undoing the touch session
this.removeEventListener('touchmove', onTouchMove, false);
this.removeEventListener('touchend', onTouchEnd, false);
startX = null;
startY = null;
dx = null;
offset = null;
}
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Resize Functions (If necessary)
if (slider.vars.animation.toLowerCase() == "slide") {
$(window).resize(function(){
if (!slider.animating) {
if (slider.vertical) {
slider.height(slider.slides.filter(':first').height());
slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.slides.filter(':first').height() + "px";
if (slider.transitions) {
slider.setTransition(0);
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
}
slider.container.css(slider.args);
} else {
slider.newSlides.width(slider.width());
slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.width() + "px";
if (slider.transitions) {
slider.setTransition(0);
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
}
slider.container.css(slider.args);
}
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FlexSlider: Destroy the slider entity
//Destory is not included in the minified version right now, but this is a working function for anyone who wants to include it.
//Simply bind the actions you need from this function into a function in the start() callback to the event of your chosing
/*
slider.destroy = function() {
slider.pause();
if (slider.controlNav && slider.vars.manualControls == "") slider.controlNav.closest('.flex-control-nav').remove();
if (slider.directionNav) slider.directionNav.closest('.flex-direction-nav').remove();
if (slider.vars.pausePlay) slider.pausePlay.closest('.flex-pauseplay').remove();
if (slider.vars.keyboardNav && $('ul.slides').length == 1) $(document).unbind('keyup', keyboardMove);
if (slider.vars.mousewheel) slider.unbind(slider.mousewheelEvent);
if (slider.transitions) slider.each(function(){this.removeEventListener('touchstart', onTouchStart, false);});
if (slider.vars.animation == "slide" && slider.vars.animationLoop) slider.newSlides.filter('.clone').remove();
if (slider.vertical) slider.height("auto");
slider.slides.hide();
slider.removeData('flexslider');
}
*/
//////////////////////////////////////////////////////////////////
//FlexSlider: start() Callback
slider.vars.start(slider);
}
//FlexSlider: Animation Actions
slider.flexAnimate = function(target, pause) {
if (!slider.animating) {
//Animating flag
slider.animating = true;
//FlexSlider: before() animation Callback
slider.animatingTo = target;
slider.vars.before(slider);
//Optional paramter to pause slider when making an anmiation call
if (pause) {
slider.pause();
}
//Update controlNav
if (slider.vars.controlNav) {
slider.controlNav.removeClass('active').eq(target).addClass('active');
}
//Is the slider at either end
slider.atEnd = (target == 0 || target == slider.count - 1) ? true : false;
if (!slider.vars.animationLoop && slider.vars.directionNav) {
if (target == 0) {
slider.directionNav.removeClass('disabled').filter('.prev').addClass('disabled');
} else if (target == slider.count - 1) {
slider.directionNav.removeClass('disabled').filter('.next').addClass('disabled');
} else {
slider.directionNav.removeClass('disabled');
}
}
if (!slider.vars.animationLoop && target == slider.count - 1) {
slider.pause();
//FlexSlider: end() of cycle Callback
slider.vars.end(slider);
}
if (slider.vars.animation.toLowerCase() == "slide") {
var dimension = (slider.vertical) ? slider.slides.filter(':first').height() : slider.slides.filter(':first').width();
if (slider.currentSlide == 0 && target == slider.count - 1 && slider.vars.animationLoop && slider.direction != "next") {
slider.slideString = "0px";
} else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.vars.animationLoop && slider.direction != "prev") {
slider.slideString = (-1 * (slider.count + 1)) * dimension + "px";
} else {
slider.slideString = (-1 * (target + slider.cloneOffset)) * dimension + "px";
}
slider.args[slider.prop] = slider.slideString;
if (slider.transitions) {
slider.setTransition(slider.vars.animationDuration);
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.slideString + ",0)" : "translate3d(" + slider.slideString + ",0,0)";
slider.container.css(slider.args).one("webkitTransitionEnd transitionend", function(){
slider.wrapup(dimension);
});
} else {
slider.container.animate(slider.args, slider.vars.animationDuration, function(){
slider.wrapup(dimension);
});
}
} else { //Default to Fade
slider.slides.eq(slider.currentSlide).fadeOut(slider.vars.animationDuration);
slider.slides.eq(target).fadeIn(slider.vars.animationDuration, function() {
slider.wrapup();
});
}
}
}
//FlexSlider: Function to minify redundant animation actions
slider.wrapup = function(dimension) {
if (slider.vars.animation == "slide") {
//Jump the slider if necessary
if (slider.currentSlide == 0 && slider.animatingTo == slider.count - 1 && slider.vars.animationLoop) {
slider.args[slider.prop] = (-1 * slider.count) * dimension + "px";
if (slider.transitions) {
slider.setTransition(0);
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
}
slider.container.css(slider.args);
} else if (slider.currentSlide == slider.count - 1 && slider.animatingTo == 0 && slider.vars.animationLoop) {
slider.args[slider.prop] = -1 * dimension + "px";
if (slider.transitions) {
slider.setTransition(0);
slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
}
slider.container.css(slider.args);
}
}
slider.animating = false;
slider.currentSlide = slider.animatingTo;
//FlexSlider: after() animation Callback
slider.vars.after(slider);
}
//FlexSlider: Automatic Slideshow
slider.animateSlides = function() {
if (!slider.animating) {
slider.flexAnimate(slider.getTarget("next"));
}
}
//FlexSlider: Automatic Slideshow Pause
slider.pause = function() {
clearInterval(slider.animatedSlides);
if (slider.vars.pausePlay) {
slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
}
}
//FlexSlider: Automatic Slideshow Start/Resume
slider.resume = function() {
slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
if (slider.vars.pausePlay) {
slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
}
}
//FlexSlider: Helper function for non-looping sliders
slider.canAdvance = function(target) {
if (!slider.vars.animationLoop && slider.atEnd) {
if (slider.currentSlide == 0 && target == slider.count - 1 && slider.direction != "next") {
return false;
} else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.direction == "next") {
return false;
} else {
return true;
}
} else {
return true;
}
}
//FlexSlider: Helper function to determine animation target
slider.getTarget = function(dir) {
slider.direction = dir;
if (dir == "next") {
return (slider.currentSlide == slider.count - 1) ? 0 : slider.currentSlide + 1;
} else {
return (slider.currentSlide == 0) ? slider.count - 1 : slider.currentSlide - 1;
}
}
//FlexSlider: Helper function to set CSS3 transitions
slider.setTransition = function(dur) {
slider.container.css({'-webkit-transition-duration': (dur/1000) + "s"});
}
//FlexSlider: Initialize
slider.init();
}
//FlexSlider: Default Settings
$.flexslider.defaults = {
animation: "fade", //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
}
//FlexSlider: Plugin Function
$.fn.flexslider = function(options) {
return this.each(function() {
if ($(this).find('.slides li').length == 1) {
$(this).find('.slides li').fadeIn(400);
}
else if ($(this).data('flexslider') != true) {
new $.flexslider($(this), options);
}
});
}
})(jQuery);
/*
* jQuery FlexSlider v1.8
* http://flex.madebymufffin.com
* Copyright 2011, Tyler Smith
*/
(function(a){a.flexslider=function(c,b){var d=c;d.init=function(){d.vars=a.extend({},a.flexslider.defaults,b);d.data("flexslider",true);d.container=a(".slides",d);d.slides=a(".slides > li",d);d.count=d.slides.length;d.animating=false;d.currentSlide=d.vars.slideToStart;d.animatingTo=d.currentSlide;d.atEnd=(d.currentSlide==0)?true:false;d.eventType=("ontouchstart" in document.documentElement)?"touchstart":"click";d.cloneCount=0;d.cloneOffset=0;d.manualPause=false;d.vertical=(d.vars.slideDirection=="vertical");d.prop=(d.vertical)?"top":"marginLeft";d.args={};d.transitions="webkitTransition" in document.body.style;if(d.transitions){d.prop="-webkit-transform"}if(d.vars.controlsContainer!=""){d.controlsContainer=a(d.vars.controlsContainer).eq(a(".slides").index(d.container));d.containerExists=d.controlsContainer.length>0}if(d.vars.manualControls!=""){d.manualControls=a(d.vars.manualControls,((d.containerExists)?d.controlsContainer:d));d.manualExists=d.manualControls.length>0}if(d.vars.randomize){d.slides.sort(function(){return(Math.round(Math.random())-0.5)});d.container.empty().append(d.slides)}if(d.vars.animation.toLowerCase()=="slide"){if(d.transitions){d.setTransition(0)}d.css({overflow:"hidden"});if(d.vars.animationLoop){d.cloneCount=2;d.cloneOffset=1;d.container.append(d.slides.filter(":first").clone().addClass("clone")).prepend(d.slides.filter(":last").clone().addClass("clone"))}d.newSlides=a(".slides > li",d);var m=(-1*(d.currentSlide+d.cloneOffset));if(d.vertical){d.newSlides.css({display:"block",width:"100%","float":"left"});d.container.height((d.count+d.cloneCount)*200+"%").css("position","absolute").width("100%");setTimeout(function(){d.css({position:"relative"}).height(d.slides.filter(":first").height());d.args[d.prop]=(d.transitions)?"translate3d(0,"+m*d.height()+"px,0)":m*d.height()+"px";d.container.css(d.args)},100)}else{d.args[d.prop]=(d.transitions)?"translate3d("+m*d.width()+"px,0,0)":m*d.width()+"px";d.container.width((d.count+d.cloneCount)*200+"%").css(d.args);setTimeout(function(){d.newSlides.width(d.width()).css({"float":"left",display:"block"})},100)}}else{d.transitions=false;d.slides.css({width:"100%","float":"left",marginRight:"-100%"}).eq(d.currentSlide).fadeIn(d.vars.animationDuration)}if(d.vars.controlNav){if(d.manualExists){d.controlNav=d.manualControls}else{var e=a('<ol class="flex-control-nav"></ol>');var s=1;for(var t=0;t<d.count;t++){e.append("<li><a>"+s+"</a></li>");s++}if(d.containerExists){a(d.controlsContainer).append(e);d.controlNav=a(".flex-control-nav li a",d.controlsContainer)}else{d.append(e);d.controlNav=a(".flex-control-nav li a",d)}}d.controlNav.eq(d.currentSlide).addClass("active");d.controlNav.bind(d.eventType,function(i){i.preventDefault();if(!a(this).hasClass("active")){(d.controlNav.index(a(this))>d.currentSlide)?d.direction="next":d.direction="prev";d.flexAnimate(d.controlNav.index(a(this)),d.vars.pauseOnAction)}})}if(d.vars.directionNav){var v=a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+d.vars.prevText+'</a></li><li><a class="next" href="#">'+d.vars.nextText+"</a></li></ul>");if(d.containerExists){a(d.controlsContainer).append(v);d.directionNav=a(".flex-direction-nav li a",d.controlsContainer)}else{d.append(v);d.directionNav=a(".flex-direction-nav li a",d)}if(!d.vars.animationLoop){if(d.currentSlide==0){d.directionNav.filter(".prev").addClass("disabled")}else{if(d.currentSlide==d.count-1){d.directionNav.filter(".next").addClass("disabled")}}}d.directionNav.bind(d.eventType,function(i){i.preventDefault();var j=(a(this).hasClass("next"))?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.keyboardNav&&a("ul.slides").length==1){function h(i){if(d.animating){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=d.getTarget("next")}else{if(i.keyCode==37){var j=d.getTarget("prev")}}if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}}}}a(document).bind("keyup",h)}if(d.vars.mousewheel){d.mousewheelEvent=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel";d.bind(d.mousewheelEvent,function(y){y.preventDefault();y=y?y:window.event;var i=y.detail?y.detail*-1:y.wheelDelta/40,j=(i<0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.slideshow){if(d.vars.pauseOnHover&&d.vars.slideshow){d.hover(function(){d.pause()},function(){if(!d.manualPause){d.resume()}})}d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed)}if(d.vars.pausePlay){var q=a('<div class="flex-pauseplay"><span></span></div>');if(d.containerExists){d.controlsContainer.append(q);d.pausePlay=a(".flex-pauseplay span",d.controlsContainer)}else{d.append(q);d.pausePlay=a(".flex-pauseplay span",d)}var n=(d.vars.slideshow)?"pause":"play";d.pausePlay.addClass(n).text((n=="pause")?d.vars.pauseText:d.vars.playText);d.pausePlay.bind(d.eventType,function(i){i.preventDefault();if(a(this).hasClass("pause")){d.pause();d.manualPause=true}else{d.resume();d.manualPause=false}})}if("ontouchstart" in document.documentElement){var w,u,l,r,o,x,p=false;d.each(function(){if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",g,false)}});function g(i){if(d.animating){i.preventDefault()}else{if(i.touches.length==1){d.pause();r=(d.vertical)?d.height():d.width();x=Number(new Date());l=(d.vertical)?(d.currentSlide+d.cloneOffset)*d.height():(d.currentSlide+d.cloneOffset)*d.width();w=(d.vertical)?i.touches[0].pageY:i.touches[0].pageX;u=(d.vertical)?i.touches[0].pageX:i.touches[0].pageY;d.setTransition(0);this.addEventListener("touchmove",k,false);this.addEventListener("touchend",f,false)}}}function k(i){o=(d.vertical)?w-i.touches[0].pageY:w-i.touches[0].pageX;p=(d.vertical)?(Math.abs(o)<Math.abs(i.touches[0].pageX-u)):(Math.abs(o)<Math.abs(i.touches[0].pageY-u));if(!p){i.preventDefault();if(d.vars.animation=="slide"&&d.transitions){if(!d.vars.animationLoop){o=o/((d.currentSlide==0&&o<0||d.currentSlide==d.count-1&&o>0)?(Math.abs(o)/r+2):1)}d.args[d.prop]=(d.vertical)?"translate3d(0,"+(-l-o)+"px,0)":"translate3d("+(-l-o)+"px,0,0)";d.container.css(d.args)}}}function f(j){d.animating=false;if(d.animatingTo==d.currentSlide&&!p&&!(o==null)){var i=(o>0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(i)&&Number(new Date())-x<550&&Math.abs(o)>20||Math.abs(o)>r/2){d.flexAnimate(i,d.vars.pauseOnAction)}else{d.flexAnimate(d.currentSlide,d.vars.pauseOnAction)}}this.removeEventListener("touchmove",k,false);this.removeEventListener("touchend",f,false);w=null;u=null;o=null;l=null}}if(d.vars.animation.toLowerCase()=="slide"){a(window).resize(function(){if(!d.animating){if(d.vertical){d.height(d.slides.filter(":first").height());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.slides.filter(":first").height()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{d.newSlides.width(d.width());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.width()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}})}d.vars.start(d)};d.flexAnimate=function(g,f){if(!d.animating){d.animating=true;d.animatingTo=g;d.vars.before(d);if(f){d.pause()}if(d.vars.controlNav){d.controlNav.removeClass("active").eq(g).addClass("active")}d.atEnd=(g==0||g==d.count-1)?true:false;if(!d.vars.animationLoop&&d.vars.directionNav){if(g==0){d.directionNav.removeClass("disabled").filter(".prev").addClass("disabled")}else{if(g==d.count-1){d.directionNav.removeClass("disabled").filter(".next").addClass("disabled")}else{d.directionNav.removeClass("disabled")}}}if(!d.vars.animationLoop&&g==d.count-1){d.pause();d.vars.end(d)}if(d.vars.animation.toLowerCase()=="slide"){var e=(d.vertical)?d.slides.filter(":first").height():d.slides.filter(":first").width();if(d.currentSlide==0&&g==d.count-1&&d.vars.animationLoop&&d.direction!="next"){d.slideString="0px"}else{if(d.currentSlide==d.count-1&&g==0&&d.vars.animationLoop&&d.direction!="prev"){d.slideString=(-1*(d.count+1))*e+"px"}else{d.slideString=(-1*(g+d.cloneOffset))*e+"px"}}d.args[d.prop]=d.slideString;if(d.transitions){d.setTransition(d.vars.animationDuration);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.slideString+",0)":"translate3d("+d.slideString+",0,0)";d.container.css(d.args).one("webkitTransitionEnd transitionend",function(){d.wrapup(e)})}else{d.container.animate(d.args,d.vars.animationDuration,function(){d.wrapup(e)})}}else{d.slides.eq(d.currentSlide).fadeOut(d.vars.animationDuration);d.slides.eq(g).fadeIn(d.vars.animationDuration,function(){d.wrapup()})}}};d.wrapup=function(e){if(d.vars.animation=="slide"){if(d.currentSlide==0&&d.animatingTo==d.count-1&&d.vars.animationLoop){d.args[d.prop]=(-1*d.count)*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{if(d.currentSlide==d.count-1&&d.animatingTo==0&&d.vars.animationLoop){d.args[d.prop]=-1*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}}d.animating=false;d.currentSlide=d.animatingTo;d.vars.after(d)};d.animateSlides=function(){if(!d.animating){d.flexAnimate(d.getTarget("next"))}};d.pause=function(){clearInterval(d.animatedSlides);if(d.vars.pausePlay){d.pausePlay.removeClass("pause").addClass("play").text(d.vars.playText)}};d.resume=function(){d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed);if(d.vars.pausePlay){d.pausePlay.removeClass("play").addClass("pause").text(d.vars.pauseText)}};d.canAdvance=function(e){if(!d.vars.animationLoop&&d.atEnd){if(d.currentSlide==0&&e==d.count-1&&d.direction!="next"){return false}else{if(d.currentSlide==d.count-1&&e==0&&d.direction=="next"){return false}else{return true}}}else{return true}};d.getTarget=function(e){d.direction=e;if(e=="next"){return(d.currentSlide==d.count-1)?0:d.currentSlide+1}else{return(d.currentSlide==0)?d.count-1:d.currentSlide-1}};d.setTransition=function(e){d.container.css({"-webkit-transition-duration":(e/1000)+"s"})};d.init()};a.flexslider.defaults={animation:"fade",slideDirection:"horizontal",slideshow:true,slideshowSpeed:7000,animationDuration:600,directionNav:true,controlNav:true,keyboardNav:true,mousewheel:false,prevText:"Previous",nextText:"Next",pausePlay:false,pauseText:"Pause",playText:"Play",randomize:false,slideToStart:0,animationLoop:true,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:"",start:function(){},before:function(){},after:function(){},end:function(){}};a.fn.flexslider=function(b){return this.each(function(){if(a(this).find(".slides li").length==1){a(this).find(".slides li").fadeIn(400)}else{if(a(this).data("flexslider")!=true){new a.flexslider(a(this),b)}}})}})(jQuery);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.