search

Bagaimana cara membuat penggeser gambar hanya dalam html dan css?

1 years ago
Komentar: 0
Dibaca: 30

Saya tahu apa yang Anda pikirkan. "Apa maksudmu, buat slider hanya dengan CSS. Tentunya Anda memerlukan JavaScript untuk mengontrol perilaku penggeser?"

Show

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

.slides {
    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-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>

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)

<div class="slider__nav">
    <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

Bagaimana cara menggeser gambar dalam HTML menggunakan CSS?

Contoh .
.
.

Bagaimana Anda membuat slider yang berfungsi di HTML dan CSS?

Kita akan menjelajahi setiap konsep selangkah demi selangkah dan mengapa kita melakukan apa yang sedang kita lakukan. .
Langkah 1. Buat Tata Letak Dasar Penggeser Gambar menggunakan Kode HTML. .
Langkah 2. Tambahkan Tombol Sebelumnya dan Berikutnya. .
Langkah 3. Tambahkan Gambar dan Teks yang Diperlukan ke Penggeser. .
Langkah 4. Aktifkan Dua Tombol menggunakan Kode JavaScript

Bagaimana cara membuat slider tanpa JavaScript?

Tambahkan pembungkus dengan input radio dan slide agar memiliki dua slide. .
Anda harus menambahkan dua input
input untuk slide pertama harus memiliki atribut yang diperiksa ditambahkan
Anda harus menambahkan "nama" yang sama ke semua masukan sehingga hanya satu yang dapat diperiksa pada waktu yang sama
Anda dapat menambahkan gambar, teks, atau keduanya bersama-sama di dalam slide

Bagaimana saya bisa membuat banyak penggeser gambar dalam HTML dan CSS?

.

kode html

Pos Terkait

Cara menggunakan freecodecamp python projects
Cara menggunakan freecodecamp python projects

Bagaimana Anda menyesuaikan kurva non linier dengan python?
Bagaimana Anda menyesuaikan kurva non linier dengan python?

Cara menggunakan wordpress text codes
Cara menggunakan wordpress text codes

Cara menggunakan python mysql connector download
Cara menggunakan python mysql connector download

Cara menggunakan image button javascript
Cara menggunakan image button javascript

Bagaimana cara mendownload data sap di excel?
Bagaimana cara mendownload data sap di excel?

Bagaimana saya bisa tahu login dan kata sandi saya di php?
Bagaimana saya bisa tahu login dan kata sandi saya di php?

Apa itu private pada php?
Apa itu private pada php?

Cara menggunakan php ini file download
Cara menggunakan php ini file download

Cara menyimpan textedit sebagai html
Cara menyimpan textedit sebagai html

Periklanan

BERITA TERKINI

Cara menggunakan mysql timestamp from string
1 years ago . by ShavenBrainstorming
Langkah langkah membuat web menggunakan HTML dan CSS?
1 years ago . by OverheatedCabbage
Bagaimana cara mengonversi file txt ke google sheets?
1 years ago . by DeprivedAppeasement
Bagaimana Anda mengganti huruf tertentu dengan python?
1 years ago . by FunctioningApartheid
Apa upaya kita untuk mengatasi krisis air bersih?
1 years ago . by BeardedAnnoyance
Bagaimana cara membekukan area yang dipilih di excel?
1 years ago . by CrackingMolasses
Bagaimana Anda mengonversi bilangan bulat negatif menjadi byte dengan python?
1 years ago . by Wage-priceAccomplice
Apakah infeksi bakteri pada Miss V bisa sembuh sendiri?
1 years ago . by FrayedDaddy
Database mana yang digunakan di phpmyadmin?
1 years ago . by ParamountCounselor
Cara menggunakan semua jenis acara javascript
1 years ago . by CondemnedMirth

Toplist Popular

#1
Top 7 unterschied griechischer joghurt und joghurt griechischer art 2022
1 years ago
#2
Top 9 ibc container 600 liter gebraucht 2022
1 years ago
#3
Top 7 excel hintergrundfarbe auslesen ohne vba 2022
1 years ago
#4
Top 6 dji mavic air 2 wann welcher filter 2022
1 years ago
#5
Top 7 rosen schwarze flecken am stiel 2022
1 years ago
#6
Top 8 wann wird es wieder später dunkel 2022 2022
1 years ago
#7
Top 6 em nome do pai em nome do filho 2022
1 years ago
#8
Top 8 zdf neben der spur -- erlöse mich 2022
1 years ago
#9
Top 8 como melhorar dor no calcanhar 2022
1 years ago
#10
Top 7 vinho é bom para pressão alta 2022
1 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeendejahikoptzhth
Copyright © 2024 ketajaman Inc.