css 如何使用这种布局构建一个carousel组件

`我试图建立一个静态的HTML CSS网站，并试图通过js添加滑块功能。请告知如何接近
layout
我试着按照教程，他们要么不兼容我的布局或使用Swiper JS。
我尝试了swiper js，但很难设计它的组件，尤其是位置、颜色和其他东西。

<section class="section-customers wrapper">
        <div class="container caraseoul">
  

          <div class="slide">
            <img
              src="./images/customers/ryan-hoffman.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Ryan Hoffman</p>
              <p class="testimonial-status">
                <span>30 </span>kgs lost in 7 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/alexander.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Alexander Hamilton</p>
              <p class="testimonial-status">
                <span>10 </span>kgs lost in 2 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <button class="slider-btn slider-btn-right">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="btn-icon"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M8.25 4.5l7.5 7.5-7.5 7.5"
              />
            </svg>
          </button>
          <button class="slider-btn slider-btn-left">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="btn-icon"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.75 19.5L8.25 12l7.5-7.5"
              />
            </svg>
          </button>
        </div>
      </section>```

/* TESTIMONIAL SECTION CSS*/
.section-customers {
padding: 9.6rem 0;
background-color: #fed2d2;
}

.customer-img {
max-width: 100%;
height: 10rem;
width: 10rem;
border-radius: 50%;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.caraseoul {
display: flex;
gap: 4.8rem;
position: relative;
}

.testimonial {
color: black;
}

.slide {
display: flex;
flex-direction: column;
gap: 1.4rem;
align-items: center;
justify-content: center;
text-align: center;
padding: 5rem 0;
background-color: white;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.testimonial-text {
font-size: 1.2rem;
margin: 2rem;
margin-top: auto;
}

.testimonial-author {
font-size: 2rem;
font-weight: 400;
margin-bottom: 0.6rem;
color: navy;
}

.testimonial-status {
font-size: 1.8rem;
}

.testimonial-status span {
color: #a12222;
font-weight: 600;
}

.slider-btn {
position: absolute;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.8rem;
border: none;
}

.btn-icon {
height: 2.4rem;
width: 2.4rem;
stroke: #a12222;
}

.slider-btn-left {
left: -5%;
top: 50%;
transform: translate(0, -50%);
}
.slider-btn-right {
right: -10%;
top: 50%;
transform: translate(0, -50%);
}

你好第九师的队长，
你不需要任何东西，你需要使用的是SLICK-SLIDER。这是最好的和容易的图书馆，使滑块/转盘与更少的时间。在解决方案中，我只是使用CDN集成了Slick Slider，并尝试制作您想要的东西。
如果你使用slick-slider，那么你需要添加以下文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

在slick之前添加jQuery。js
然后你必须添加以下脚本来用途：

$('.className').slick({
dots: true, // for bottom dots
arrows: true, // for right/left arrow buttons
infinite: true, // whether you want too make loop infinite or not
loop: true, // for the loop
swipe: true, // slide using swipe 
autoplay: true, // want to slide automatic
autoplaySpeed: 2000, // autoplay slide after 2000 seconds
slidesToShow: 6, // how many slides to be displayed in screen
slidesToScroll: 3, // how many slides will be swipe/scrolled/slides
responsive: [ // this is for the responsive
 {
   breakpoint: 1400, // below 1400px screen resolution following settings will be applied
   settings: {
     slidesToShow: 5,
     slidesToScroll: 2
   }
]
});

如果你想了解更多关于Slick滑块然后点击下面的链接：https://kenwheeler.github.io/slick/
请参考此链接的现场演示，以了解详细信息。https://jsfiddle.net/qn6urw0o/8/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Carousel</title>
  <!-- slick.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <!-- custom style -->
  <style>
    .section-customers {
      padding: 9.6rem 0;
      background-color: #fed2d2;
    }
    
    .customer-img {
      height: 10rem;
      width: 10rem;
      max-width: 100%;
      border-radius: 50%;
      box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    }
    
    .caraseoul {
      display: flex;
      gap: 4.8rem;
      position: relative;
    }
    
    .testimonial {
      color: black;
    }
    
    .slide {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 0;
      background-color: white;
      border-radius: 6px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      margin: 1rem;
    }
    
    .testimonial-text {
      font-size: 1.2rem;
      margin: 2rem;
      margin-top: auto;
    }
    
    .testimonial-author {
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 0.6rem;
      color: navy;
    }
    
    .testimonial-status {
      font-size: 1.8rem;
    }
    
    .testimonial-status span {
      color: #a12222;
      font-weight: 600;
    }
    
    .slick-next,
    .slick-prev {
      border-radius: 50%;
      color: #a12222;
      z-index: 99999999999;
      width: max-content;
      height: max-content;
    }
    
    .slick-next {
      right: 20px;
    }
    
    .slick-prev {
      left: 20px;
    }
    
    .slick-next:before,
    .slick-prev:before {
      width: 50px;
      height: 50px;
      display: block;
      border-radius: 50%;
      background-color: #fff;
      font-size: 50px;
      background-color: #a12222;
    }
    
    .slick-next::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>');
      stroke: #a12222;
      color: #a12222;
    }
    
    .slick-prev::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>');
      stroke: #a12222;
      color: #a12222;
    }
  </style>

</head>

<body>
  <section class="section-customers wrapper">
    <div class="container">
      <div class="caraseoul">
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/RLdcScGQEJ4" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>10 </span>kgs lost in 2 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/RLdcScGQEJ4" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">A Joshi</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">R Makwana</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/mEZ3PoFGs_k" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">P Kamble</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/mEZ3PoFGs_k" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
  <!-- slick.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $('.caraseoul').slick({
      dots: true,
      arrows: true,
      infinite: true,
      loop: true,
      speed: 1000,
      swipe: true,
      autoplay: true,
      autoplaySpeed: 2000,
      slidesToShow: 6,
      slidesToScroll: 3,
      responsive: [{
          breakpoint: 1400,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 1300,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 1100,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 800,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 600,
          settings: {
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>

</body>

</html>

css 如何使用这种布局构建一个carousel组件

1条答案

相关问题

热门标签

最新问答