我试图建立一个网站,我得到了这个过渡轮播在网上,但而不是一个5卡,它的3卡。我希望它是一个5卡旋转木马。
我试着在CSS中改变一些属性,但我从来没有得到所需的5卡过渡,我一直困惑自己。我会把链接到下面的3卡代码:-Click here
<div class="container">
<input type="radio" name="slider" id="item-1" checked>
<input type="radio" name="slider" id="item-2">
<input type="radio" name="slider" id="item-3">
<div class="cards">
<label class="card" for="item-1" id="song-1">
<img src="https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80" alt="song">
</label>
<label class="card" for="item-2" id="song-2">
<img src="https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="song">
</label>
<label class="card" for="item-3" id="song-3">
<img src="https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="song">
</label>
</div>
<div class="player">
<div class="upper-part">
<div class="play-icon">
<svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-play" viewBox="0 0 24 24">
<defs/>
<path d="M5 3l14 9-14 9V3z"/>
</svg>
</div>
<div class="info-area" id="test">
<label class="song-info" id="song-info-1">
<div class="title">Bunker</div>
<div class="sub-line">
<div class="subtitle">Balthazar</div>
<div class="time">4.05</div>
</div>
</label>
<label class="song-info" id="song-info-2">
<div class="title">Words Remain</div>
<div class="sub-line">
<div class="subtitle">Moderator</div>
<div class="time">4.05</div>
</div>
</label>
<label class="song-info" id="song-info-3">
<div class="title">Falling Out</div>
<div class="sub-line">
<div class="subtitle">Otzeki</div>
<div class="time">4.05</div>
</div>
</label>
</div>
</div>
<div class="progress-bar">
<span class="progress"></span>
</div>
</div>
</div>
个字符
2条答案
按热度按时间z18hc3ub1#
我可以想象它会变得有点混乱。你基本上需要在每个必要的组件上添加第四个和第五个。首先,您必须添加两个输入。我将给予第四张幻灯片的示例,但请记住,第五张幻灯片的需要是相同的。
将
id
更改为相应的数字。字符串
接下来,您给每张幻灯片加了标签。也为每个人添加一个。请确保将
for
和id
更改为相应的编号。型
之后,您为歌曲添加了一个标签。在那里做同样的事情。你需要复制整个标签,并再次更改
id
,当然还有标题,副标题和时间。型
这就是HTML部分。现在是CSS。有四个地方需要改变。其中三个人像这样调用所有三张幻灯片:
型
您还需要将
#item-4
和#item-5
添加到这三个列表中。如您所见,第一段代码将#item-1
链接到#song-3
,因为这是当前的最后一张幻灯片。您需要将其更改为#song-5
。第二个代码位也是如此,其中#item-3
引用#song-1
,现在必须变成song-4等等,因为现在是下一个,因为添加了幻灯片。第三个似乎不言自明。最后,您必须为
#item-4
和#item-5
添加以下代码,并在转换中进行更改。其他两个之间的差距是40 px,所以4和5应该是120和160 px。型
如果应用正确,这应该有效。我自己在codepen here中试过这个,如果你卡住了,你可以检查一下。我建议你先根据我的解释试试。我希望这是你在美学上想要的效果,这由你来决定。这至少会给予你一个正确的方向!
xytpbqjk2#
我们来传送带5张卡片:codepen
个字符