Saya tahu apa yang Anda pikirkan. "Apa maksudmu, buat slider hanya dengan CSS. Tentunya Anda memerlukan JavaScript untuk mengontrol perilaku penggeser?"
Sebenarnya, ada cara cerdas untuk melakukannya dengan CSS murni, dan bukan satu baris JS. Dan ya, itu termasuk tombol navigasi dan remah roti
Lihatlah hasil yang akan kita dapatkan
Lihat Pena di CodePen
Baca terus untuk mengetahui caranya
Langkah 1 - buat tata letak slider Anda
Pertama, Anda perlu membuat ruang untuk memasukkan slider, dan tentu saja, beberapa slide
<div class="slider-container"><div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
</div>
</div>
</div>
</div>
Jadi di sini kita punya
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}0 hanyalah elemen di situs Anda yang Anda inginkan untuk memasukkan bilah geser
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1 seperti 'layar', atau area pandang yang akan menampilkan semua slide Anda
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_2 akan menahan slide Anda. Ini adalah elemen yang benar-benar bergulir untuk memberikan efek penggeser
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_3 adalah setiap slide individu. Perhatikan bahwa Anda memerlukan kelas
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_3, dan id unik untuk masing-masing kelas
Maka kita membutuhkan CSS
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_0 bisa apa saja - Saya baru saja menggunakan flexbox untuk memudahkan memusatkan slider. Tapi jika mau, Anda bisa menggunakan CSS Grid (ini masalah preferensi, seperti yang kami jelaskan di CSS Grid Vs ini. artikel Flexbox)
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_1 hanya mengatur ukuran slider Anda - Anda dapat menyesuaikan ini sesuai dengan kebutuhan Anda
Selanjutnya, kita akan memberi style pada elemen
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_2
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
Oke, disinilah keajaiban terjadi. Jika kami menyetel
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_8 untuk menggulir, apa pun yang tidak sesuai dengan area pandang
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1 kami hanya akan dapat diakses dengan menggulir
Menyetel .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}0 ke .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}1 dan .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}2 ke .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}3 berarti bahwa jika kita melompat-tautan ke elemen anak mana pun dari
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}2, browser akan menggulir ke sana dengan lancar, bukan hanya langsung melompat ke elemen itu
Benar, selanjutnya mari kita gaya slide itu sendiri
.slide:nth-of-type(even) {background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
Cocokkan ukuran
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_3 menjadi sama dengan
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1. Tiga properti terakhir, .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}_7, .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}8, dan .slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}9, adalah kunci. Ini memastikan bahwa ketika kita melakukan jump-link ke slide tertentu, slide akan 'snap' ke tengah viewport slider
OK, sejauh ini kita punya ini
Lihat Pena di CodePen
Jika Anda mengklik di dalam penggeser, lalu tekan tombol panah, Anda akan melihat perilaku pengguliran dan gertakan yang mulus sedang beraksi
Tapi tentu saja kami tidak ingin pengguna kami harus melakukan ini. Kami ingin meletakkan beberapa tombol navigasi pada penggeser sebagai gantinya - dan kami mungkin juga harus menyingkirkan bilah gulir itu
Langkah 2 - Menambahkan tombol navigasi slider
Dalam HTML, saya telah menambahkan dua elemen .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}0 ke setiap slide
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
</div>
</div>
Perhatikan bahwa
- Yang mundur memiliki kelas .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}_1, dan yang maju memiliki kelas .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}2 - .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}_3 berisi tautan lompat ke slide yang ingin kita pindahkan. Anda harus mengatur ini secara manual
Sekarang untuk css
.slide a {position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
Anda dapat menata dan memposisikan tombol-tombol ini sesuai keinginan Anda - saya telah memilih untuk mengarahkan panah ke setiap arah. Terkadang opsi sederhana adalah yang terbaik - tetapi Anda dapat membuat pilihan sendiri
Langkah 3 - Menghapus scrollbar dengan CSS
.slider {width: 600px;
height: 400px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
cukup tambahkan .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}_4 ke .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}5. Ini juga memainkan radius perbatasan
Itu memberi kita ini
Lihat Pena di CodePen
Oke, cukup bagus - tetapi idealnya kita tidak ingin tombol dikunci pada setiap slide. Slider biasanya memiliki tombol yang terpasang di tempatnya
Tetapi apakah itu mungkin dengan CSS?
Kenapa iya
Langkah 4 - Memperbaiki tombol navigasi pada tempatnya
Kita tidak perlu mengubah HTML untuk ini, tetapi kita perlu memperbarui sedikit CSS kita
.slide a {background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: '';
z-index: 1;
background: none;
pointer-events: none;
}
OK jadi apa yang terjadi di sini? . Ini membuat tombol kami tidak terlihat secara efektif
Kemudian, kami telah menambahkan .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}_7 dan .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}8 pseudo elemen ke
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1. Ini memiliki gaya yang sama yang kita miliki sebelumnya pada elemen .slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}0 - panah sederhana yang bagus. Dan kami telah memposisikannya tepat di atas tombol kami yang sekarang tidak terlihat, dan menyetel <div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
</div>
</div>1 ke <div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
</div>
</div>2
Karena mereka dilampirkan ke elemen
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}_1 dan bukan
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}3, mereka akan tetap di tempatnya saat pengguna menggulir slide. Tetapi. ketika pengguna mengklik salah satunya, mereka sebenarnya mengklik tombol tak terlihat yang dilampirkan pada slide yang sebenarnya
Ini memberikan ilusi tombol navigasi tetap. Bagus kan?
Sepertinya ini
Lihat Pena di CodePen
Oke, sekarang kita punya penggeser CSS murni yang cukup bagus
Aha, saya mendengar Anda berkata, tapi bagaimana dengan remah roti, bisakah kita menambahkannya juga?
Senang Anda bertanya - ya kami bisa
Langkah 5 - Tambahkan remah roti ke penggeser
Untuk menambahkan remah roti ke penggeser, kami benar-benar menggunakan teknik yang sama yang baru saja kami lalui - hanya dengan cara yang sedikit berbeda
Setiap remah roti hanya akan menjadi tautan lompat lain yang menunjuk ke slide yang relevan, dan kami akan memposisikannya secara mutlak di elemen
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1
Jadi inilah HTML (letakkan ini di
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}1, di bawah elemen
.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}2)
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
Lihat? . Sekarang untuk menatanya
.slider__nav {box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
Sekali lagi, Anda bebas untuk menatanya sesuai keinginan hati Anda
Dan inilah hasil akhirnya
Lihat Pena di CodePen
Penggeser yang cukup keren, dan tidak ada JavaScript yang terlihat. Harapan itu berguna untuk Anda
Kesimpulan
Ini adalah trik berguna yang memungkinkan Anda membuat fungsi penggeser - bahkan untuk orang dengan JS dimatikan. Tapi tentu saja, tanpa JS, Anda benar-benar terbatas pada apa yang dapat Anda lakukan dan bagaimana Anda dapat mengintegrasikannya dengan situs Anda yang sudah ada.
Browser Anda tidak mendukung tag video
Jika Anda ingin memanfaatkan kekuatan JS untuk membuat penggeser halaman penuh yang indah, responsif, lihat halaman lengkap. js. Ini memiliki fungsi penggeser langsung dari kotaknya, dan termasuk dukungan untuk
- Navigasi remah roti - yang dapat Anda pindahkan dan gaya dengan mudah
- Autoplay - sehingga pengunjung Anda dapat melihat lebih banyak konten keren Anda meskipun mereka tidak mengklik tombol navigasi
- Lazy loading - percepat situs Anda hanya dengan memuat aset saat dibutuhkan
- Banyak, banyak lagi
Ini juga sangat mudah diatur - jadi cobalah
Dan jika Anda masih haus akan penggeser, dapatkan inspirasi dari daftar penggeser animasi yang luar biasa ini atau penggeser lainnya dengan penggeser Webflow yang keren