БЛОГ НА HUSL


Как можно сделать аналогичный слайд используя только css?

Автор вопроса: Anastasia 

.testimonials{
background-color: #5C3249;
position: relative;
}
.slider{
  position: relative;
  width: 741px;
  height: 490px;
  overflow: hidden;
  display: flex;


}
.images{
  display: flex;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  img{
    transition: all 0.3s ease;
  }
  input{
    display: none;
  }

}

.dots{
  display: flex;
  justify-content: center;
  margin: 31px;
  label{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: solid #7E5D6F;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
    &:hover{
      background-color: #7E5D6F;
    }
  }
}
#img1:checked ~ .m1{
  margin-left: 0;
}
#img2:checked ~ .m2{
  margin-left: -100%;
}
#img3:checked ~ .m3{
  margin-left: -200%;
}
#img4:checked ~ .m4{
  margin-left: -300%;
}
<section class="testimonials">
   <div class="slider">
    <div class="images">
      <input type="radio" name="slide" id="img1" checked>
      <input type="radio" name="slide" id="img2">
      <input type="radio" name="slide" id="img3">
      <input type="radio" name="slide" id="img4">

      <img src="./img/bg.png" class="m1" alt="img1">
      <img src="./img/istockphoto-1346944001-612x612.jpg" class="m2"  alt="img2">
      <img src="./img/O6PHIU0_o8yqok.jpg" class="m3"  alt="img3">
      <img src="./img/rozovye-ochki-v-mlm-678x381.jpg" class="m4" alt="img4">
    </div>
    <div class="slider-content"></div>
    <div class="dots">
      <label for="img1"></label>
      <label for="img2"></label>
      <label for="img3"></label>
      <label for="img4"></label>
    </div>
   </div>
</section>

введите сюда описание изображения Возможно ли вообще сделать такое без использования JS? Вот как я сделала, не понимаю почему не видно кнопок для переключения слайдов, также не понимаю как сделать так чтобы при переключении слайда менялась картинка и бордовая часть с текстом. Если есть идеи как сделать с JS можете пожалуйста не сильно сложно написать, если это возможно) Кнопки переключения слайдов работают криво и картинки становятся не ровно


Источник

Ответы (2 шт):

Автор решения: darinka poznyak

Предложу вот такой вариант слайдера, созданного при помощи фреймворка bootstrap

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div class="container bg-dark">
    <div id="carouselExampleIndicators" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card mb-3 bg-danger mx-auto" style="max-width: 400px;">
            <div class="row g-0">
              <div class="col-md-6">
                <img src="https://news.am/img/news/72/16/00/default.jpg" class="img-fluid rounded-start" alt="#">
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <p class="card-text">Lorem ipsum dolor sit amet, consecte tuer adipiscing elit. Lorem ipsum dolor sit amet, consecte tuer adipiscing elit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card mb-3 bg-success mx-auto" style="max-width: 400px;">
            <div class="row g-0">
              <div class="col-md-6">
                <img src="https://pravdy-10.ru/media/k2/items/cache/f66da0157e88ccf3deb2fbdbfc220fe0_M.jpg" class="img-fluid rounded-start" alt="#">
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <p class="card-text">Lorem ipsum dolor sit amet, consecte tuer adipiscing elit. Lorem ipsum dolor sit amet, consecte tuer adipiscing elit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card mb-3 bg-warning mx-auto" style="max-width: 400px;">
            <div class="row g-0">
              <div class="col-md-6">
                <img src="https://s-narodom.ru/wp-content/uploads/posts/2019-03/1553771488_1.jpg" class="img-fluid rounded-start" alt="#">
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <p class="card-text">Lorem ipsum dolor sit amet, consecte tuer adipiscing elit. Lorem ipsum dolor sit amet, consecte tuer adipiscing elit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card mb-3 bg-info mx-auto" style="max-width: 400px;">
            <div class="row g-0">
              <div class="col-md-6">
                <img src="https://static.smartafisha.ru/photo/training/23/29/232998/photo_preview_1787161_59e373955b932.jpg" class="img-fluid rounded-start" alt="#">
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <p class="card-text">Lorem ipsum dolor sit amet, consecte tuer adipiscing elit. Lorem ipsum dolor sit amet, consecte tuer adipiscing elit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Предыдущий</span>
  </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Следующий</span>
  </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

И в компьютерной версии смотрится хорошо, и в мобильной версии неплохо

→ Ссылка
Автор решения: Grundy

Так как картинка и текст связаны - их стоит поместить в отдельный блок

<div class="item m1">
    <img src="https://placehold.co/400x400?text=1" alt="img2">
    <div class="item-content">text 1</div>
</div>

Далее из таких блоков собрать список

<div class="items">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

И уже этот блок двигать в зависимости от выбранной радиокнопки.

Для этого радио и блок items должны быть на одном уровне

<input type="radio" name="slide" id="img1" checked>
<input type="radio" name="slide" id="img2">
<input type="radio" name="slide" id="img3">
<input type="radio" name="slide" id="img4">
...
<div class="items">

В это случае подход с селектором ~ будет работать.

Остается лишь добавить кнопки управления и правильно их позиционировать.

Пример:

.testimonials {
  position: relative;
}

.slider {
  position: relative;
  width: 541px;
  height: 490px;
  overflow: hidden;
  color: white;
}

.slider input {
  display: none;
}

.m1 {
  background-color: #5C3249;
}

.m2 {
  background-color: red;
}

.m3 {
  background-color: blue;
}

.m4 {
  background-color: green;
}

.items {
  display: flex;
  transition: all 0.3s ease;
  img {
    object-position: center;
    object-fit: cover;
    max-width: 50%;
  }
}

.item {
  display: flex;
  flex: 1 0 100%;
}

.dots {
  display: flex;
  justify-content: center;
  margin: 31px;
  order: 1;
  label {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: solid #7E5D6F;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
    &:hover {
      background-color: #7E5D6F;
    }
  }
}

#img1:checked~.items {
  transform: translateX(0);
}

#img2:checked~.items {
  transform: translateX(-100%);
}

#img3:checked~.items {
  transform: translateX(-200%);
}

#img4:checked~.items {
  transform: translateX(-300%);
}

#img1:checked~.dots .l1 {
  background-color: #7E5D6F;
}

#img2:checked~.dots .l2 {
  background-color: #7E5D6F;
}

#img3:checked~.dots .l3 {
  background-color: #7E5D6F;
}

#img4:checked~.dots .l4 {
  background-color: #7E5D6F;
}
<section class="testimonials">
  <div class="slider">
    <input type="radio" name="slide" id="img1" checked>
    <input type="radio" name="slide" id="img2">
    <input type="radio" name="slide" id="img3">
    <input type="radio" name="slide" id="img4">

    <div class="items">
      <div class="item m1">
        <img src="https://placehold.co/400x400?text=1" alt="img2">
        <div class="item-content">text 1</div>
      </div>
      <div class="item m2">
        <img src="https://placehold.co/400x400?text=2" alt="img2">
        <div class="item-content">text 2</div>
      </div>
      <div class="item m3">
        <img src="https://placehold.co/400x400?text=3" alt="img3">
        <div class="item-content">text 3</div>
      </div>
      <div class="item m4">
        <img src="https://placehold.co/400x400?text=4" alt="img4">
        <div class="item-content">text 4</div>
      </div>
    </div>
    <div class="dots">
      <label for="img1" class="l1"></label>
      <label for="img2" class="l2"></label>
      <label for="img3" class="l3"></label>
      <label for="img4" class="l4"></label>
    </div>
  </div>


</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.