Membuat Background Slider Image Fullpage

2017-10-17T01:33:00.000+07:00

Contoh foto menggunakan Cardboard Camera

Hal pertama yang harus dilakukan adalah menyiapkan foto atau gambar sebagai background. Agar slider terlihat lebih bagus, sebaiknya menggunakan foto atau gambar dengan mode panorama. Memang agak susah untuk menghasilkan foto panorama yang baik, kecuali menggunakan alat bantu. Jika smartphone kamu belum ada fitur untuk mengambil foto panorama, kamu bisa menggunakan aplikasi dari Google yaitu Cardboard Camera.

Cardboard Camera

Untuk menjalankan aplikasi Cardboard Camera dari Google ini memerlukan Android minimal 4.4 (Kitkat).
Jadi kalo smartphone kamu masih dibawah Android Kitkat, kamu bisa mencari aplikasi alternatif lain di Play Store dengan kata kunci panorama camera.
Jika repot untuk mengambil foto panorama, kamu masih bisa menggunakan foto atau gambar yang biasa, tapi hasilnya kurang maksimal.

Kita mulai langkah untuk Membuat Background Slider Image Fullpage,

Siapkan gambar yang akan digunakan

Masukkan script jquery dengan url


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Tambahkan javascript untuk membuat slidernya


<script>
var bgScrollDirection = "left";
var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQl3ddYmUiZC7H2gx67IHNhKlisKWpezAb2IugJUmHRME8OI57zOZPF-g8TcM-epI3gSt_uWmV8dCgKH7kOfIg9K5_Am5mu1XqIz0VG4KhK5hHV0vh7dnYjqqug09oPVL7KNgkMnI_RFOr/s1600/IMG_20160521_113820.vr.jpg";
var bgScrollColor = "red";
var bgScrollSpeed = 10;

//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('c.4.f.5="v("+u+") w x y";c.4.f.t="r";c.4.f.s=q;$(e(){2 3=z;2 g=A I();2 l=g.H();2 k=g.J();2 m=l/j*h;2 i=k/F/j*h;2 n=C.D(m+i);2 0=3/h*n;2 0=0-(3/1);e d(){6(9=="E"){0=(0<1)?0+(3-1):0-1;$(\'4\').8("5-a","7% "+0+"b")}6(9=="B"){0=(0<1)?0+(3-1):0+1;$(\'4\').8("5-a","7% "+0+"b")}6(9=="G"){0=(0<1)?0+(3-1):0-1;$(\'4\').8("5-a",0+"b"+" 7% ")}6(9=="K"){0=(0<1)?0+(3-1):0+1;$(\'4\').8("5-a",0+"b"+" 7% ")}p(e(){d()},o)}d()});',247,247,'offset||var|backgroundheight|body|background|if|50|css|bgScrollDirection|position|px|document|scrollbackground|function|style|now|100|minutepercent|24|minute|hour|hourpercent|percentofday|bgScrollSpeed|setTimeout|bgScrollColor|fixed|backgroundColor|backgroundAttachment|bgScrollImage|url|repeat|Top|center|4000|new|down|Math|round|up|30|left|getHours|Date|getMinutes|right'.split('|'),0,{}))
//]]>
</script>

Pengaturan untuk slider

var bgScrollDirection = "left"; ( Mengatur kemana arah slider berjalan, left atau right )
var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQl3ddYmUiZC7H2gx67IHNhKlisKWpezAb2IugJUmHRME8OI57zOZPF-g8TcM-epI3gSt_uWmV8dCgKH7kOfIg9K5_Am5mu1XqIz0VG4KhK5hHV0vh7dnYjqqug09oPVL7KNgkMnI_RFOr/s1600/IMG_20160521_113820.vr.jpg"; ( Alamat gambar yang dijadikan background )
var bgScrollColor = "red"; ( Mengatur warna scroll pada background )
var bgScrollSpeed = 70; ( Mengatur kecepatan slider, semakin sedikit angkanya maka semakin cepat, begitu pula sebaliknya )

Untuk contoh dan hasilnya bisa klik tombol Demo dan Download dibawah.

Jika masih bingung silahkan tinggalkan pesan di komentar, salam -secondcode-

Better Than Before

Membuat Background Slider Image Fullpage