滑块/转盘尺寸

debugcn 发表于 Dev

docSlv

我只是在以下站点的帮助下制作了一个滑块：https : //la-cascade.io/un-carrousel-responsif-en-pur-css/。

它工作得很好，只是在我的网站上太大了，我真的很想提供修改，但是我做不到，有人知道该怎么做

我的CSS：

@keyframes slidy {
 0% { left: 0%; }
   20% { left: 0%; }
    25% { left: -100%; }
     45% { left: -100%; }
       50% { left: -200%; }
         70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
  body { margin: 0; } 
div#slider { overflow: hidden; }
 div#slider figure img { width: 20%; height: auto; float: left; }
   div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
   text-align: left;
   font-size: 0;
  animation: 30s slidy infinite;
}

我的HTML：

<figure id="slide">
      <img src="img/6.jpg" alt>
           <img src="img/7.jpg" alt>
              <img src="img/8.jpg" alt>
                 <img src="img/9.jpg" alt>
                    <img src="img/10.jpg" alt>
                       </figure>

库兹涅佐夫

我检查了您链接到的材料。这篇文章展示了标签如何<figure>包装在ID为的附加div中slider：

<div id="slider">
...
</div>

要设置尺寸，您可以为指定CSS的宽度规则#slider。像这儿：

div#slider { 
  ...
  width: 500px;
}

body { 
  margin: 0; 
} 

div#slider { 
  overflow: hidden;
  width: 500px;
}

div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

div#slider figure img { 
  width: 20%; 
  height: auto; 
  float: left; 
}

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

<div id="slider">
  <figure>
    <img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
    <img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
    <img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
    <img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
    <img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
  </figure>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。