ABANGJEFF.ONLINE | TUTORIAL | Pada kesempatan kali ini kita membahas tentang cara membuat slideshow untuk sebuah situs website kita sendiri, dengan menggunakan HTML, CSS dan Javascropt.
Salah satu elemen yang paling banyak digunakan di situs web produk adalah Penggeser, lebih dikenal sebagai Tayangan Slide, yang, seperti yang mungkin sudah Anda ketahui, merupakan wadah gambar yang sering berubah 1 per 1.
Hari ini kita akan belajar bagaimana membuat slideshow dan menerapkannya di website kita, kita akan melakukan ini dengan HTML, CSS dan sedikit Javascript.
Demo Slideshow yang kita ambil dari Falcon : http://falconmasters.com/demos/slideshow/
Yuk kita langsung ke bagian topik awal di atas dengan struktur Slideshow dari kami :
<div class="main"><div class="slides"><img src="http://lorempixel.com/1600/900/city/1" alt=""><img src="http://lorempixel.com/1600/900/city/2" alt=""><img src="http://lorempixel.com/1600/900/city/3" alt=""></div></div>
Kode CSS:
* {
margin:0;
padding:0;
}
body {
background:#f2f2f2;
}
.main {
width:90%;
max-width:1000px;
margin:20px auto;
}
.slides {
width:100%;
}
.slides img {
width:100%;
}
.slidesjs-pagination {
background:#424242;
list-style:none;
overflow:hidden;
}
.slidesjs-pagination li {
float:left;
}
.slidesjs-pagination li a {
display:block;
padding:10px 20px;
color:#fff;
text-decoration:none;
}
.slidesjs-pagination li a:hover {
background:#000;
}
.slides .active {
background:#000;
}
.slidesjs-navigation{
background:#000;
color:#fff;
text-decoration:none;
display:inline-block;
padding:13.5px 20px;
float:right;
}
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
54
55
56
* {
margin:0;
padding:0;
}
body {
background:#f2f2f2;
}
.main {
width:90%;
max-width:1000px;
margin:20px auto;
}
.slides {
width:100%;
}
.slides img {
width:100%;
}
.slidesjs-pagination {
background:#424242;
list-style:none;
overflow:hidden;
}
.slidesjs-pagination li {
float:left;
}
.slidesjs-pagination li a {
display:block;
padding:10px 20px;
color:#fff;
text-decoration:none;
}
.slidesjs-pagination li a:hover {
background:#000;
}
.slides .active {
background:#000;
}
.slidesjs-navigation{
background:#000;
color:#fff;
text-decoration:none;
display:inline-block;
padding:13.5px 20px;
float:right;
}
Kode Javascript (Ingatlah untuk meletakkannya di akhir dokumen Anda, sebelum </body>)
JavaScript
<script>
$(function(){
$(".slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 3000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
</script>
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
<script>
$(function(){
$(".slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 3000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
</script>
Untuk memperbaiki masalah tombol yang berubah:
Untuk mengakomodasi tombol dengan benar kita akan terus mengerjakan file jquery.slides.js kita dan kita akan memodifikasi baris berikut sebagai berikut:
Baris 118
"class": "slidesjs-next slidesjs-navigation",
"class": "slidesjs-next slidesjs-navigation",
Baris 124
JavaScript
"class": "slidesjs-previous slidesjs-navigation",
"class": "slidesjs-previous slidesjs-navigation",
Satu-satunya hal yang kami lakukan adalah mengubahnya satu sama lain, setelah itu kami menambahkan kelas ikon kami.
Sumber daya yang digunakan:
SlideJS: http://www.slidesjs.com/
IcoMoon: http://icomoon.io/app/
Jquery: http://code.jquery.com/jquery-1.9.1.min.js
Kompres bobot gambar Anda untuk slideshow