Krijg geen knoppen in de slider
Ik wil de slider gebruiken van deze site: http://slidesjs.com/examples/playing/
Ik heb alles erin, en werkend, alleen krijg ik de extra opties er niet in. De play en pause button en left en right lukken niet. Iemand een idee hiervoor?
Groeten Donny
Met absolute paden; zo kan je het copy/pasten zonder extra bestanden ...
Code (php)
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
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
<!-- CSS for slidesjs.com example -->
<link rel="stylesheet" href="http://slidesjs.com/examples/playing/css/example.css">
<link rel="stylesheet" href="http://slidesjs.com/examples/playing/css/font-awesome.min.css">
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="http://slidesjs.com/examples/playing/js/jquery.slides.min.js"></script>
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
</script>
<div class="container">
<div id="slides">
<img src="http://slidesjs.com/examples/playing/img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
</div>
<link rel="stylesheet" href="http://slidesjs.com/examples/playing/css/example.css">
<link rel="stylesheet" href="http://slidesjs.com/examples/playing/css/font-awesome.min.css">
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="http://slidesjs.com/examples/playing/js/jquery.slides.min.js"></script>
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
</script>
<div class="container">
<div id="slides">
<img src="http://slidesjs.com/examples/playing/img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
<img src="http://slidesjs.com/examples/playing/img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
</div>
Zoals het er uit ziet, worden die knoppen automatisch aangemaakt.
Nog te doen:
- die 1 2 3 4 ... haal je weg met css: list-style. Zie css .slidesjs-pagination
- Die andere knoppen verschijnen bv. in deze vorm:
<a title="Next" href="#" class="slidesjs-next slidesjs-navigation">Next</a>
en ze werken.
Dus, kijk in de broncode naar de css van a.slidesjs-previous, a.slidesjs-next, a.slidesjs-stop
Om die links als knoppen te zien.
Hiermee geholpen?
Gewijzigd op 25/07/2013 10:10:27 door Kris Peeters
Ik heb nog gekeken maar ik kom er niet uit. Als ik ze in de DIV slides zet, word de knop een slider, dat is niet de bedoeling. In de functie van hen hieronder staat precies wat jij zegt, maar moet ik dat niet erin plakken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons.
// You can set to false and use your own buttons.
// User defined buttons must have the following:
// previous button: class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons.
// You can set to false and use your own buttons.
// User defined buttons must have the following:
// previous button: class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
Wat is het probleem? Wat heb je precies wel, en wat ontbreekt er precies?
Ging dit niet over het feit dat je geen knoppen gegenereerd krijgt?
Donny Wie weet op 25/07/2013 13:49:31:
Als ik ze in de DIV slides zet, word de knop een slider
Wie is "ze" en wat bedoel je precies met slider?