19 slaid atau karusel CSS dan HTML untuk laman web anda

Mempunyai laman web yang menggunakan keseluruhan lebar skrinKami mendapati bahawa unsur-unsur tertentu dapat disatukan yang sangat berguna untuk memaparkan keseluruhan sampel produk atau perjalanan yang mungkin kami tawarkan untuk musim panas. Carousel atau slider adalah salah satu elemen web yang membolehkan kami menunjukkan produk kami dengan cara yang sangat menarik.

The Penggeser, skrol atau karusel percuma dalam CSS yang anda akan dapati di bawah ini, mereka membentuk repertoar yang baik untuk semua jenis objektif di tempat kerja yang akan kami tunjukkan kepada klien sebelum mereka menerima anggaran kami. Ini adalah kumpulan slider dalam HTML dan CSS dengan sedikit JavaScript dalam format mendatar dan menegak. Kami akan melakukannya supaya anda dapat mengakses kod untuk menerapkannya dengan cepat.

Korsel mendatar

Carousel ini terdiri daripada animasi yang cukup mencolok seolah-olah kita melukis tirai, untuk memperbesar gambar dan ikon profil yang akan kita buat dalam slaid ini. Ini adalah karusel yang sempurna untuk testimoni dari pengguna yang sangat berpuas hati dengan produk yang kami jual di web.

artikel berkaitan:

27 slaid HTML dan CSS untuk memberikan sentuhan istimewa kepada laman web anda

Carousel tanpa had yang responsif

Gelangsar ini adalah seperti iklan yang kadangkala dapat dilihat di padang bola di sisi dan menunjukkan iklan yang berbeza yang menatal secara mendatar. Ia sangat sesuai untuk halaman arahan yang perlu menunjukkan rakan jenama dan jenis logo lain.

React Carousel

Skrol ini menonjolkan React.jsnya. yang sesuai untuk memaparkan gambar pada ukuran yang sebanding semasa kita beralih dari satu gambar ke gambar lain dalam animasi berterusan. Tidak banyak yang boleh diperkatakan mengenai CSS yang cukup mudah ini, tetapi sangat berkesan sekiranya kita tahu bagaimana meletakkannya dengan betul di web.

Gelangsar 3D yang lancar

Terdiri daripada HTML, CSS dan JavaScript, korsel 3D ini menonjolkan kelancaran dan animasi melantun yang sangat visual. Dengan rangkaian elemen yang mengenal pasti setiap kad, tugas dan karusel yang menarik untuk memasukkannya ke laman web anda.

artikel berkaitan:

46 Penggeser dan Skrol Javascript

Carousel tanpa had automatik

Gelangsar yang, seperti namanya sendiri, dipaparkan secara automatik tanpa pengguna harus berinteraksi dalam masa yang singkat dengannya. Gambar yang berbeza yang membentuk karusel yang mencolok ini muncul kerana peralihan di mana ia memudar secara ajaib.

Tuding Carousel

Dengan elemen hover ini gelangsar bergerak dari kiri ke kanan, atau sebaliknya, kerana kita meninggalkan penunjuk tetikus di atasnya. Peralihan yang lancar untuk bergerak antara gambar yang berbeza yang dapat menyusun slaid gambar ini.

Carousel Mudah Alih

juga dipanggil Carousel Material Design, dan dengan trend semasa dengan semua jenis kad, di sini anda dapat mencari artikel lain dengan sebilangan besar daripadanya dalam CSS / HTML, menjauhkan diri dari yang lain dengan terdiri daripada bahasa reka bentuk yang diterbitkan oleh Google. Anda boleh menggerakkan kad yang berbeza dengan menekan lama pada kad.

Carousel Suapan Instagram

Anda boleh mencetuskan idea di sebalik slaid ini yang menonjol oleh sekeping gambar yang boleh diperbesarkan dengan mengklik salah satu daripadanya. Animasi dengan kesan hebat, walaupun ditujukan untuk jenis laman web tertentu. Catatan Instagram diambil ke karusel slick.js.

Carousel segerak ringkas

Ini mempunyai banyak kaitan dengan yang sebelumnya, walaupun pada jalur gambar, walaupun interaksi dengan gelangsar sangat berbeza dengan menggerakkannya dengan isyarat sisi dari kiri ke kanan dan sebaliknya. Sekali lagi kami telah slick.js melakukan perkara itu. Menarik untuk kesannya yang hebat.

Karosel mendatar 3D

Salah satu karusel paling menarik dalam keseluruhan senarai yang kami terbitkan. Menonjolkan slaid mendatar anda dalam CSS dan HTML bergerak dengan hebat. Anda hanya perlu meninggalkan penunjuk tetikus di atas kotak untuk mencari kesan berbeza yang dapat dihasilkan dengan empat variasi.

Carousel CSS

Kesan visual yang ringkas dan hebat dengan a rangkaian kad yang bergilir-gilir didepan. Kesannya terdapat dalam 3D, jadi ini adalah salah satu slider yang menarik banyak perhatian, terutamanya kerana kesan pantulan minimum yang menunjukkan genius dari pihak pencipta yang sama.

Ambilight Bootstrap Carousel

Gelangsar sederhana dengan kesan hebat yang tidak menonjol. Adakah salah satu slaid sederhana itu yang biasanya kita cari dan itu memberikan perasaan untuk menjadi satu tanpa banyak semangat, tetapi itu memenuhi fungsinya dengan sempurna.

Pasukan Carousel

Sekiranya anda ingin memperkenalkan pasukan editorial yang anda ada di blog, slaid ini sesuai dengan peranannya. Bagus seperti yang sebelumnya kerana betapa mudahnya. Ini menonjol untuk penggunaan berlian untuk menempatkan setiap gambar pasukan. Ia mempunyai main balik automatik.

Carousel Cube

Slider yang menonjol sebagai kubus di mana setiap wajah adalah salah satu gambar atau gambar yang ingin kami paparkan di laman web. Anda hanya perlu mengklik setiap satu untuk menatalnya dan mengetahui kandungan apa yang menanti anda.

Kekunci anak panah karusel

Gelangsar di mana interaksi berjalan menggunakan kekunci anak panah. Sederhana tanpa banyak peminat yang langsung menuju ke jenis interaksi lain, yang kelihatan dari tahun-tahun yang lalu. Untuk kegunaan tertentu.

Carousel menegak

Gelangsar dengan kesan visual yang hebat secara automatik bermain dalam animasi menegak berterusan yang menonjol untuk kadnya dengan sudut bulat. Sangat terkini dan salah satu yang tersendiri dari keseluruhan senarai ini.

Carousel CSS tulen

Carousel ini menonjol kerana mempunyai menu sampingan dari mana kita boleh pergi mengklik setiap pilihannya. Maklumat itu muncul dengan kesan pemulihan yang dicapai dengan lebih baik daripada apa yang dikatakan.

Carousel menegak bertindak balas

Sama seperti sebelumnya untuk menegaknya, walaupun slaid ini mampu mengambil seluruh lebar halaman untuk menunjukkan gambar setiap tabnya. Menarik kerana formatnya yang besar dan penggunaan peralihan CSS untuk meluncur antara slaid.

Carousel Berpisah 3D

Kesan visual yang hebat dengan corak gelangsar yang berputar dalam 3D dengan animasi yang sangat menarik. Setiap pilihan boleh dipilih dari menu sebelah kiri dengan titik untuk masing-masing. Salah satu yang terbaik dalam senarai betapa kreatifnya.