Setelah mendapatkan banyak umpan balik, hari ini saya memiliki rencana untuk berbagi dengan Anda pemutaran otomatis tayangan slide CSS murni tanpa JavaScript. Muncul dengan dukungan navigasi titik. Selain itu, ini juga mendukung teks judul dan deskripsi pada setiap gambar slider. Anda dapat dengan mudah menyesuaikan teks tajuk dengan mengedit CSS

Fungsi hebat lainnya dari penggeser ini, ini mendukung fungsi putar otomatis. Itu artinya memungkinkan Anda untuk mengatur apakah penggeser menggeser gambar secara otomatis atau tidak

Setiap penggeser gambar khusus CSS memiliki cara pembuatan dan fungsionalitasnya sendiri. Slider ini tidak mendukung fungsi thumbnail tetapi Anda dapat melihat slider gambar thumbnail CSS kami yang juga dibuat dengan CSS

Tapi Ini adalah carousel yang sepenuhnya responsif dan mendukung berbagai browser termasuk IE. Ini memiliki beberapa opsi animasi untuk memungkinkan menggeser slider dengan cara yang berbeda

Anda dapat dengan mudah memilih versi yang Anda suka. Anda hanya perlu memanggil file CSS terpisah, dan file HTML-nya sama kecuali versi ringannya. Versi yang lebih ringan tidak memiliki legenda atau peluru

Penggeser ini dibuat oleh Elitewares dan dia telah melakukan pekerjaan dengan baik. Itu membuat penggeser tanpa menyentuh javascript dan menyediakan semua kemungkinan fungsi yang memiliki penggeser jquery sederhana

Slider mencakup efek kiri ke kanan, kanan ke kiri, atas ke bawah dan bawah ke atas. Itu juga memungkinkan menambahkan teks overlay dengan animasi

Hal penting dan signifikan tentang slider ini adalah autoplay dengan peluru. Artinya, ketika slide mengubah gambar, itu akan menggantikan poin status secara otomatis

Struktur HTML untuk Tampilan Slide Otomatis

Saya tidak akan menjelaskan kepada Anda seluruh proses tetapi beberapa hal yang diperlukan. Anda akan mendapatkan kode sumber lengkap dan demo di bawah ini. Ok sekarang mari kita lihat HTML

Sebelum saya melanjutkan, saya ingin menyebutkan bahwa HTML agak rumit dibandingkan dengan slider lainnya. Perlu menambahkan beberapa div tambahan, tetapi ini mungkin karena fungsinya yang luar biasa

Slider HTML dimulai dengan ID utama slider dan selanjutnya, ia memiliki nama kelas div anak slides yang menampung setiap slide

  

	........	
  
  

    

      

        

      
      

      

      

    
  

Titik-titik sakelar ditempatkan tepat di bawah div anak slides dan ditentukan dengan daftar yang tidak diurutkan. Setiap LI mewakili titik

Selanjutnya, setiap id slider didefinisikan dengan nama kelas slider dan kita perlu menempatkan tepat di bawah,slides Seperti contoh di bawah ini

  

	
    

      

      

        

          
Lorem ipsum dolor
          
Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.
        
      
      

        

      
    

  
  

    

      

        

      
      

      

      

    
  

Sekarang Anda dapat melihat div slider memiliki beberapa div turunan dan konten HTML, dll. Anda juga dapat melihat nama kelas div

  

	
    

      

      

        

          
Lorem ipsum dolor
          
Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.
        
      
      

        

      
    

  
  

    

      

        

      
      

      

      

    
  

CSS untuk Tayangan Slide Putar Otomatis

ID penggeser berfungsi dengan mengatur lebar dan tinggi. Itu juga membutuhkan posisi relatif dan luapan tersembunyi

#slider{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}

Mirip, kelas slide membutuhkan lebar dan tinggi dengan posisi relatif. Itu juga perlu menambahkan animasi slide yang akan dibuat menggunakan properti @keyframe CSS

.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}

Setiap rumus slide digunakan mirip dengan banyak slider berbasis CSS lainnya, dan membagi lebar dari slider angka. Seperti jika mereka memiliki total empat slider maka rumusnya akan terlihat seperti 100%/4 = 25%

.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}

Untuk membuatnya responsif, perlu mengatur lebar dan tinggi menjadi 100% untuk gambar slider dan div gambar. Baris CSS murni berikut menampilkan item tayangan slide yang responsif dengan fitur putar otomatis tanpa JavaScript apa pun

.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}

Ini awalnya CSS membutuhkan slider untuk membuatnya berfungsi tetapi agar terlihat sempurna dan berfungsi dengan fungsinya, lihat saja demo di atas

Bisakah Anda membuat tayangan slide dalam HTML tanpa JavaScript?

Bagaimana cara menyisipkan tayangan slide dalam HTML?

Bagaimana cara membuat korsel dalam HTML tanpa JavaScript?

Bagaimana cara membuat penggeser gambar hanya menggunakan HTML dan CSS?