Danke für Deine Antwort. Das Ding nennt sich Master Slider und anbei ist die Installations Anleitung:
Step 1: Link required files
At first you need to insert required files into your page. Go to "quick-start" folder in downloaded package and upload "masterslider" folder to your server then add required files into your page like following (usually in <head> section):
?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="masterslider/style/masterslider.css" />
<!-- MasterSlider default skin -->
<link rel="stylesheet" href="masterslider/skins/default/style.css" />
<!-- Latest version of jQuery from Google CDN -->
<!-- You can remove it if jQuery is already included. -->
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- MasterSlider main JS file -->
<script src="masterslider/masterslider.min.js"></script>
Step 2: Slider HTML
Insert following HTML to the <body> section. This HTML defines your slider content. The "ms-skin-default" CSS class name means that the slider uses default skin, you need to change it if you've included a different skin CSS file in Step 1.
?
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
48
49
50
51
52
53
<!-- masterslider -->
<div class="master-slider ms-skin-default" id="masterslider">
<!-- new slide -->
<div class="ms-slide">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="masterslider/images/1.jpg" alt="lorem ipsum dolor sit"/>
<!-- slide text layer -->
<div class="ms-layer ms-caption" style="top:10px; left:30px;">
Lorem ipsum dolor sit amet
</div>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="masterslider/images/2.jpg" alt="lorem ipsum dolor sit"/>
<!-- slide text layer -->
<div class="ms-layer ms-caption" style="top:10px; left:30px;">
Lorem ipsum dolor sit amet
</div>
<!-- linked slide -->
<a href="
http://codecanyon.net/user/averta">Averta</a>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="masterslider/images/3.jpg" alt="lorem ipsum dolor sit"/>
<!-- slide text layer -->
<div class="ms-layer ms-caption" style="top:10px; left:30px;">
Lorem ipsum dolor sit amet
</div>
<!-- youtube video -->
<a href="
http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&wmode=opaque&controls=1&showinfo=0" data-type="video">Youtube video</a>
</div>
<!-- end of slide -->
</div>
<!-- end of masterslider -->
Step 3: Initialize
Insert the following JavaScript after slider HTML (usually after <body> section).
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:800, // slider standard width
height:350, // slider standard height
space:5
// more slider options goes here...
// check slider options section in documentation for more options.
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
</script>
