我发现了这个仅基于CSS的梦幻轮播。您是否有一个主意,我如何将其用于响应式设计并相互展示2个胡萝卜?
http://codepen.io/anon/pen/eZxjoX
/* ***************************************************** */
/* SLIDER 1 */
/* ***************************************************** */
.carousel-wrapper {
border: 1px solid red;
background: red;
position: relative;
}
.carousel-wrapper .carousel-item {
border: 3px solid blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 0;
display: block;
width: 100px;
height: 80vh;
-webkit-tap-highlight-color: transparent;
background: url("../arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev {
left: 0;
}
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.carousel-wrapper .carousel-item.light {
color: white;
}
.carousel-wrapper .carousel-item.light .arrow {
background: url("../arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper [id^="target-item"] {
display: none;
}
.carousel-wrapper .item-1 {
border: 5px solid yellow;
z-index: 2;
opacity: 1;
background-color: #FFF;
}
.carousel-wrapper .item-2 {
background-color: #FFF;
}
.carousel-wrapper .item-3 {
background: url("../blurry.jpg") no-repeat;
background-size: cover;
}
.carousel-wrapper *:target ~ .item-1 {
opacity: 0;
}
.carousel-wrapper #target-item-1:target ~ .item-1 {
border: 5px solid purple;
opacity: 1;
}
.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
<div class="carousel-wrapper">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>
<div class="carousel-item item-1">
<p><br />x<br />x<br />x<br /></p>
<a class="arrow arrow-prev" href="#target-item-3"></a>
<a class="arrow arrow-next" href="#target-item-2"></a>
</div>
<div class="carousel-item item-2 light">
<p><br />x<br />x<br />x<br /></p>
<a class="arrow arrow-prev" href="#target-item-1"></a>
<a class="arrow arrow-next" href="#target-item-3"></a>
</div>
<div class="carousel-item item-3">
<p><br />x<br />x<br />x<br /></p>
<a class="arrow arrow-prev" href="#target-item-2"></a>
<a class="arrow arrow-next" href="#target-item-1"></a>
</div>
</div>
原文来自:http://www.cssscript.com/pure-html-css-responsive-carousel-cari/
第一个问题是,旋转木马的高度无法定义(我将在以后用100vw图片而不是x ....使用它)。
非常感谢,
马蒂亚斯
最佳答案
所有幻灯片均具有绝对位置。因此,轮播高度等于零。
但是,幻灯片由z-index
而不是display
切换。因此,我们可以为轮播的第一张幻灯片设置position: relative;
。然后,其高度将设置整个轮播的高度。
检查两个连续轮播的代码:
/* This code works for both carousels. */
.carousel-wrapper {
position: relative;
}
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 0;
display: block;
width: 100px;
height: 100%; /* fix the bug */
-webkit-tap-highlight-color: transparent;
background: url("http://www.cssscript.com/demo/pure-html-css-responsive-carousel-cari/arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev {
left: 0;
}
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.carousel-wrapper .carousel-item.light {
color: white;
}
.carousel-wrapper .carousel-item.light .arrow {
background: url("../arrow.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper [id^="target-item"] {
display: none;
}
/* First carousel consists of slides No 1, 2 and 3. */
.carousel-wrapper .item-1 {
z-index: 2;
opacity: 1;
}
.carousel-wrapper *:target ~ .item-1 {
opacity: 0;
}
.carousel-wrapper #target-item-1:target ~ .item-1 {
opacity: 1;
}
.carousel-wrapper #target-item-2:target ~ .item-2,
.carousel-wrapper #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
/* Second carousel consists of slides No 4, 5 and 6. */
.carousel-wrapper .item-4 {
z-index: 2;
opacity: 1;
}
.carousel-wrapper *:target ~ .item-4 {
opacity: 0;
}
.carousel-wrapper #target-item-4:target ~ .item-4 {
opacity: 1;
}
.carousel-wrapper #target-item-5:target ~ .item-5,
.carousel-wrapper #target-item-6:target ~ .item-6 {
z-index: 3;
opacity: 1;
}
/* Add a few lines to make design responsive. */
.carousel-wrapper .carousel-item > img {
height: auto;
max-width: 100%;
width: 100%;
}
@media (max-width: 480px) {
.carousel-wrapper .carousel-item .arrow,
.carousel-wrapper .carousel-item.light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
/* Fix the height of carousel-wrapper. */
.carousel-wrapper .item-1,
.carousel-wrapper .item-4 {
position: relative;
}
<h3>First carousel</h3>
<div class="carousel-wrapper">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>
<div class="carousel-item item-1">
<img src="http://placehold.it/1920x650&text=Slide%20One" alt="Slide One">
<a class="arrow arrow-prev" href="#target-item-3"></a>
<a class="arrow arrow-next" href="#target-item-2"></a>
</div>
<div class="carousel-item item-2 light">
<img src="http://placehold.it/1920x650&text=Slide%20Two" alt="Slide Two">
<a class="arrow arrow-prev" href="#target-item-1"></a>
<a class="arrow arrow-next" href="#target-item-3"></a>
</div>
<div class="carousel-item item-3">
<img src="http://placehold.it/1920x650&text=Slide%20Three" alt="Slide Three">
<a class="arrow arrow-prev" href="#target-item-2"></a>
<a class="arrow arrow-next" href="#target-item-1"></a>
</div>
</div>
<h3>Second carousel</h3>
<div class="carousel-wrapper">
<span id="target-item-4"></span>
<span id="target-item-5"></span>
<span id="target-item-6"></span>
<div class="carousel-item item-4">
<img src="http://placehold.it/1920x650&text=Slide%20Four" alt="Slide Four">
<a class="arrow arrow-prev" href="#target-item-6"></a>
<a class="arrow arrow-next" href="#target-item-5"></a>
</div>
<div class="carousel-item item-5 light">
<img src="http://placehold.it/1920x650&text=Slide%20Five" alt="Slide Five">
<a class="arrow arrow-prev" href="#target-item-4"></a>
<a class="arrow arrow-next" href="#target-item-6"></a>
</div>
<div class="carousel-item item-6">
<img src="http://placehold.it/1920x650&text=Slide%20Six" alt="Slide Six">
<a class="arrow arrow-prev" href="#target-item-5"></a>
<a class="arrow arrow-next" href="#target-item-4"></a>
</div>
</div>
http://codepen.io/glebkema/pen/pyGQvW