Question

我尝试使用此代码复制轮播，但是按钮不具有图像的外观，并且我不太确定代码，因为它需要响应并在不同的屏幕上工作。

CSS

.slider {
  display: inline-block;
  margin: 1px;
}

.slide {
  width: 300px;
  height: 130px;
}

.carouselInput1 {
  width: 300px;
  height: 67px;
  font-size: 18px;
  line-height: 22px;
  color: #313133;
  font-family: "Arial";
  font-weight: bold;
}

.carouselInput2 {
  width: 260px;
  height: 19px;
  font-size: 14px;
  line-height: 22px;
  color: #000000;
  font-family: "Arial";
}

HTML

<div id="carousel">
      <div class="slider">
        <button class= "next button">&#8249; </button>
        <img class="slide" src="../assets/Picture1.jpg"/>
          <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
          <p class="carouselInput2">Name here, Location here</p>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture2.jpg"/>
        <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
        <p class="carouselInput2">Name here, Location here</p>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture3.jpg"/>
        <div class="carouselInput">
          <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
          <p class="carouselInput2">Name here, Location here</p>
        </div>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture4.jpg"/>
        <div class="carouselInput">
          <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
          <p class="carouselInput2">Name here, Location here</p>
        </div>
</div>

Answer 1

对于旋转木马，必须在他的小孩子中设置旋转木马的最大宽度和高度。

您可以查看我的演示，其中我通过使用vanila JS的html / css实现了轮播：https://codepen.io/GTech1256/pen/GRKaNLY

面向未来

在每个alt上设置width height <img>属性
如果可以，请使用flex而不是inline-block
标记p (.carouselInput1)默认继承font，因此您只能在font上设置body

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="carousel">
      <div class="slider">
        <img class="slide" src="../assets/Picture1.jpg" alt="picture description" width="300" height="100"/>
        <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
        <p class="carouselInput2">Name here, Location here</p>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture2.jpg" alt="picture description" width="300" height="100"/>
        <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
        <p class="carouselInput2">Name here, Location here</p>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture3.jpg" alt="picture description" width="300" height="100"/>
        <div class="carouselInput">
          <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
          <p class="carouselInput2">Name here, Location here</p>
        </div>
      </div>
      <div class="slider">
        <img class="slide" src="../assets/Picture4.jpg" alt="picture description" width="300" height="100"/>
        <div class="carouselInput">
          <p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
          <p class="carouselInput2">Name here, Location here</p>
        </div>
       <button class="prev button" disabled>&#8249;</button>
      <button class="next button">&#8815;</button>
    </div>

      <script>
        var btnNext = document.querySelector('.next.button');
        var prevNext = document.querySelector('.prev.button');
        var firstSlider = document.querySelector('.slider:first-child');

        var OFFSET_STEP_PX = parseInt(window.getComputedStyle(firstSlider).width, 10);
        var OFFSET_MIN = 0;
        var OFFSET_MAX = (document.querySelectorAll('.slider').length - 1) * OFFSET_STEP_PX;
        var current_offset_px = 0;

        function setOffset(toUp) {
          console.log(OFFSET_MAX)
          toUp ? 
            current_offset_px += OFFSET_STEP_PX : 
            current_offset_px -= OFFSET_STEP_PX;

          validateOffset() // does not go beyond

          firstSlider.style.marginLeft = '-' + current_offset_px + 'px';
        }

        function validateOffset() {
          btnNext.disabled = false
          prevNext.disabled = false

          if (current_offset_px > OFFSET_MAX) {
            current_offset_px = OFFSET_MAX
            btnNext.disabled = true
          } else if (current_offset_px < OFFSET_MIN) {
            current_offset_px = OFFSET_MIN
            prevNext.disabled = true
          }
        }

        btnNext.addEventListener('click', function() {
          setOffset(true)
        })
        prevNext.addEventListener('click', function() {
          setOffset(false)
        })
      </script>
    <style>
    #carousel {
      position: relative;
      max-width: 1000px;
      max-height: 300px; /* like height of .slider */
      overflow: hidden;
    }

    /* set button on center */
    .button {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .button.next {
      left: auto;
      right: 0;
    }

    .slider {
      height: 300px;
      width: 300px;

      transition: margin 0.3s;
    }



    .slider {
      display: inline-block;
      margin: 1px;
    }

    .slide {
      width: 300px;
      height: 130px;
    }

    .carouselInput1 {
      width: 300px;
      height: 67px;
      font-size: 18px;
      line-height: 22px;
      color: #313133;
      font-family: "Arial";
      font-weight: bold;
    }

    .carouselInput2 {
      width: 260px;
      height: 19px;
      font-size: 14px;
      line-height: 22px;
      color: #000000;
      font-family: "Arial";
    }
    </style>
    </body>
</html>

我正在尝试复制此图像轮播，但样式存在问题

1 个答案: