Html.

Dengan perkembangan CSS3, tata letak tumbuh secara eksponensial. Semakin fungsional dapat diimplementasikan pada CSS "murni". Posting ini menunjukkan proses pengembangan. interaktif. Slider siklik tanpa javascript baris tunggal. Rotasi otomatis, pemilihan slide dengan transisi yang lancar - pada css "murni". Contoh dalam aksi

Informasi Umum.

Standar dan awalan

Transisi Properti, Animasi dan Transformasi telah lama diimplementasikan dalam satu atau lain, diimplementasikan di semua browser populer. Pada tanggal 6 Juni 2012, W3C mengumumkan bahwa bagian dari standar CSS 3.0 yang dikembangkan tidak akan berubah secara dramatis, dan disarankan untuk mengimplementasikannya ke semua browser saat ini.

Untuk pengembang front-end, ini berarti penampilan standar yang dapat Anda andalkan. Sekarang tidak perlu takut bahwa di masa depan, setiap browser akan menolak prefrix properti non-standar - karena akan diduplikasi dengan properti standar dan menggantinya jika perlu.

Usang versi Internet. Explorer, yang akan segera dikaitkan bahkan dengan versi ke-9, jangan mendukung transisi, animasi, dan transformasi dengan cara apa pun. Tetapi bagian mereka masih melebihi 10%. IE7-9 ditawarkan oleh JS- "Plug", dan efek switching halus antara slide tidak ada.

Mengapa CSS, bukan JS?

Ada banyak tugas yang dapat diselesaikan saat cSS BANTUAN: Galeri interaktif, menu drop-down multi-down, bangunan dan animasi diagram tiga dimensi ... Mengapa menggunakan CSS ketika Anda dapat melakukan semuanya di JS, terutama mengingat massa perkembangan yang sudah jadi? Argumen utama mungkin seperti:

• Umumnya, Efek CSS. Bekerja lebih cepat, karena mereka diikuti oleh browser mereka secara eksklusif. Ini sangat terlihat pada perangkat seluler.
• Untuk mengimplementasikan tugas, Anda tidak perlu pengetahuan JS dan secara umum setiap bahasa pemrograman. Edit CSS, sebagai aturan, juga tersedia untuk pengguna biasa. Dan "kayu bakar menawan" di CSS jauh lebih rumit daripada di JS.

Penjualan

Bem

Jadi, modifier elemen blok metodologi (BEM) digunakan untuk menamai kelas CSS. Intinya adalah bahwa tata letak didasarkan pada tata letak halaman dari blok independen. Menurut BEM, blok mungkin memiliki elemen, tetapi hanya di dalam blok.

Kelas Slider:
.slider / * blok berisi pita gambar * / .slider__radio / * point radio * / .slider__item / * slide * / .slider__img / * gambar di dalam slide * / .slider__number-list / * wadah dengan tombol switching / .slider__Number /. * Tombol inklusi dari slide yang terkait * / .slider__number-setelah / * tertanam untuk mendukung IE7 dan IE8, yang tidak mendukung elemen pseudo: setelah dan :: setelah, masing-masing * / .slider_count_x / * pengubah mendefinisikan jumlah slide x * /

Animasi

Urutan animasi untuk personel kunci untuk tiga slide terlihat seperti ini:
@Keyframes slider__item-autoplay_count_3 (0% (Opacity: 0;) 10% (Opacity: 1;) 33% (Opacity: 1;) 43% (Opacity: 0)))
Fitur implementasi slider adalah bahwa semua slide dan semua tombol ditugaskan animasi yang sama:
slider_count_3 .slider__item, slider_count_3 .slider__number-setelah (-moz-animasi: slider__item-autoplay_count_3 15s infinite; -webkit-animasi: slider__item-autoplay_count_3 15s Infinite; Slider__item-autoplay_count_3 15s Infinite. ;)
Pendekatan ini memungkinkan Anda untuk secara serius mengurangi jumlah kode, karena semua animasi masih harus duplikat dengan versi awalan (@ -webkit-keyframe, @ -moz-keyframe dan @ -O-keyframe), dan masing-masing "tumpukan". Aturan harus dijelaskan secara terpisah untuk setiap jumlah slide yang diperlukan (oleh pelanggan). Jika Anda juga secara terpisah menggambarkan animasi untuk setiap slide, volume kode dapat puluhan kilobyte.

Untuk menghindari ini, tetapi secara konsisten menghidupkan semua slide dan tombol menggunakan satu animasi, ia cukup untuk memicu awal animasi tepat waktu untuk setiap pasangan slide + tombol:
.slider__item: nth-of-type (2), .slider__Number: NTH-of-Type (2)\u003e .slider__Number-setelah (-moz-animation-delay: 5s; -webkit-animation-delay: 5s; Animasi-delay: 5s; animasi-delay: 5s;) .slider__item: nth-of-tipe (3), ; -Webkit-animation-delay: 10s; -o-animation-delay: 10s; animasi-delay: 10s;) ...
Untuk pasangan pertama, nilai default tetap - nol offset.

Penting juga bahwa offset tidak tergantung pada jumlah slide, dan dapat dijelaskan sekali untuk jumlah maksimumnya.

Akibatnya, transisi animasi halus antara slide terlihat seperti ini:

Jeda saat melayang kursor

Untuk kasus tersebut ketika pengguna ingin memegang slide di layar, tetapi tidak ingin mematikan rotasi, Anda dapat menggunakan mode jeda untuk melayang di atas slide:
.slider: hover .slider__item, .slider: hover -Play-State: dijeda;)

Beralih ke Klik

Ada sejumlah CSS "Acara" Switchable elemen html.. Jika kita berbicara tentang klik mouse, maka ini adalah tampilan kelas pseudo: fokus ,: target, atau: memeriksa salah satu elemen halaman. Pseudo-Class: fokus bisa tidak lebih dari satu elemen per halaman sekaligus; Pseudo-Class: target target sejarah browser dan membutuhkan keberadaan tag "A"; Pseudo-Class: diperiksa mengingat kondisi sebelum meninggalkan halaman, ditambah, dalam kasus pool radio, adalah saklar diskrit ketika hanya satu elemen dari grup tertentu yang dapat dipilih - apa yang dibutuhkan.
.slider__radio (gaya tidak dipilih dermaga radio) .slider__radio: diperiksa (gaya radiokopter yang dipilih)

Dalam pemilih di bawah level 4, ganti keadaan elemen sewenang-wenang (misalnya, opacity slide) hanya mungkin dalam bundel dengan tombol radio, dengan bantuan pemilih tetangga + dan ~. Anda dapat mengganti gaya tetangga dan gaya keturunan tetangga, tetapi dalam hal apapun tetangga harus setelah radiokopter.
/ * Gaya slide pertama adalah "tidak dipilih" * / .slider__radio: nth-of-tipe (1) ~ .slider__item: nth-of-tipe (1) (Opacity: 0,0;) / * Gaya Slide pertama di negara "Dipilih" * / .slider__radio: nth-of-tipe (1): checked ~ .slider__item: nth-of-tipe (1) (Opacity: 1.0;)
Switching dari slide opacity digunakan, yang berisi gambar. Ini lebih banyak universal Way.dari pada switching properti gambar karena dalam wadah div, tidak seperti elemen IMG kosong, dapat ditempatkan informasi tambahan (Misalnya, nama slide, atau deskripsi terkait, termasuk tautan).
Untuk slide, sifat-sifat transisi ditunjukkan yang memungkinkan Anda untuk beralih di antara mereka dengan lancar.
.slider__item (-moz-transisi: opacity 0.2s linear; -webkit-transisi: opacity 0.2s linear; -O-transisi: opacity 0,2s linear; opacity 0,2s linear;)

Berhenti rotasi saat memilih slide

Ketika Anda memilih pengguna slide apa pun, Anda harus menghentikan animasi semua slide dan tombol. Hal ini disebabkan oleh fakta bahwa prioritas nilai-nilai dari sifat-sifat animasi yang berjalan selalu di atas semua nilai lain dari properti yang sama (Anda dapat mengganggu bahkan properti inline dengan! Penting).

Sejak animasi, bahkan jika strukturnya sama, ada setiap slide, dan perlu mematikan animasi semua slide (jika tidak transisi yang mulus Tiga slide akan berpartisipasi), semua saluran radio harus ditempatkan sebelum slide pertama.
...

Selain itu, semua tombol (label tombol radio) perlu dikelompokkan dalam unit terpisah dan ditempatkan setelah pool radio, jika tidak masalah dapat muncul dengan posisi universal label untuk jumlah slide yang sewenang-wenang.

Hentikan animasi semua slide dan tombol saat memilih slide yang ditetapkan sebagai berikut:
.slider__radio: checked ~ .slider__item, .slider__radio: checked ~ tidak ada;)

Slide nomor arbitrer

Buat slider universal di bawah sejumlah slide tidak mungkin, karena untuk setiap angka dibutuhkan "tumpukan" css-aturan animasi. Setiap "tumpukan" (jika dijelaskan) dapat dihubungkan melalui pengubah unit slider:
.slider_count_x.
di mana x adalah jumlah slide.

Untuk mendukung beberapa browser lama, slide pertama tidak dianimasikan. Untuk alasan ini, wadah gambar pertama memiliki opacity selalu sama dengan 1,0. Ada masalah: dengan switching dua slide lainnya di antara mereka sendiri, yang pertama bergeser (ini bisa menjadi induk dari induk dari blok slider). Untuk menghapus efek transmisi, penundaan transisi-delay diatur untuk semua slide, kecuali untuk yang dipilih; Untuk indeks yang dipilih, Z-index dipasang lebih dari siapa pun:
.slider__item (Opacity: 1.0; Posisi: relatif; -moz-transisi: opacity 0.0s linear 0.2s; -webkit-transisi: opacity 0,0-linear 0,2s; -o-transisi: Opacity: Opacity: Opacity: Opacity 0,0-an linear 0.2s;) .slider__radio: nth-of-tipe (1): checked ~ .slider__item: nth-of-tipe (1), .slider__radio: nth-of-tipe (2): checked ~ .slider__item: NTH-OF-TYPE (2), .slider__radio: Nth-of-Type (3): checked ~ .slider__item: NTH-of-Type (3), Slider__ITEM: NTH-OF TYPE (4), .slider__radio: Nth-of-Type (5): checked ~ .slider__item: NTH-of-Type (5) (-Moz-Transition: Opacity 0.2s linear; -webkit : Opacity 0.2s linear; -O-transisi: opacity 0.2s linear; transisi: opacity 0.2s linear; z-index: 6;)
Sehingga slide tidak bertentangan dengan elemen lain dari situs (misalnya, tidak tumpang tindih menu drop-down dengan indeks Z kurang dari atau sama dengan 6), buat konteksnya sendiri (konteks susun) untuk blok koneksi itu minimal diperlukan untuk visibilitas, z-index`a:
.slider (z-index: 0;)

begitu

Sudah hari ini, tanpa keterampilan pemrograman dan perpustakaan khusus, ke standardisasi akhir, CSS 3.0 memungkinkan Anda untuk mengimplementasikan tugas yang kompleks dan menarik. Slider interaktif yang dijelaskan, saat ini, sepenuhnya beroperasi pada 80% pengguna runet. Untuk sebagian besar pengguna yang tersisa, yaitu untuk pengguna browser IE7-9, Anda dapat menggunakan JS- "Plug", yang mengimplementasikan fungsi utama dari slider.

Contoh kerja dapat dilihat

3 Maret 2015 pukul 18:15

Menarik dan pada saat yang sama slider sederhana cSS murni.3

• Pengembangan situs web,
• CSS,
• Html.

Saya tidak akan membuka Amerika kepada siapa pun, saya tidak akan mengejutkan masyarakat dengan fokus baru dan tidak melepaskan otak bagi mereka yang berenang di CSS3 sebagai akualan. Saya akan memberi tahu Anda cara sederhana untuk membuat slider menggunakan fungsi CSS3 sederhana tanpa perlu menggunakan javascript.

1. Pergerakan Yayasan

Untuk mengimplementasikan slider, kita akan memerlukan serangkaian tag yang cukup sederhana, yang pada gilirannya akan merespons elemen slider.

Di sini kita melihat bahwa blok "pembungkus" secara keseluruhan berisi blok "slider" dengan 5 slide, di dalamnya dapat ditempatkan kode HTML apa pun yang akan berada di slide. Sebelum unit umum, ada tombol radio, yang kemudian disembunyikan untuk membuat panel navigasi slide mereka sendiri dengan label di blok kontrol akan membantu kami.

2. Membuat Slider

Di sini kita akan berhenti dan mempertimbangkan CSS kecil. Harap dicatat bahwa untuk beberapa properti, awalan lintas-browser ditempelkan untuk semua browser modern Bisa memahaminya.

* (Margin: 0; Padding: 0; -WebKit-box-Size: border-box; -moz-box-Size: border box; -o-box-Size: border-box; ) Tubuh (Background-image: URL (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2A.png);)
Dengan desain latar belakang dan gaya bersama semuanya jelas.

Pembungkus (Tinggi: 350px; Margin: 100px Auto 0; Posisi: Lebar: Lebar: 700px;) .Slider (Latar Belakang-Warna: #ddd; Tinggi: Luar: Posisi: Lebar: WebKit; -Shadow: 0 0 20px RGBA (0, 0, 0, .5); -moz-box-shadow: 0 0 20px RGBA (0, 0, 0, .5); -o-box-shadow: 0 0 20 px RGBA (0, 0, 0, .5); Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5);)
Unit umum dan blok dengan slider memiliki dimensi yang sama untuk memonitor posisi slider dengan sempurna pada halaman. Meskipun tidak ada slide, slider yang sementara kami lukis dengan abu-abu muda.

Pembungkus\u003e Input (Tampilan: Tidak Ada;)
Tombol radio bersembunyi. Kami akan membutuhkannya nanti.

Hasil pada. saat ini seperti itu:

3. Membuat slide

Di sini kami mengesampingkan gaya umum untuk slide dan setiap slide secara terpisah:

Slide: absolut; lebar: mewarisi;) .slide1 (latar belakang-gambar: url (http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);) .slide2 (http : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f9807f49a14f97ba0e.jpg);) .slide3 (Background-image: URL (http://habrastorage.org/files/663/6b1/ d4f /.jpg) ;) File / 53c / ff6 / c1c / 53cf6c1caf842368c70b8ef892d8402.jpg);)
Untuk semua slide, kami menunjukkan posisi absolut sehingga Anda dapat bermain dengan efek penampilan. Dimensi slide diambil dari ukuran slider itu sendiri sehingga mereka tidak boleh diresepkan ke beberapa tempat.

4. Kami membuat navigasi pada slide

Karena tombol radio disembunyikan dan kami perlu sebagai sakelar, kami menyusun label yang disiapkan:

Wrapper .Controls (kiri: 50%; margin-kiri: -98px; Posisi: absolut;). Label Reprapper (cursor: pointer; display: inline-blok; tinggi: 8px; Lebar: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -O-border-radius: 50%; radius border: 50%;). PROWERPRAPPER:). 2px solid #ddd; konten: "" Layar: blok; tinggi: 12px; kiri: -4px; Posisi: absolut; top: -4px; lebar: -webkit-border-radius: 50%; RADIUS: 50%; -O-BORDER-RADIUS: 50%; BORDER-RADIUS: 50%;)
Kami membuat navigasi klasik. Setiap tombol adalah area dalam bentuk lingkaran, di dalamnya, dengan slide aktif, area kosong sebagian dicat. Sementara itu, kami memiliki hasil berikut:

5. Kami mempelajari tombol untuk mengklik

Sudah waktunya untuk mengajarkan slider untuk beralih slide dengan mengklik tombol tertentu:

Label pembungkus (kursor: pointer; display: blok inline; tinggi: 8px; margin: 25px 12px 0 16px; posisi: relatif; lebar: 8px; -webkit-border-radius: 50 %; -O-border-radius: 50%; border-radius: 50%; -webkit-transisi: latar belakang kemudahan .5s; -moz-transisi: latar belakang kemudahan .5s; -o- Transisi: latar belakang kemudahan .5s; transisi: latar belakang kemudahan .5s;) .Wrapper label: hover, # slide1: checked ~ .controls label: Nth-of-Type (1), # slide2: # Diperiksa ~ .Controls Label: NTH-of-Type (2), # slide3: checked ~ .controls label: nth-of-tipe (3), # slide4: checked ~ .Controls Label: Nth-of-of-Type (4) # Slide5: checked ~ .controls label: nth-of-tipe (5) (latar belakang: #ddd;)
Di tombol navigasi, tambahkan pewarnaan halus di dalamnya. Juga tambahkan kondisi di mana tombol aktif dan tombol di mana kursor akan ternoda mulus. Tombol radio kami sendiri siap:

6. Slider Teknik

Nah, sekarang kita lakukan agar slide akhirnya beralih:

Slide (tinggi: mewarisi; opacity: 0; Posisi: absolut; lebar: pewarnaan; z-index: 0; -webkit-transform: skala (1.5); -moz-transform: skala (1.5); (1.5); Transformasi: Skala (1.5); -webkit-transisi: Transform Kemudahan .5s, Opacity Eance-in-out-out .5s; -moz-Transition: Transform Ease-in-out .5s, Opacity -in-out .5s; -O-transisi: mengubah kemudahan .5s, Opacity Eancin-out .5s; Transisi: Transform Kemudahan .5s, Opacity Eance-out .5s; ) # Slide1: diperiksa ~ .slider\u003e .slide1, # slide2: diperiksa ~ .slider\u003e .slide2, # slide3: checked ~ .slider\u003e .slide3, # slide\u003e .slide4, # slide5: .slider\u003e .slide5 (opacity: 1; z-index: 1; -webkit-transform: skala (1); -moz-transform: skala (1); -O-transform: skala (1); satu); )
Kami menambahkan properti dalam gaya slide umum, di mana semua slide menjadi tidak terlihat dan pergi ke latar belakang. Kami juga menambahkan sedikit peningkatan slide, sementara mereka tidak terlihat untuk memberikan penampilan yang menarik di slider.

Hasilnya bisa dilihat di sini.

Slider CSS memiliki beberapa keuntungan atas slider pada JavaScript. Salah satu keunggulan ini adalah kecepatan unduhan. Tidak hanya gambar untuk slider digunakan. ukuran besar (Jika tidak ada optimasi untuk layar yang berbeda), itu juga dihabiskan untuk mengunduh skrip untuk beberapa waktu. Tetapi dalam artikel Anda hanya akan melihat slider pada CSS murni.

Itulah yang saya temukan di situs tentang masalah slider:

1. Gambar slider css3.

Slider pada CSS, yang menggunakan slide tombol radio untuk menavigasi. Kolam radio ini berada di bawah slider. Selain itu, selain kolam radio, navigasi dilakukan dengan menggunakan penembak di sebelah kiri dan kanan. Untuk melacak gambar apa yang sekarang ditampilkan - Pseudo-Schools digunakan: diperiksa.

2. Gambar slider CSS3 dengan miniatur

Berbeda dengan slider masa lalu pada CSS, di sini alih-alih pool radio di bagian bawah adalah thumbnail dari semua gambar, yang juga nyaman saat membuat galeri gambar. Gambar diganti dengan semacam efek: menghilang dengan lancar sambil meningkat.

3. Galeri pada CSS

Tetapi slider ini pada CSS sangat cocok untuk menjual halaman. Sebagai aturan, banyak pengembang web dalam pengembangan pinjaman (menjual halaman) menempatkan slider di awal sehingga di layar pertama (tanpa gulir), pengunjung segera melihat semua manfaat yang ada di halaman ini. Selain itu, slider ini adaptif, yang juga menyenangkan.

4. Slider css tanpa tautan

Segera saya ingin melihat bahwa slider ini tidak menggunakan tautan! Secara default, selain gambar utama (slide), 2 slide lebih terlihat. Mereka terletak di belakang yang utama. Perubahan slide terjadi dalam mode yang indah: pertama dua slide dipindahkan dan slide menjadi pusat, yang kemudian akan menjadi yang utama. Kemudian slide meningkat dan ditempatkan di depan sisanya.

5. Slider Adaptif pada CSS3

Slider adaptif lain yang kendalinya didasarkan pada radiokopter. Untuk melihat bagaimana slider ini akan melihat perangkat yang berbedaah - Anda dapat secara independen mengubah jendela browser, atau pada halaman slider ada ikon khusus perangkat yang berbeda, mengklik di mana Anda akan melihat akan melihat slider di komputer Anda, tablet atau pada smartphone Anda.

*** Bonus Slider ***

Selain semua slider, yang disajikan di atas, saya ingin menyenangkan Anda dengan yang lain. Slider ini sangat cocok untuk membuat galeri gambar. Kata-kata tidak menjelaskan apa yang dia lakukan, jadi lebih baik menonton semuanya di video:

1. Slideshow JQuery yang sangat baik

Rangkai slideshow spektakuler yang besar menggunakan JQuery Technologies.

2. Plugin JQuery "Skala Carousel"

Slideshow Scalable menggunakan jQuery. Anda dapat mengatur ukuran untuk tayangan slide yang paling Anda butuhkan.

3. JQuery Plug "slidejs"

Slider gambar dengan deskripsi teks.

4. Plugin "JSLIDERNS"

5. CSS3 jQuery Slider

Ketika Anda mengarahkan kursor pada panah navigasi, thumbnail bulat dari slide berikutnya muncul.

6. Lucu JQuery Slider "Siklus Presentasi"

jQuery Slider. Dengan indikator pemuatan gambar. Ada perubahan slide otomatis.

7. JQuery Plugin "Parallax Slider"

Slider dengan efek latar belakang volumetrik. Sorot slider ini di latar belakang latar belakang, yang terdiri dari beberapa lapisan, yang masing-masing digulir dengan berbagai kecepatan. Akibatnya, ternyata tiruan dari efek surround. Itu terlihat sangat indah, Anda dapat memastikan tentang hal itu. Efek lebih lancar ditampilkan di browser seperti: opera, Google Chrome., Yaitu.

8. SLARE, LIGHT JQUERY SLIDER "BXSLIDER 3.0"

Pada halaman demo di bagian "Contoh" Anda dapat menemukan tautan ke semua opsi yang mungkin Gunakan plugin ini.

9. slider jquery gambar, plugin "slidejs"

Slider JQuery yang stylish tentu akan dapat menghias proyek Anda.

10. JQuery Plugin Slideshow "Mudah slide" v1.1

Plugin JQuery yang mudah digunakan untuk membuat pertunjukan slide.

11. Plugin "JQuery Slidy"

Plugin jQuery mudah dalam berbagai desain. Ada perubahan slide otomatis.

12. JQuery CSS Gallery dengan perubahan slide otomatis

Jika pengunjung dalam waktu tertentu tidak menekan panah "maju" atau "kembali", galeri akan mulai menggulir secara otomatis.

13. Slider JQuery "Slider NIVO"

Plugin cahaya berkualitas tinggi yang sangat profesional dengan kode yang valid.. Ada banyak efek perubahan slide.

14. JQuery Slider "Mobilyslider"

Slider segar. slider jQuery dengan berbagai efek perubahan gambar.

15. JQuery Plugin "Slider²"

Slider mudah dengan perubahan slide otomatis.

16. Slider JavaScript segar

Slider dengan pergeseran gambar otomatis.

Plugin untuk mengimplementasikan tayangan slide dengan perubahan slide otomatis. Dimungkinkan untuk mengelola layar menggunakan thumbnail gambar.

jQuery css. Slider gambar menggunakan plugin Nivoslider.

19. JQuery Slider "JSHOWOFF"

Plugin untuk memutar konten. Tiga opsi untuk digunakan: tanpa navigasi (dengan pergeseran otomatis dalam format tayangan slide), dengan navigasi dalam bentuk tombol, dengan navigasi dalam bentuk gambar.

20. Plugin Portofolio Efek Rana

Plugin JQuery Segar untuk portofolio fotografer. Galeri menerapkan efek menarik dari mengubah gambar. Foto saling menggantikan dengan efek yang mirip dengan pekerjaan rana lensa.

21. Slider CSS JavaScript Mudah "TinySlider 2"

Implementasi slider gambar dengan menggunakan JavaScript dan css.

22. Angin slider TinyCirleslder

Slider putaran bergaya. Transisi antara gambar dilakukan dengan menyeret ke sekitar slider lingkaran sebagai lingkaran merah. Sangat cocok dengan situs Anda jika Anda dalam desain menggunakan elemen bundar.

23. Slider Gambar di JQuery

Slider mudah "slider kit". Slider diwakili dalam berbagai desain: vertikal dan horizontal. Juga menerapkan berbagai jenis navigasi antara gambar: menggunakan tombol "maju" dan "belakang" menggunakan roda mouse, menggunakan klik mouse pada slide.

24. Galeri dengan miniatur "slider kit"

Galeri "Slider Kit". Miniatur gulir dilakukan baik di arah vertikal dan horizontal. Transisi antar gambar dilakukan menggunakan: roda mouse, klik mouse atau kursor miniatur.

25. JQuery Slider Kit Konten Slider

Slider konten vertikal dan horizontal pada jQuery.

26. JQuery Slide Show "Slider Kit"

Slideshow dengan perubahan slide otomatis.

27. Slider CSS3 JavaScript profesional mudah

Slider yang rapi pada jQuery dan CSS3, dibuat pada tahun 2011.

jquery slideshow dengan miniatur.

29. Simple JQuery Slideshow

Slideshow dengan tombol navigasi.

30. Slideshow JQuery "Skitter"

jQuery Plugin "Skitter" untuk membuat tayangan slide yang menakjubkan. Plugin mendukung 22 (!) Tampilan berbagai efek animasi saat mengubah gambar. Ini dapat bekerja dengan dua opsi navigasi untuk slide: menggunakan nomor slide dan dengan thumbnail. Pastikan untuk melihat demonstrasi, penemuan yang sangat berkualitas tinggi. Teknologi bekas: CSS, HTML, JQUERY, PHP.

31. Slideshow "Canggung"

Slideshow fungsional. Dalam bentuk slide dapat melakukan: gambar sederhana., Gambar dengan tanda tangan, gambar dengan tips pop-up, klip video. Anda dapat menggunakan panah, tautan ke nomor geser dan tombol ke kanan / kiri pada keyboard untuk menavigasi. Slideshow dibuat dalam beberapa versi: dengan thumbnail dan tanpa mereka. Untuk melihat semua opsi, berjalan di sepanjang Demo Links # 1 - Demo # 6 yang terletak di atas di halaman demo.

Gambar slider desain yang sangat asli menyerupai kipas. Perubahan slide animasi. Navigasi antar gambar dilakukan dengan menggunakan panah. Ini juga menyediakan pergeseran otomatis yang dapat dihidupkan dan dimatikan menggunakan tombol Play / Pause yang terletak di atas.

Geser jquery animasi. Gambar latar belakang secara otomatis penskalaan ketika jendela browser berubah. Untuk setiap gambar mengapungkan blok dengan deskripsi.

34. "Slider Fluks" Slider pada jQuery dan CSS3

Slider jquery baru. Beberapa efek animasi keren saat mengubah slide.

35. JQuery "Jswitch" Plugin

Galeri JQuery Animasi.

Light Slideshow pada jQuery dengan perubahan slide otomatis.

37. Versi baru dari plugin "Slidescheck 1.2.2"

Slider konten profesional. Opsi dimungkinkan dengan pergeseran slide otomatis, serta opsi menggunakan roda mouse untuk transisi antara slide.

38. Slider JQuery "Sudo Slider"

Gambar mudah difitnah di jquery. Sangat banyak opsi implementasi: perubahan gambar horizontal dan vertikal, dengan tautan ke nomor slide dan tanpa mereka, dengan tanda tangan gambar dan tanpa, berbagai efek perubahan gambar. Ada fungsi perubahan slide otomatis. Tautan ke semua implementasi teladan dapat ditemukan di halaman demo.

39. jQuery CSS3 Slideshow

Slideshow dengan miniatur mendukung mode pergeseran slide otomatis.

40. jQuery "Slider Fluks"

Slider dengan beberapa efek dari perubahan gambar.

41. Slider JQuery Sederhana

Slider gambar bergaya pada jQuery.

Saya ingin memberi tahu cara sederhana untuk membuat slider, tanpa menggunakan JS, dengan bantuan animasi CSS.

1) Untuk memulainya, Anda akan menulis HTML, misalkan 4 gambar akan diganti di slider.

2) Selanjutnya, kami menempatkan ukuran blok, dan beberapa pengaturan lagi, posisi: relatif diperlukan untuk membuat konteks pemformatan, maka akan jelas mengapa.

Slider (lebar: 500px; tinggi: 300px; margin: auto; margin-top: 25px; batas: 1px padat hitam; Posisi: Relatif: Overflow: Hidden;)
3) Kami juga mendefinisikan beberapa properti untuk slide itu sendiri:

Geser (Lebar: 500px; Tinggi: 300px; Posisi: Absolute; Top: 0; Kiri: 0;)
Seperti yang dapat dilihat dari CSS, kami menempatkan semua slide di sudut kiri atas slider, sehingga menentukan posisi sumber yang sama.

1. Slide ada pada posisi sumber, ditunjukkan oleh pengguna.

2. Slide bergerak ke kiri sampai ternyata slider di luar negeri sepenuhnya (slider juga ditunjukkan di atas, overflow: Hidden, masing-masing, slide tidak berjalan ke objek di sekitarnya).

5. Geser turun satu tingkat dengan slider

6. Geser bergerak ke posisi awal
Dengan kata lain (tembakan untuk saat ini, menurut angka dari daftar di atas):

@Keyframes slide (dari (atas: 0; kiri: 0;) 1 (Transformasi: Translate (0px, 0px);) 2 (transformasi: terjemahan (-500px, 0);) 3 (Transformasi: Translate (-500px, 300px );) 4 (Transformasi: Terjemahkan (500px, 300px);) 5 (Transformasi: Terjemahkan (500px, 0);) ke (mengubah: (0px, 0px);))
5) Jadi, menjadi jelas seperti apa jalur slide itu. Setiap slide "lingkaran" di sekitar wadahnya adalah slider - dan kembali ke aslinya. Dengan demikian, kita dapat memutar sejumlah slide. Tetapi satu nuansa tetap, yang merupakan hal terpenting dalam skema ini - waktu. Perlu untuk menghitung cerita animasi dengan benar pada waktu yang tepat dan menetapkan penundaan yang benar untuk setiap slide agar tidak secara bersamaan dianimasikan. Untuk memahami cara mengatur keterlambatan dengan benar dan menghitung waktu animasi, saya pergi diuraikan di bawah ini.

Mari kita ambil sebutan langkah-langkah dari titik sebelumnya dan akan memahami apa yang terjadi di setiap langkah. Intinya, langkah nomor 1, 2 dan 6 adalah langkah-langkah di mana slide masuk ke area yang terlihat. Dari kenyataan bahwa slide harus bergerak dengan tak terpisahkan dan, seolah-olah, mendorong satu sama lain dari slider, dapat disimpulkan bahwa durasi langkah 2 dan 6 harus sama. Segera buat reservasi bahwa saya berhasil menyelesaikan desain ini hanya dengan kondisi bahwa durasi langkah pertama juga sama dengan durasi ke-2 dan ke-6. Apa yang terjadi selama langkah-langkah 3,4 dan 5 pada dasarnya adalah kebutuhan teknis, dan untuk kesederhanaan, mari kita satukan tiga langkah ini dalam 1.

Setelah penyederhanaan, kami memiliki:

1. Langkah - Slider ditunjukkan pada sumbernya
2. Langkah - Slider bergeser ke kanan
3. Langkah - Slider membuat gerakan teknis
4. Langkah - Slider bergeser ke kiri, kembali ke posisi awal

Untuk memastikan insiden ke slide, pada saat slide dimulai langkah 2, slide berikutnya harus dimulai langkah 4.

Jika waktu, lingkaran semua animasi adalah t;
Jumlah slide - n;
Durasi 3 Langkah - Y;
Durasi langkah-langkah adalah 1,2 dan 4 - x;
Langkah Penundaan Animasi untuk N-Slide - Z;
Kemudian:

Y \u003d (100 * n - 150) / n;
x \u003d (100 - y) / 3;
X dan Y harus diterjemahkan ke dalam minat, dan kemudian:
z \u003d 2 * x * t;

Untuk kasus ketika n \u003d 4, seperti pada contoh di atas, kami dapatkan:

Pitch ke-3 - 62,5%, 1, 2 dan 4 - 12,5%. Langkah penundaan animasi untuk setiap slide berikutnya - 25%.

Interval mana yang akan berada di antara tahapan dalam langkah ketiga - tidak masalah.

6) Sekarang kita semua menghitung dan mengetahui semua nilai dapat diberikan kode akhir.

Animasi:

@Keyframes slide (dari (atas: 0; kiri: 0;) 12.5% \u200b\u200b(Transformasi: Translate (0px, 0px);) 25% (Transformasi: Terjemahkan (-500px, 0);) 36% (Transform: Terjemahkan (- 500px, 300px);) 37% (Transformasi: Translate (500px, 300px);) 87.5% (Transformasi: Terjemahkan (500px, 0);) ke (transformasi: (0px, 0px);))
Slide:

Slide1 (latar belakang: URL (1.jpg); animasi-delay: 7,5s;) .slide2 (latar belakang: url (2.jpg); animasi-delay: 5s;) .slide3 (latar belakang: URL (3.jpg); Animasi-Delay: 2.5s;) .Slide4 (Latar Belakang: URL (4.jpg); Animasi-Delay: 0s;)
General CSS untuk semua slide:

Geser (lebar: 500px; tinggi: 300px; Posisi: absolut; TOP: 0; kiri: 0; animasi-Nama: animasi-durasi: 10s; Fungsi animasi-timing: Infinite; )
Di sini, pada kenyataannya, semuanya! Terima kasih kepada semua orang yang membaca sampai akhir.