创建响应式推荐滑块纯 html css javascript答案

【问题标题】：create responsive testimonials slider pure html css javascript创建响应式推荐滑块纯 html css javascript
【发布时间】：2021-02-02 10:43:12
【问题描述】：

嘿，我想创建类似于图像但不使用swiperjs 或任何东西的响应式推荐滑块。如果有人可以帮助我，请只是纯 html css javascript

我已经在这里创建了我的代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         :root {
            --first_color: #15241c;
            --second-color: #09382f;
            --third-color: #FF882E;
            --fourth-color:#E55E2E;
            --fifth-color:#F8F1E0;
            --sixth-color : #EC9937;
        }

        .Testimonials {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            max-width: 100%;
            margin: 40px 0px;
        }

        .Testimonials_title h2 {
            font-size: 42px;
            letter-spacing: -2px;
            font-weight: 700;
            letter-spacing: 0;
            margin-bottom: 30px;
            text-align: center;
            color: var(--first_color);
        }

        .Testimonials_title>p {
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 40px;
            font-weight: 300;
            text-align: center;

        }


        .testimonials_container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            position: relative;
        }


        .testimonials_container_center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .testimonials_content {
            position: relative;
            transition: all .3s ease-in-out;
            transform: scale(0.9);
            opacity: 0.9;
        }

        .testimonials_avatar {
            position: absolute;
            left: 50%;
            top: -30px;
            width: 90px;
            height: 90px;
            margin-left: -45px;
            z-index: 1;
        }

        .testimonials_avatar img {
            width: 90px;
            height: 90px;
            border-radius: 100%;
            border: 6px solid #fff;
            box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
        }

        .testimonials_text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 75px 50px 75px;
            overflow: hidden;
            background: var(--third-color);
            border: 1ps solid #f1f1f1;
            border-radius: 10px;
            transition: all .3s ease-in-out;
        }

        .testimonials_text_after {
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            position: absolute;
            color: var(--fifth-color);
            opacity: .3;
            font-size: 35px;
            transition: all 400ms linear;
            bottom: 25px;
            right: 30px;
        }

        .testimonials_text_before {
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            position: absolute;
            color: var(--fifth-color);
            opacity: .3;
            font-size: 35px;
            transition: all 400ms linear;
            top: 25px;
            left: 30px;
        }


        .testimonials_text p {
            color: var(--second-color);
            font-size: 14px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-style: italic;
            line-height: 24px;
            padding-bottom: 10px;
            font-weight: 500;
        }

        .testimonials_information h3 {
            font-weight: 600;
            color: var(--second-color);
            ;
            font-size: 18px;
        }

        .testimonials_information h4 {
            font-weight: 400;
            font-size: 12px;
            padding-top: 6px;
            color: var(--second-color);
            ;
        }

        .testimonials_container_center .active {
            opacity: 1;
            transform: scale(1.0);
            width: 100%;
            flex-grow: 6;
        }

        .testimonials_container_center .active .testimonials_text {
            background: var(--fourth-color);
            box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
        }

        .listing-carousel-button {
            position: relative;
            width: 80px;
            height: 50px;
            z-index: 1;
            cursor: pointer;
            background: var(--second-color);
            box-shadow: 0 9px 26px rgba(58, 87, 135, 0.45);
            transition: all 200ms linear;
            outline: none;
        }

        .listing-carousel-button.listing-carousel-button-next {
            padding-right: 20px;
            border-radius: 60px 0 0 60px;
        }

        .listing-carousel-button.listing-carousel-button-prev {
            padding-left: 20px;
            border-radius: 0 60px 60px 0;
        }

        .listing-carousel-button.listing-carousel-button-next:hover {
            right: -15px;
            background: rgba(6, 27, 65, 0.4);
        }

        .listing-carousel-button.listing-carousel-button-prev:hover {
            left: -15px;
            background: rgba(6, 27, 65, 0.4);
        }
    </style>
</head>

<body>
    <section id="Testimonials">
        <div class="Testimonials_top">
            <div class="Testimonials_title">
                <h2>Testimonials</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
        <div class="Testimonials_bottom">
            <div class="testimonials_container">
                <div class="testimonials_container_left">
                    <div class="listing-carousel-button listing-carousel-button-prev"><i class="fa fa-caret-left"
                            style="color: #fff"></i></div>
                </div>

                <div class="testimonials_container_center">
                    <div class="testimonials_content">
                        <div class="testimonials_avatar">
                            <img src="61784903_2448694432083814_109523087682174976_n.jpg" alt="">
                        </div>

                        <div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>

                        <div class="testimonials_text">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <div class="testimonials_information">
                                <h3>John Doe</h3>
                                <h4>Owner</h4>
                            </div>
                        </div>
                        <div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
                    </div>

                    <div class="testimonials_content active">
                        <div class="testimonials_avatar">
                            <img src="144937396_125411896111709_8005138515258577341_n.jpg" alt="">
                        </div>

                        <div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>

                        <div class="testimonials_text">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <div class="testimonials_information">
                                <h3>John Doe</h3>
                                <h4>Owner</h4>
                            </div>
                        </div>
                        <div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
                    </div>

                    <div class="testimonials_content">
                        <div class="testimonials_avatar">
                            <img src="144739297_237956884645857_999009321808421704_n.jpg" alt="">
                        </div>

                        <div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>

                        <div class="testimonials_text">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>

                            <div class="testimonials_information">
                                <h3>John Doe</h3>
                                <h4>Owner</h4>
                            </div>
                        </div>
                        <div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
                    </div>
                </div>

                <div class="testimonials_container_right">
                    <div class="listing-carousel-button listing-carousel-button-next"><i class="fa fa-caret-right"
                            style="color: #fff"></i></div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

如果有人可以帮助请在不使用纯 html css javascript 的情况下创建类似图像的内容并在底部添加导航底部

【问题讨论】：

当你搜索纯 CSS 轮播时，谷歌没有找到任何东西？
不，我唯一看到的是 swiper js
你确定吗？ pasteboard.co/JMus9JM.png
我已经知道这不是我想要的^^'
你永远不会在谷歌中找到你想要的。您应该选择您在 google 上找到的最接近的代码，并尝试修改代码，然后一旦您无法成功执行某项操作，请在此处发布并解释您遇到的问题。我建议将您的代码放在 codepen 中或创建一个小提琴并按照此处的说明进行操作 stackoverflow.com/help/how-to-ask

标签： slider testimonials

【解决方案1】：

您可以使用纯 HTML、CSS、JavaScript 创建响应式推荐滑块。

根据你的滑块结构实现即可：

在此处查看工作示例：https://jsfiddle.net/Hamzailyas434/gcwxf1pt/6/

// Slider
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');

  let curSlide = 0;
  const maxSlide = slides.length;

  // Functions
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML(
        'beforeend',
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  const activateDot = function (slide) {
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));

    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

  const goToSlide = function (slide) {
    slides.forEach(
      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
    );
  };

  // Next slide
  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else {
      curSlide++;
    }

    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const init = function () {
    goToSlide(0);
    createDots();

    activateDot(0);
  };
  init();

  // Event handlers
  btnRight.addEventListener('click', nextSlide);
  btnLeft.addEventListener('click', prevSlide);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft') prevSlide();
    e.key === 'ArrowRight' && nextSlide();
  });

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #444;
  line-height: 1.9;
  background-color: #f3f3f3;
}
/* SLIDER */
.slider {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slide > img {
  /* Only for images that have different size than slide */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;

  border: none;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  color: #333;
  border-radius: 50%;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 6%;
  transform: translate(50%, -50%);
}

.dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #b9b9b9;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;

  /* Only necessary when overlying images */
  /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  /* background-color: #fff; */
  background-color: #888;
  opacity: 1;
}

/* TESTIMONIALS */
.testimonial {
  width: 65%;
  position: relative;
}

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -5.7rem;
  left: -6.8rem;
  line-height: 1;
  font-size: 20rem;
  font-family: inherit;
  color: var(--color-primary);
  z-index: -1;
}

.testimonial__header {
  font-size: 2.25rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.testimonial__text {
  font-size: 1.7rem;
  margin-bottom: 3.5rem;
  color: #666;
}

.testimonial__author {
  margin-left: 3rem;
  font-style: normal;

  display: grid;
  grid-template-columns: 6.5rem 1fr;
  column-gap: 2rem;
}

.testimonial__photo {
  grid-row: 1 / span 2;
  width: 6.5rem;
  border-radius: 50%;
}

.testimonial__name {
  font-size: 1.7rem;
  font-weight: 500;
  align-self: end;
  margin: 0;
}

.testimonial__location {
  font-size: 1.5rem;
}

.section__title--testimonials {
  margin-bottom: 4rem;
}

 <section class="section" id="section--3">
  
      <div class="slider">
        <div class="slide slide--1">
          <div class="testimonial">
            <h5 class="testimonial__header">Best financial decision ever!</h5>
            <blockquote class="testimonial__text">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Accusantium quas quisquam non? Quas voluptate nulla minima
              deleniti optio ullam nesciunt, numquam corporis et asperiores
              laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
              id alias reiciendis, perferendis facere pariatur dolore veniam
              autem esse non voluptatem saepe provident nihil molestiae.
            </blockquote>
            <address class="testimonial__author">
              <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
              <h6 class="testimonial__name">Aarav Lynn</h6>
              <p class="testimonial__location">San Francisco, USA</p>
            </address>
          </div>
        </div>

        <div class="slide slide--2">
          <div class="testimonial">
            <h5 class="testimonial__header">
              The last step to becoming a complete minimalist
            </h5>
            <blockquote class="testimonial__text">
              Quisquam itaque deserunt ullam, quia ea repellendus provident,
              ducimus neque ipsam modi voluptatibus doloremque, corrupti
              laborum. Incidunt numquam perferendis veritatis neque repellendus.
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
              deserunt exercitationem deleniti.
            </blockquote>
            <address class="testimonial__author">
              <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
              <h6 class="testimonial__name">Miyah Miles</h6>
              <p class="testimonial__location">London, UK</p>
            </address>
          </div>
        </div>

        <div class="slide slide--3">
          <div class="testimonial">
            <h5 class="testimonial__header">
              Finally free from old-school banks
            </h5>
            <blockquote class="testimonial__text">
              Debitis, nihil sit minus suscipit magni aperiam vel tenetur
              incidunt commodi architecto numquam omnis nulla autem,
              necessitatibus blanditiis modi similique quidem. Odio aliquam
              culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
              deleniti saepe aliquid quos inventore sequi. Necessitatibus id
              alias reiciendis, perferendis facere.
            </blockquote>
            <address class="testimonial__author">
              <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
              <h6 class="testimonial__name">Francisco Gomes</h6>
              <p class="testimonial__location">Lisbon, Portugal</p>
            </address>
          </div>
        </div>

        <!-- <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
        <div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
        <div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
        <div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> -->
        <button class="slider__btn slider__btn--left">&larr;</button>
        <button class="slider__btn slider__btn--right">&rarr;</button>
        <div class="dots"></div>
      </div>
    </section>

【讨论】：