Korsel Vertikal Multi Item CSS Murni dengan Penomoran Halaman

Anda pasti tahu bahwa cara baru memuat lebih banyak konten dengan mengklik tombol atau hanya dengan menggulir. Apakah saya benar? Tetapi bagaimana melakukan hal yang sama dengan menggunakan pagination? Ya, itulah konsep yang akan saya bagikan dengan Anda. Sebenarnya, saya akan membangun file korsel vertikal multi item dengan hanya menggunakan CSS murni dan itu akan bekerja dengan pagination. Anda juga dapat memeriksa tutorial kami sebelumnya jika Anda ingin membuat slider gambar / konten otomatis.

Konsepnya agak mirip dengan slider pagination. Sesuatu seperti Carousel di mana jumlah item atau produk tetap ditampilkan dan ketika pengguna mengklik halaman (Dot atau Number) itu menggeser semua item tetap untuk menggantikan yang baru.

Penomoran halaman tidak terlalu dibutuhkan untuk situs seperti menyediakan beberapa layanan, tetapi bagus untuk ditempatkan di produk atau situs blog. Konsep baru ini tidak akan menggantikan load more type thing, tetapi Anda dapat menerapkan di mana item atau produk terdaftar.

Menerapkan hal-hal baru di setiap desain situs membuat desain situs Anda unik di pasar. Ini menarik pengunjung situs Anda dan senang menghabiskan lebih banyak waktu di situs Anda.

Untuk memungkinkan pengguna menavigasi situs dengan mudah, penting untuk menempatkan pagination dan cara memberikan pengalaman pengguna baru kepada pengguna dengan menambahkan Konsep pagination animasi baru ini.

Cara Membuat Korsel Vertikal Multi Item

Secara default, tiga item mendapatkan tampilan yang dapat dengan mudah dimodifikasi. Ini telah menempatkan nomor pagination di bagian bawah item dengan yang pertama adalah status aktif.

Saat pengguna mengklik halaman kedua, itu menggulir ke atas dan mengganti item lama dengan yang baru. Itu juga dapat menunjukkan nama halaman di bagian atas item.

Ketika pengguna mengklik pager berikutnya (nomor), itu memberi pengguna untuk menggeser efek dengan membawa item baru sambil mengklik nomor sebelumnya; itu slide membawa kembali item sebelumnya.

Markup

Konsep sentral didasarkan pada a tombol radio yang mengontrol label. Setiap radio jenis masukan memiliki ID unik yang nantinya akan dikontrol melalui label.

<div class="box-paginacao">   <input type="radio" name="input-paginacao" id="paginacao1" checked>   <input type="radio" name="input-paginacao" id="paginacao2">   <input type="radio" name="input-paginacao" id="paginacao3">   <input type="radio" name="input-paginacao" id="paginacao4"> </div> 

Kami telah menentukan pembungkusnya box-vitrines yang menyimpan div turunan untuk set item. Untuk menentukan jumlah item, perlu ditempatkan di dalam div yang memiliki kelas unik seperti vitrine1, vitrine2 ... etc. Setiap item ditempatkan dalam daftar yang tidak berurutan.

<div class="box-paginacao">     <div class="box-vitrines">         <ul>           <div class="vitrine1">             <h2>First Page</h2>             <li>Item</li>             <li>Item</li>             <li>Item</li>           </div>           <div class="vitrine2">             <h2>Pagina 2</h2>             <li>Item</li>             <li>Item</li>             <li>Item</li>           </div>           <div class="vitrine3">             <h2>Second Page</h2>             <li>Item</li>             <li>Item</li>             <li>Item</li>           </div>           <div class="vitrine4">             <h2>Thrid Page</h2>             <li>Item</li>             <li>Item</li>             <li>Item</li>           </div>         </ul>       </div> </div> 

Akhirnya, kami memiliki pengontrol pagination yang dapat kami lakukan dengan menggunakan label.

<div class="box-paginacao">     <div class="box-vitrines">         .... Items Goes Here ...         <div class="btn-paginacao">           <ul>             <li><label for="paginacao1">1</label></li>             <li><label for="paginacao2">2</label></li>             <li><label for="paginacao3">3</label></li>             <li><label for="paginacao4">4</label></li>           </ul>         </div>       </div> </div>

Gaya

CSS berikut memerlukan penggeser item agar berfungsi.

*, ul{   margin: 0;   padding: 0;   list-style: none; } html{   width: 100%;   height: 100%; } body{   font-family: 'Roboto', sans-serif;   background:#f4f4f4;   font-size: 100%;   margin: 0;   padding: 0; } .container{   width: 80%;   height: auto;   margin: 0 auto;   float:none; } .row{   width: 1000px;   height: auto;   margin: 0 auto;   position: relative; } h2{   width: 100%;   height: auto;   float: left;   margin: 2% 0;   text-align: center;   font-weight: 400;   color: #FF1493;   font-size: 1.5em;   text-transform:uppercase; } h2 small{ 	font-size:.55em; } input {   display: none; } .box-paginacao {   width: 100%;   height: auto;   float: left; } .box-paginacao h2 {   width: 100%;   height: auto;   float: left;   margin: 0 0 50px;   text-align: center;   font-family: 'Roboto', sans-serif;   font-weight: 400;   font-size: 1.3em;   color: #3CA3F2; } .box-paginacao .box-vitrines {   width: 100%;   height: 371px;   float: left;   overflow: hidden;   position: relative; } .box-paginacao ul {   width: 100%;   height: auto;   float: left; } .box-paginacao ul li {   width: 250px;   height: 250px;   float: left;   margin: 0 0 10px 60px;   border: 1px solid #c0c8c9;   border-radius: 10px;   line-height: 250px;   text-align: center;   font-family: 'Roboto', sans-serif;   font-weight: 400;   font-size: 1.3em;   color: #2E2929; } .box-paginacao .vitrine1, .box-paginacao .vitrine2, .box-paginacao .vitrine3, .box-paginacao .vitrine4 {   width: 100%;   height: 336px;   float: left;   margin-bottom: 33px; } .btn-paginacao {   width: 100%;   height: auto;   float: left;   margin-top: 10px;   display: flex;   align-items: center;   justify-content: center;   position: absolute;   z-index: 10;   left: 0;   bottom: 0; } .btn-paginacao ul {   width: auto;   height: auto; } .btn-paginacao ul li {   width: 30px;   height: 30px;   float: left;   margin: 0 5px 0 0;   border: 0; } .btn-paginacao ul li:last-child {   margin: 0; } .btn-paginacao ul li label {   width: 100%;   height: 30px;   float: left;   text-align: center;   line-height: 30px;   font-family: 'Roboto', sans-serif;   font-weight: 400;   font-size: 1em;   color: #2E2929;   cursor: pointer;   border-radius: 3px;   transition: background-color .25s ease-in-out; } .btn-paginacao ul li label:hover {   background-color: #FF1493;   color: #FFF; } #paginacao1:checked ~ .box-vitrines > ul {   transition: transform .7s ease-in-out;   transform: translateY(0px); } #paginacao1:checked ~ .box-vitrines label[for="paginacao1"] {   background-color: #FF1493;   color: #FFF; } #paginacao2:checked ~ .box-vitrines > ul {   transition: transform .7s ease-in-out;   transform: translateY(-369px); } #paginacao2:checked ~ .box-vitrines label[for="paginacao2"] {   background-color: #FF1493;   color: #FFF; } #paginacao3:checked ~ .box-vitrines > ul {   transition: transform .7s ease-in-out;   transform: translateY(-738px); } #paginacao3:checked ~ .box-vitrines label[for="paginacao3"] {   background-color: #FF1493;   color: #FFF; } #paginacao4:checked ~ .box-vitrines > ul {   transition: transform .7s ease-in-out;   transform: translateY(-1107px); } #paginacao4:checked ~ .box-vitrines label[for="paginacao4"] {   background-color: #FF1493;   color: #FFF; } 

Untuk demo kerja carousel vertikal multi item CSS murni, Anda dapat mendownload kode sumber dan menerapkannya di situs Anda.