Cara menggunakan image slider html css

Seringkali kita melihat sebuah website yang menyajikan beberapa buah gambar yang disajikan secara bergantian dengan interval waktu tertentu, inilah yang disebut dengan image slideshow. Kita dapat menggunakan image slideshow dalam menu image gallery atau pun dalam penyajian konten artikel terbaru yang dilengkapi dengan gambar.

Saat ini untuk membuat image slideshow, terdapat banyak pilihan library yang dapat kita gunakan. Seperti dengan menggunakan s3slider, coinslider, wowslide, flexslider dan masih banyak lainnya.

Pada tutorial image slideshow yang akan kita buat, kita akan menggunakan library dari wowslider. Karena wowslider sendiri mengfokuskan diri untuk pembuatan image slideshow yang sangat beragam modelnya. Bahkan anda dapat mencoba software wowslider, setelah itu akan digenerate ke dalam bentuk dokumen html.

Kita akan membuat image slideshow untuk kebutuhan image gallery seperti yang ditunjukkan oleh Gambar.  dibawah ini :




Membuat image slideshow dengan wowslider

Dalam contoh yang disajikan, secara umum interface menggunakan library bootstrap. Sedangkan untuk animasi dari image slideshow menggunakan wowslider. Kesemua library tersebut terdapat pada bagian link download paling bawah.

Berikut ini adalah script lengkap dalam membuat image slideshow :




    
    
    
    Tutorial Imageslideshow
    
    
    
    
     
    
           
    
    





    
        
            
                
            
            
            Pusat Ilmu Secara Detil
        
        
            
                Home
                Learn French
                English
            
        
    


    


    
        
            
                Image Gallery
                                        
                        
                        
                        
                            
                            
                                
                                 
                                
                            
                                                                                
                            
                            
                        
                        
                        
                        
                    
            
        
    



Jika ingin merubah ukuran gambar, maka cukup lakukan teknik css secara inline seperti script diatas : . Anda tinggal merubah ukuran width dan height-nya.

Jika ukuran gambar yang anda rubah terlalu besar, dan terkesan tidak berubah ukurannya. Hal ini diakibatkan karena pada contoh mengeset :

. Jadi anda dapat memodifikasinya menjadi :
atau
dsb.  Maksimalnya adalah :
.

Bài mới nhất

Chủ Đề