0

嘿，我想创建类似于图像但不使用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 的情况下创建类似图像的内容并在底部添加导航底部

4

1 回答 1

0

您可以使用纯 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>

于 2021-07-21T18:43:36.197 回答