Saya mengalami masalah yang mengganggu kemampuan saya untuk melanjutkan. Saya memiliki korsel/slider lebar penuh sederhana di bawah navbar saya, tetapi karena menggunakan pemosisian absolut, itu mengacaukan aliran sisa halaman di bawahnya (div bersembunyi di bawahnya). Saya mencoba menggunakan div hantu pada ketinggian yang cocok untuk mengoreksi ketinggian area yang tidak mengalir, tetapi ketika diturunkan ke ukuran seluler, itu tidak berfungsi dengan gaya responsif saya karena ketinggian variabel (di mana teks menentukan ketinggian).

Saya ingin mencari alternatif yang tidak memerlukan pemosisian absolut, jika memungkinkan, karena ini akan memungkinkan saya untuk menjaga sisa pekerjaan saya apa adanya dan menjaga fitur responsif tetap berfungsi. Ditambah lagi, saya bukan penggemar posisi absolut kecuali benar-benar diperlukan. ;)

Saat ini, saya menggunakan pemosisian absolut dan overflow:hidden; untuk menyejajarkan 4 div "slider" di samping satu sama lain.. menggunakan left:100%;, left:200%;, dll.

Saya ingin menemukan cara untuk menyejajarkan 4 div (masing-masing lebar 100%, dengan total lebar 400%) berdampingan, dengan overflow tersembunyi, sehingga penggeser saya akan tetap berfungsi sama, tetapi tanpa menggunakan pemosisian absolut . Sebaiknya hanya menggunakan CSS.

Berikut adalah bagian yang relevan dari CSS, dan HTML (tidak yakin apakah semuanya relevan):

/* SLIDER CONTAINER */

.css-slider-wrapper {
  overflow: hidden;
}


/* SLIDERS */

.slider {
  width: 100%;
  position: absolute;
  left: 0;
  top: 68px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.slide-1 {
  left: 0;
}

.slide-2 {
  left: 100%
}

.slide-3 {
  left: 200%
}

.slide-4 {
  left: 300%;
}

.slider {
  display: flex;
  justify-content: flex-start;
}
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">


  <!-- Slider #1 -->
  <div class="slider slide-1">CONTENT</div>

  <!-- Slider #2 -->
  <div class="slider slide-2">CONTENT</div>

  <!-- Slider #3 -->
  <div class="slider slide-3">CONTENT</div>

  <!-- Slider #4 -->
  <div class="slider slide-4">CONTENT</div>

  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>

</div>

Terima kasih atas waktu dan bantuan Anda!

1
northfacing23 30 Mei 2020, 08:47

1 menjawab

Jawaban Terbaik

Bungkus penggeser dengan flexbox (.sliders-container), dan atur kelenturan setiap penggeser ke flex: 0 0 100vw; (jangan membesar, jangan menyusut, lebar layar ukuran dasar.

body {
  margin: 0;
}

/* SLIDER CONTAINER */

.css-slider-wrapper {
  /** overflow: hidden; **/
}

.sliders-container {
  display: flex;
  height: 90vh;
}

/* SLIDERS */

.slider {
  display: flex;
  flex: 0 0 100vw;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.slide-1 {
  background: red;
}

.slide-2 {
  background: blue;
}

.slide-3 {
  background: green;
}

.slide-4 {
  background: yellow;
}

.slider {
  display: flex;
  justify-content: flex-start;
}
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">

  <div class="sliders-container">
    <!-- Slider #1 -->
    <div class="slider slide-1">CONTENT</div>

    <!-- Slider #2 -->
    <div class="slider slide-2">CONTENT</div>

    <!-- Slider #3 -->
    <div class="slider slide-3">CONTENT</div>

    <!-- Slider #4 -->
    <div class="slider slide-4">CONTENT</div>
  </div>

  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>

</div>
0
Ori Drori 30 Mei 2020, 06:11