Autoplay Slideshow CSS Murni tanpa JavaScript

sukma
sukma
4 minute read

Setelah mendapatkan banyak umpan balik, hari ini saya berencana untuk membagikan kepada Anda pemutaran tayangan slide CSS murni tanpa JavaScript. Muncul dengan dukungan navigasi titik. Selain itu, ini juga mendukung teks judul dan deskripsi di setiap gambar slider. Anda dapat dengan mudah menyesuaikan teks judul dengan mengedit CSS.

Fungsionalitas hebat lainnya dari slider ini, ini mendukung fungsi putar otomatis. Itu berarti memungkinkan Anda untuk mengatur apakah slider menggeser gambar secara otomatis atau tidak.

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

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

Anda dapat dengan mudah memilih versi yang Anda suka. Anda hanya perlu memanggil file CSS yang 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 slider tanpa menyentuh javascript dan menyediakan semua kemungkinan fungsi yang memiliki slider jquery sederhana.

Penggeser mencakup efek kiri ke kanan, kanan ke kiri, atas ke bawah, dan bawah ke atas. Ini 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 Slideshow Otomatis

Saya tidak akan menjelaskan keseluruhan proses tetapi beberapa hal yang perlu. Anda akan mendapatkan kode sumber dan demo lengkap di bawah ini. Ok sekarang mari kita lihat HTML-nya.

Sebelum saya melanjutkan, saya ingin menyebutkan bahwa HTML agak rumit dibandingkan dengan slider lainnya. Ini perlu menambahkan beberapa div tambahan, tetapi ini mungkin karena fungsinya yang sangat baik.

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

<div id="slider">   <div class="slides"> 	........   </div>   <div class="switch">     <ul>       <li>         <div class="on"></div>       </li>       <li></li>       <li></li>       <li></li>     </ul>   </div> </div>

Titik sakelar ditempatkan tepat di bawah div anak slides dan tentukan dengan daftar yang tidak berurutan. Setiap LI mewakili di titik.

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

<div id="slider">   <div class="slides">     <div class="slider">       <div class="legend"></div>       <div class="content">         <div class="content-txt">           <h1>Lorem ipsum dolor</h1>           <h2>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.</h2>         </div>       </div>       <div class="image">         <img src="https://img11.hostingpics.net/pics/767361311.jpg">       </div>     </div>   </div>   <div class="switch">     <ul>       <li>         <div class="on"></div>       </li>       <li></li>       <li></li>       <li></li>     </ul>   </div> </div>

Sekarang Anda dapat melihat file slider div memiliki beberapa div turunan dan konten HTML, dll. Anda juga dapat melihat nama kelas div image yang menahan gambar. Begitulah cara Anda perlu menempatkan konten, HTML, tautan, atau apa pun yang ingin Anda tambahkan.

CSS untuk Autoplay Slideshow

ID slider bekerja dengan mengatur lebar dan tinggi. Ini juga membutuhkan posisi relatif dan luapan tersembunyi.

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

Serupa, kelas slide membutuhkan lebar dan tinggi dengan posisi relatif. Ia 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 itu 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 slideshow yang responsif dengan fitur putar otomatis tanpa JavaScript.

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

Ini awalnya CSS memerlukan slider untuk membuatnya berfungsi namun agar terlihat sempurna dan berfungsi dengan fungsinya, langsung saja simak demo di atas.