Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

98 lines (79 sloc) 2.88 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider Expanding Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<script>
$(function () {
$('#slider1').anythingSlider({
// theme : 'metallic',
expand : true,
autoPlay : true
});
$('#slider2').anythingSlider({
expand : true,
showMultiple : 2,
changeBy : 2
});
});
</script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body id="expand">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a class="current" href="expand.html">Expand Demo</a>
<a href="video.html">Video Demo</a>
<a href="demos.html">FX Demos</a>
<a href="css3.html">CSS3 Demo</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<!-- End Links -->
<h1>Expanding Slider Demo*</h1>
<h3>* Resize the browser window</h3>
<br>
<h2>Full page width</h2>
<!-- Expanding AnythingSlider 100% width -->
<div id="wrapper1">
<ul id="slider1">
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul>
</div>
<!-- END AnythingSlider -->
<br><br><br><br>
<h2>Half page width with two images showing</h2>
<!-- Expanding AnythingSlider 50% width -->
<div id="wrapper2">
<ul id="slider2">
<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
</ul>
</div>
<!-- END AnythingSlider -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.