Javascript 我正在尝试复制这个图像旋转木马，我在样式上有问题

我试图用这段代码复制旋转木马，但按钮无法显示图像的外观，我对代码也不是很确定，因为它需要响应并在不同的屏幕上工作

CSS

HTML

---

对于旋转木马，您必须在其shildren中设置旋转木马的最大宽度和高度

您可以查看我的演示，在这里，我使用vanila JS通过html/css实现了旋转木马：

为了未来

在每个节点上设置alt-width-height属性

Lorem Ipsum dolore测试内容在此处和此处（如果有）

此处为名称，此处为位置

Lorem Ipsum dolore测试内容在此处和此处（如果有）

此处为名称，此处为位置

Lorem Ipsum dolore测试内容在此处和此处（如果有）

此处为名称，此处为位置

Lorem Ipsum dolore测试内容在此处和此处（如果有）

此处为名称，此处为位置

&8249; &8815; var btnNext=document.querySelector'.next.button'； var prevNext=document.querySelector'.prev.button'； var firstSlider=document.querySelector'.slider:第一个子'； var OFFSET_STEP_PX=parseIntwindow.getComputedStylefirstSlider.width，10； var OFFSET_MIN=0； var OFFSET_MAX=document.queryselectoral'.slider'.length-1*偏移量\u步长\u PX； 无功电流偏移量px=0； 函数setOffsetGroup{ console.logOFFSET_MAX 托普？ 当前偏移量px+=偏移量步骤px： 当前偏移量px-=偏移量步进量px； validateOffset//不超过 firstSlider.style.marginLeft='-'+当前偏移量px+'px'； } 函数验证偏移{ btnNext.disabled=false prevNext.disabled=false 如果当前偏移量>偏移量最大值{ 当前偏移量=最大偏移量 btnNext.disabled=true }否则，如果当前偏移量px<偏移量MIN{ 当前偏移量=偏移量最小值 prevNext.disabled=true } } btnNext.addEventListener'click'函数{ 塞托菲特鲁 } prevNext.addEventListener'click'函数{ setOffsetfalse } 旋转木马{ 位置：相对位置； 最大宽度：1000px； 最大高度：300px；/*类似于.滑块的高度*/ 溢出：隐藏； } /*将按钮置于中间*/ .按钮{ 位置：绝对位置； 最高：50%； 左：0； 转化：translateY-50%； } .按钮，下一个{ 左：自动； 右：0； } .滑块{ 高度：300px； 宽度：300px； 过渡：边缘0.3s； } .滑块{ 显示：内联块； 保证金：1px； } .幻灯片{ 宽度：300px； 高度：130像素； } .carouselInput1{ 宽度：300px； 高度：67px； 字号：18px； 线高：22px； 颜色：313133； 字体系列：Arial； 字体大小：粗体； } .carouselInput2{ 宽度：260px； 高度：19px； 字体大小：14px； 线高：22px； 颜色：000000； 字体系列：Arial； }

---

你的问题要更具体一些。你不清楚你的问题。我的代码没有完全复制图像，我想问是否有人可以帮助改进代码，使其看起来像是Samethan。谢谢你，你的代码很清晰，谢谢你的建议，我将在谷歌上搜索更多关于flex的信息

.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";
}

<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>