-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo1.html
47 lines (46 loc) · 3.09 KB
/
demo1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 - Menucool Image Slider</title>
<link href="./css/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="./js/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1"><h2>Demo 1 - Menucool Image Slider</h2>
<p>Demos: <a href="demo1.html" class="current">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">
<img src="images/hp-banner-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="./gfx/hp-banner-2.jpg" alt="" />
<img src="./gfx/hp-banner-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="./gfx/hp-banner-4.jpg" alt="#htmlcaption" />
<img src="./gfx/hp-banner-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
</div>
</div>
<div class="div2">
<ul>
<li><b>Copy & Paste</b>: Copy source code and paste it into your own page. All source codes/files are within the <i>demo1.html</i> and the "<i>\themes\1\</i>" folder</li>
<li><b>Transitional effects</b>: You can choose from 17 transitional effects via the <i>sliderOptions</i> in the <em>js-image-slider.js</em>.
Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo1" target="_blank">Image Slider Demo 1</a> to see how each effect looks and how to customize</li>
<li><b>Navigation Bullets</b>: Navigation bullets are created automatically by the script of the image slider.
<p>The CSS class selector <span class="green">.navBulletsWrapper</span> can be used to change the nav bullets' positon and style.</p>
<p>If you don't need the Navigation Bullets, just hide them via CSS:<br /><span class="green cn">div.navBulletsWrapper {display:none;}</span></p>
</li>
<li><b>HTML Caption</b>: Captions are set through each slide image's <span class="cn">alt</span> attribute. If the caption contains HTML content,
you can put the content inside a DIV or SPAN element(usually styled as <span class="cn">display:none</span>), give the element an ID,
and set the <span class="cn">alt</span> as "#(the content container's id)". For example: <span class="cn">alt="#caption4"</span></li>
<li>The image slider shown in this demo is for free.</li>
<li>For detailed instructions, please visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo1">Demo 1</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a></li>
</ul>
</div>
</body>
</html>