[英]How can I make an image carousel with only CSS?
I'm looking to make an image carousel, where a user can toggle between images, by clicking on arrows. 我正在寻找一个图像轮播,用户可以通过点击箭头在图像之间切换。 For example:
例如:
However, I can only use HTML and CSS—no JavaScript (and, therefore, jQuery). 但是,我只能使用HTML和CSS - 没有JavaScript(因此,jQuery)。 I just need the basic setup;
我只需要基本设置; smooth transitions and the like are not necessary.
平滑过渡等不是必需的。
How can I go about accomplishing this? 我怎样才能完成这个?
That's easy! 这很简单! Just use radio buttons and targeted labels.
只需使用单选按钮和目标标签即可。
Radio buttons have the (necessary) behavior of only allowing one to be selected at any one time—just like an image in our carousel. 单选按钮具有(必要的)行为,只允许在任何时间选择一个 - 就像我们的旋转木马中的图像一样。
div.wrap2 { float: left; height: 500px; width: 422px; } div.group input { display: none; left: -100%; position: absolute; top: -100%; } div.group input ~ div.content { border: solid 1px black; display: none; height: 350px; margin: 0px 60px; position: relative; width: 300px; } div.group input:checked ~ div.content { display: block; } div.group input:checked ~ label.previous, div.group input:checked ~ label.next { display: block; } div.group label { background-color: #69c; border: solid 1px black; display: none; height: 50px; width: 50px; } img { left: 0; margin: 0 auto; position: absolute; right: 0; } p { text-align: center; } label { font-size: 4em; margin: 125px 0 0 0; } label.previous { float: left; padding: 0 0 30px 5px; } label.next { float: right; padding: 0 5px 25px 0; text-align: right; }
<div class="wrap"> <div class="wrap2"> <div class="group"> <input type="radio" name="test" id="0" value="0"> <label for="4" class="previous"><</label> <label for="1" class="next">></label> <div class="content"> <p>panel #0</p> <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286"> </div> </div> <div class="group"> <input type="radio" name="test" id="1" value="1"> <label for="0" class="previous"><</label> <label for="2" class="next">></label> <div class="content"> <p>panel #1</p> <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139"> </div> </div> <div class="group"> <input type="radio" name="test" id="2" value="2"> <label for="1" class="previous"><</label> <label for="3" class="next">></label> <div class="content"> <p>panel #2</p> <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200"> </div> </div> <div class="group"> <input type="radio" name="test" id="3" value="3" checked=""> <label for="2" class="previous"><</label> <label for="4" class="next">></label> <div class="content"> <p>panel #3</p> <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287"> </div> </div> <div class="group"> <input type="radio" name="test" id="4" value="4"> <label for="3" class="previous"><</label> <label for="0" class="next">></label> <div class="content"> <p>panel #4</p> <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139"> </div> </div> </div> </div>
input(type="radio")
is checked
by default, or the whole carousel will be hidden. checked
至少一个input(type="radio")
,否则将隐藏整个轮播。 labels
correctly target the previous/next radio input (see labels section at the end on how to do the targeting) labels
正确定位上一个/下一个无线电输入(有关如何进行定位,请参阅最后的标签部分) :checked
:checked
时显示图像 Here's what the basic HTML structure should look like: 以下是基本HTML结构的外观:
div#holder
div.group
input(type="radio")
label.previous
label.next
div.content
img
div.group
// ... repeat as necessary
div#holder
will hold all of our content in place. div#holder
将保留我们所有的内容。 Then, we'll group our radio buttons, labels, and images all under a div.group
. 然后,我们将我们的单选按钮,标签和图像
div.group
到div.group
。 This makes sure our radio inputs don't suffer from destructive interference (pun). 这确保我们的无线电输入不会受到破坏性干扰(双关语)。
First, we'll hide our radio buttons—they're ugly anyway: 首先,我们将隐藏我们的单选按钮 - 无论如何它们都很难看:
div.group input {
display: none;
position: absolute;
top: -100%;
left: -100%;
}
We won't ever have to click the radio buttons. 我们不必单击单选按钮。 Instead, we'll style our labels and add targets (
for
properties), so that they redirect the click to the appropriate radio input block. 相反,我们将设置标签样式并添加目标(
for
属性),以便将点击重定向到相应的无线电输入块。
Most of our labels should be hidden: 我们的大多数标签都应隐藏:
div.group label {
display: none;
}
(I will omit all aesthetic styling, so as to make the styling easier to understand. You can see the better-looking version in the stack snippet.) (我将省略所有美学风格,以便使样式更易于理解。您可以在堆栈代码中看到更好看的版本。)
Except for those next to a radio input that is toggled on, or :checked
除了切换的无线电输入旁边的那些,或
:checked
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
In addition, the div.content
following a checked input should also be displayed: 此外,还应显示检查输入后的
div.content
:
div.group input:checked ~ div.content {
display: block;
}
However, when the radio button is not checked, div.content
should be hidden: 但是,如果未选中单选按钮,则应隐藏
div.content
:
div.group input ~ div.content {
display: none;
position: relative;
}
Bazinga! Bazinga! Now our carousel should be
fully
mostly functional, albeit a little ugly. 现在我们的旋转木马应该
完全
是功能性的,尽管有点难看。 Let's move our labels to the correct position: 让我们将标签移动到正确的位置:
label.previous { float: left; }
label.next { float: right; }
And center our images within their respective divs: 并将我们的图像集中在各自的div中:
img {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
<input type="radio" id="1">
<label class="previous" for="0"><</label>
<label class="next" for="2">></label>
Note how, given a radio input with an id
of n
, the label.previous
will have a for
attribute of (n - 1) % M
and the label.next
will have a for
attribute of (n + 1) % M
, where M
is the number of images in the carousel. 注意如何,与给定的无线电输入
id
的n
,所述label.previous
将有一个for
的属性(n - 1) % M
以及label.next
将有一个for
的属性(n + 1) % M
,其中M
是旋转木马中的图像数量。
If you're using Jade (or some other template engine), you can set it up with a simple for-loop like this: 如果您正在使用Jade(或其他一些模板引擎),您可以使用这样的简单for循环进行设置:
div.wrap2
- var imgs = [[200, 286], [200, 139], [140, 200], [200, 287], [96, 139]];
- for (var i = 0; i < imgs.length; i++)
div.group
input(type="radio" name="test" id="#{i}" value="#{i}" checked="#{input == 3}")
label(for="#{(i - 1 + imgs.length) % imgs.length}").previous <
label(for="#{(i + 1) % imgs.length}").next >
div.content
p panel ##{i}
img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
height="#{imgs[i][1]}"
width="#{imgs[i][0]}"
)
Note, css
below does not meet the specific requirement at Question 注意,下面的
css
不符合Question的具体要求
where a user can toggle between images, by clicking on arrows.
用户可以通过单击箭头在图像之间切换。
Utilizes :target
pseudo class , thumbnails as controls to toggle between images ; 利用
:target
伪类 ,缩略图作为控件在图像之间切换; modeled on pattern described at How to Trigger CSS3 Transitions on Click using :target 使用:target在Click如何触发CSS3 Transitions中描述的模式建模
body { width: 70%; overflow: hidden; } section { position: relative; display: block; left: calc(50%); } /* set `div` container `background` to last `div img` `src` */ div { display: inline-block; position: relative; height: 100px; width: 100px; background: url(http://lorempixel.com/100/100/cats); border: 0.1em outset black; } /* set `img` `opacity:0` */ div img { position: absolute; transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; opacity: 0; } /* display `:target` `img` on click of `a`, having `img` as fragment identifier */ div img:target { opacity: 1; animation: active 1s ease-in-out 0s normal 1 both; -moz-animation: active 1s ease-in-out 0s normal 1 both; -webkit-animation: active 1s ease-in-out 0s normal 1 both; } /* `.thumbs` `span` elements */ .thumbs { height: 25px; width: 25px; padding: 1px; display: inline-block; position: relative; text-align: center; border: 0.1em inset black; border-radius: 50px; font-size: 1em; } /* set `background` of `.thumbs` `span` elements */ [href="#3"] .thumbs { background: url(http://lorempixel.com/100/100/cats); background-size: 100%; background-repeat: no-repeat; } [href="#2"] .thumbs { background: url(http://lorempixel.com/100/100/animals); background-size: 100%; background-repeat: no-repeat; } [href="#1"] .thumbs { background: url(http://lorempixel.com/100/100/technics); background-size: 100%; background-repeat: no-repeat; } [href="#0"] .thumbs { background: url(http://lorempixel.com/100/100/nature); background-size: 100%; background-repeat: no-repeat; } span:hover { border-top: 0.1em solid gold; border-left: 0.1em solid yellow; border-bottom: 0.1em solid orange; border-right: 0.1em solid goldenrod; box-shadow: 0 0 0 0.125em sienna, 0 0 0 0.225em dodgerblue; } a { top: 30%; text-decoration: none; display: inline-block; position: relative; color: transparent; } nav a { left: -16px; } @keyframes active { 0% { box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow; } 100% { box-shadow: none; } } @-webkit-keyframes active { 0% { box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow; } 100% { box-shadow: none; } } @-moz-keyframes active { 0% { box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow; } 100% { box-shadow: none; } }
<section> <div> <img src="http://lorempixel.com/100/100/nature" id="0" /> <img src="http://lorempixel.com/100/100/technics" id="1" /> <img src="http://lorempixel.com/100/100/animals" id="2" /> <img src="http://lorempixel.com/100/100/cats" id="3" /> </div> <nav> <a href="#3"> <span class="thumbs"> </span> </a> <a href="#2"> <span class="thumbs"> </span> </a> <a href="#1"> <span class="thumbs"> </span> </a> <a href="#0"> <span class="thumbs"> </span> </a> </nav> </section>
Inspired by royhowie I ended up with a much simpler solution if it comes to HTML syntax. 受到royhowie的启发,如果涉及HTML语法,我最终得到了一个更简单的解决方案。 Also, with nice animation and fully customizable!
此外,有很好的动画和完全可定制!
The main idea was to create the arrows not by placing them in HTML one by one, but by creating and then carefully positioning pseudoelements. 主要的想法是创建箭头不是通过逐个放置HTML,而是通过创建然后仔细定位伪元素。
* { -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .CSS_slideshow { display: block; width: 600px; height: 425px; overflow: hidden; margin: 0 auto; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; text-space-collapse: trim-inner; } .CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] { -webkit-margin-after: -25px; /* Removes the space under the slideshow. Webkit only as only Webkit-based browsers will support the dots in the wrapper */ } /* Defines animation timing function */ .CSS_slideshow[data-animation-style] { -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } /* Inherit all animation properties from parent element */ .CSS_slideshow[data-animation-style] *, .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:before, .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:after { -moz-transition-duration: inherit; -webkit-transition-duration: inherit; transition-duration: inherit; -moz-transition-timing-function: inherit; -webkit-transition-timing-function: inherit; transition-timing-function: inherit; } /* WRAPPER */ .CSS_slideshow_wrapper { display: block; width: 600px; height: 400px; position: relative; /* Styling */ text-align: center; } /* Indicators */ .CSS_slideshow[data-show-indicators="true"] input { width: 10px; height: 10px; outline: none; position: relative; top: calc(100% + 7px); -ms-transform: scale(1); /* Fallback for Internet Explorer: supports radio button resizing, does not support :after. Not necessary, put for readibility. */ -moz-transform: scale(0.6); /* Fallback for Firefox: does not radio button resizing, does not support :after */ -webkit-appearance: none; /* hide radio buttons for Webkit: supports :after */ } .CSS_slideshow[data-show-indicators="true"] input:checked { -ms-transform: scale(1.25); /* Fallback for Internet Explorer: supports radio button resizing, does not support :after */ -moz-transform: scale(0.9); /* Fallback for Firefox: it does not do radio button resizing, does not support :after */ } /* Webkit-only goodness - for now */ .CSS_slideshow[data-show-indicators="true"] input:after { content: ''; display: block; position: absolute; left: 0; width: 8px; height: 8px; border: 1px solid; border-radius: 100%; cursor: pointer; z-index: 4; -moz-transition-property: transform, background; -webkit-transition-property: transform, background; transition-property: transform, background; } .CSS_slideshow[data-show-indicators="true"][data-indicators-position="under"] input:after { top: -2px; background: rgba(0, 0, 0, 0); border-color: rgb(0, 0, 0); } .CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] input:after { top: -35px; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.25); background: rgba(235, 235, 235, 0); border-color: rgb(235, 235, 235); } .CSS_slideshow[data-show-indicators="true"] input:checked:after { -webkit-transform: scale(1.25); } .CSS_slideshow[data-show-indicators="true"][data-indicators-position="under"] input:checked:after { background: rgb(0, 0, 0) } .CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] input:checked:after { box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); background: rgb(235, 235, 235); } .CSS_slideshow:not([data-show-indicators="true"]) input { display: none; } /* SLIDES */ .CSS_slideshow label { display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; } .CSS_slideshow[data-animation-style="slide"] label { -moz-transition-property: left; -webkit-transition-property: left; transition-property: left; } .CSS_slideshow label img { width: 100%; height: 100%; } /* Puts all the slides on the left... */ .CSS_slideshow label { left: -100%; } /* ...except the ones coming after input:checked - those are put on the right... */ .CSS_slideshow input:checked ~ label { left: 100%; } /* ...except the one coming directly after input:checked - this is our current slide and it's in the middle */ .CSS_slideshow input:checked + label { left: 0; } /* PREV/NEXT ARROWS */ .CSS_slideshow[data-show-buttons="true"] label:before, .CSS_slideshow[data-show-buttons="true"] label:after { display: block; position: absolute; width: 60px; height: 60px; top: calc((100% - 60px) / 2); /* Styling */ background: rgb(235, 235, 235); font-size: 35px; font-weight: 800; font-family: Consolas; line-height: 56px; color: black; z-index: 1; cursor: pointer; } .CSS_slideshow[data-show-buttons="true"][data-animation-style="slide"] label:before, .CSS_slideshow[data-show-buttons="true"][data-animation-style="slide"] label:after { -moz-transition-property: left, right; -webkit-transition-property: left, right; transition-property: left, right; } .CSS_slideshow[data-show-buttons="true"] label:hover:before, .CSS_slideshow[data-show-buttons="true"] label:hover:after { /* Styling */ background: rgb(245, 245, 245); } /* Slides on the left */ /* Since the slides are on the left, we need to move the buttons 100% to the right */ .CSS_slideshow[data-show-buttons="true"] label:before { right: -100%; opacity: 0; /* Styling */ content: '>'; /* next */ } .CSS_slideshow[data-show-buttons="true"] label:after { left: 100%; opacity: 1; /* Styling */ content: '<'; /* previous */ } /* Slides on the right */ /* Since the slides are on the right, we need to move the buttons 100% to the left */ .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:before { right: 100%; opacity: 1; } .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:after { left: -100%; opacity: 0; cursor: default; } /* Active slide */ /* And for the active slide - just usual positioning */ .CSS_slideshow[data-show-buttons="true"] input:checked + label:before { right: 0; opacity: 0; cursor: default; } .CSS_slideshow[data-show-buttons="true"] input:checked + label:after { left: 0; } /* Buttons positioning */ .CSS_slideshow[data-show-buttons="true"] label:after { z-index: 3; /* move "previous" buttons forward... */ } .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:after { z-index: 1; /* ...except the one for an active slide - this should be hidden - causes the "previous" arrow from the previous slide to be on top */ } .CSS_slideshow[data-show-buttons="true"] input:checked + label + input + label:before { z-index: 3; /* move "next" button one slide ahead forward - causes the "next" arrow from the next slide to be on top */ } /* WRAP ARROWS */ /* We'll reuse "previous" arrow from the first slide and "next" arrow from the last to make "wrap" buttons, based on roughly the same principles */ .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:first-of-type:before, .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:last-of-type:after { z-index: 2 !important; opacity: 1 !important; cursor: pointer !important; /* Styling */ letter-spacing: -9px; text-align: left; padding-left: 14px; width: 46px; } .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:first-of-type:before { content: '<<'; /* jump to first */ right: 0 !important; } .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] input:not(:checked) + label:first-of-type:before { right: -100% !important; } .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:last-of-type:after { content: '>>'; /* jump to last */ left: 0 !important; } .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] input:not(:checked) + label:last-of-type:after { left: -100% !important; } /* Non-CSS slideshow CSS */ body { font-family: Segoe UI, Tahoma, sans-serif; font-size: 14px; } #license { margin-top: 3em; text-align: center; font-size: 10px; } #license * { font-size: 10px; }
<div class="CSS_slideshow" data-show-indicators="true" data-indicators-position="in" data-show-buttons="true" data-show-wrap-buttons="true" data-animation-style="slide" style="-moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;" > <div class="CSS_slideshow_wrapper"> <input type="radio" name="css3slideshow" id="slide1" checked /><!-- --><label for="slide1"><img src="https://placekitten.com/g/602/400" /></label><!-- --><input type="radio" name="css3slideshow" id="slide2" /><!-- --><label for="slide2"><img src="https://placekitten.com/g/605/400" /></label><!-- --><input type="radio" name="css3slideshow" id="slide3" /><!-- --><label for="slide3"><img src="https://placekitten.com/g/600/400" /></label><!-- --><input type="radio" name="css3slideshow" id="slide4" /><!-- --><label for="slide4"><img src="https://placekitten.com/g/603/400" /></label><!-- --><input type="radio" name="css3slideshow" id="slide5" /><!-- --><label for="slide5"><img src="https://placekitten.com/g/604/400" /></label> </div> </div> <div id="license"> <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Pure CSS slideshow</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://wojtekmaj.pl" property="cc:attributionName" rel="cc:attributionURL">Wojciech Maj</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. </div>
You can read more about customizations and some technical limitations on my fiddle. 您可以在我的小提琴上阅读有关自定义和一些技术限制的更多信息。
Please check this link for CSS only carousel with Auto Play option in the beginning, Left Right navs buttons, nav dots, and resumes play when clicked on button... 请点击这个链接,查看仅限CSS的旋转木马,开头有自动播放选项,左右导航按钮,导航点,点击按钮后恢复播放...
Demo Link - 演示链接 - http://blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html
http://blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html
.csslider1 { display: inline-block; position: relative; max-width: 830px; width: 100%; margin-top: 10px; } .csslider1 > .cs_anchor { display: none; } .csslider1 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider1 > ul > div { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider1 > ul > li.img img { width: 100%; } .csslider1 > ul > li.img { font-size: 0pt; } .csslider1 > ul > li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; white-space: normal; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .csslider1 .cs_lnk{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider1 > ul > li.img, .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext, .csslider1 > .cs_bullets, .csslider1 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { position: absolute; top: 50%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 5; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider1 > .cs_arrowprev { left: 0; } .csslider1 > .cs_arrownext { right: 0; } .csslider1 > .slide:checked ~ .cs_arrowprev > label, .csslider1 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1, .csslider1 > #cs_pause1_0:checked ~ .cs_arrownext > label.num1, .csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2, .csslider1 > #cs_pause1_1:checked ~ .cs_arrownext > label.num2, .csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0, .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @-moz-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow 12300ms infinite -1000ms; -moz-animation: arrow 12300ms infinite -1000ms; animation: arrow 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 12300ms infinite 3100ms; -moz-animation: arrow 12300ms infinite 3100ms; animation: arrow 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 12300ms infinite 7200ms; -moz-animation: arrow 12300ms infinite 7200ms; animation: arrow 12300ms infinite 7200ms; } .csslider1 > .slide:checked ~ .cs_arrowprev > label, .csslider1 > .slide:checked ~ .cs_arrownext > label, .csslider1 > .pause:checked ~ .cs_arrowprev > label, .csslider1 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider1 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider1 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider1 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -55px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; } .csslider1.cs_handle { cursor: -webkit-grab; cursor: -moz-grab; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move; } .csslider1.cs_handle.cs_grab { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move; } .csslider1 > ul > li.num0 { left: 0%; } .csslider1 > ul > li.num1 { left: 100%; } .csslider1 > ul > li.num2 { left: 200%; } .csslider1 > #cs_slide1_0:checked ~ ul > li, .csslider1 > #cs_pause1_0:checked ~ ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > li, .csslider1 > #cs_pause1_1:checked ~ ul > li { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > li, .csslider1 > #cs_pause1_2:checked ~ ul > li { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > ul > li { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 1000ms; -moz-transition: -moz-transform 1000ms; transition: transform 1000ms; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide { 0%, 25.203252032520325% { -webkit-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); } } @-moz-keyframes slide { 0%, 25.203252032520325% { -moz-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); } } @keyframes slide { 0%, 25.203252032520325% { transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { transform: translateX(-200%); } } .csslider1 > #cs_play1:checked ~ ul > li { -webkit-animation: slide 12300ms infinite; -moz-animation: slide 12300ms infinite; animation: slide 12300ms infinite; } .csslider1 > #cs_play1:checked ~ ul > li, .csslider1 > .pause:checked ~ ul > li { -webkit-transition: none; -moz-transition: none; transition: none; } /* /calculate autoplay */ .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { top: 0; bottom: 0; width: 15%; opacity: .5; } .csslider1 > .cs_arrowprev:hover, .csslider1 > .cs_arrownext:hover { opacity: .9; } .csslider1 > .cs_arrowprev { left: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrownext { right: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { top: 0; left: 0; bottom: 0; width: 100%; } .csslider1 > .cs_arrowprev > label span, .csslider1 > .cs_arrownext > label span { display: block; position: absolute; width: 100%; height: 100%; } .csslider1 > .cs_arrowprev > label span { float: left; } .csslider1 > .cs_arrownext > label span { float: right; } .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { display: block; position: absolute; width: 30px; height:30px; top: 50%; margin-top: -23px; color: #fff; text-align: center; content:''; } .csslider1 > .cs_arrowprev > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png'); background-size:100% auto; } .csslider1 > .cs_arrownext > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png'); background-size:100% auto; } .csslider1 > .cs_bullets { bottom: 20px; width: 70%; left: 15%; } .csslider1 > .cs_bullets > label { margin: 0 2px; padding: 5px; border-radius: 50%; background: transparent; -webkit-box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #fff; margin-top: -13px; -webkit-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -5px; bottom: -10px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { opacity: 1; visibility: visible; } .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0, .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0, .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1, .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1, .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2, .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 { background: #fff; padding: 6px; -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes bullet { 0%, 33.32333333333334% { -webkit-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -webkit-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @-moz-keyframes bullet { 0%, 33.32333333333334% { -moz-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -moz-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @keyframes bullet { 0%, 33.32333333333334% { box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 { -webkit-animation: bullet 12300ms infinite -1000ms; -moz-animation: bullet 12300ms infinite -1000ms; animation: bullet 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 { -webkit-animation: bullet 12300ms infinite 3100ms; -moz-animation: bullet 12300ms infinite 3100ms; animation: bullet 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 { -webkit-animation: bullet 12300ms infinite 7200ms; -moz-animation: bullet 12300ms infinite 7200ms; animation: bullet 12300ms infinite 7200ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; -moz-transition: none; transition: none; } .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* ------------- Play ------------- */ .csslider1 > .cs_play_pause{display:block;} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; right: 0; z-index: 5; } .csslider1 > .cs_play_pause > label { cursor: pointer; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play, .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite -1900ms; animation: pauseChange 10800ms infinite -1900ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;} .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 1700ms; animation: pauseChange 10800ms infinite 1700ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 5300ms; animation: pauseChange 10800ms infinite 5300ms; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- Play Pause CSS ------------- */ .csslider1{position:relative} .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{ display: block; background: rgba(0,0,0,0.5); z-index: 5; color: #fff; padding: 5px; font-family: arial; font-size: 9px; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; z-index: 5; margin-right: 0; z-index: 111; }
<div class="csslider1 autoplay cs_handle" style="width:200px;"> <input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide"> <input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide"> <input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide"> <input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked=""> <input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause"> <input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause"> <input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause"> <ul> <div> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" style="width: 100%;"> </div> <li class="num0 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" alt="" title=""> </a> </li> <li class="num1 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163167.png" alt="" title=""> </a> </li> <li class="num2 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163189.png" alt="" title=""> </a> </li> </ul> <div class="cs_play_pause"> <label class="cs_play" for="cs_play1">Play</label> </div> <div class="cs_arrowprev"> <label class="num0" for="cs_slide1_0"><span><i></i></span></label> <label class="num1" for="cs_slide1_1"><span><i></i></span></label> <label class="num2" for="cs_slide1_2"><span><i></i></span></label> </div> <div class="cs_arrownext"> <label class="num0" for="cs_slide1_0"><span><i></i></span></label> <label class="num1" for="cs_slide1_1"><span><i></i></span></label> <label class="num2" for="cs_slide1_2"><span><i></i></span></label> </div> <div class="cs_bullets"> <label class="num0" for="cs_slide1_0"> <span class="cs_point"></span> </label> <label class="num1" for="cs_slide1_1"> <span class="cs_point"></span> </label> <label class="num2" for="cs_slide1_2"> <span class="cs_point"></span> </label> </div> </div>
Extending royhowie's awesome solution by adding an animation property on img
: 通过在
img
上添加动画属性来扩展royhowie的真棒解决方案:
div.wrap2 { float: left; height: 500px; width: 422px; } div.group input { display: none; left: -100%; position: absolute; top: -100%; } div.group input ~ div.content { border: solid 1px black; display: none; height: 350px; margin: 0px 60px; position: relative; width: 300px; } div.group input:checked ~ div.content { display: block; } div.group input:checked ~ div.content > img { display: block; -webkit-animation: opac 2s ease-in; animation: opac 2s ease-in; } @-webkit-keyframes opac { from { opacity: 0 } to { opacity: 1 } } @keyframes opac { from { opacity: 0 } to { opacity: 1 } } div.group input:checked ~ label.previous, div.group input:checked ~ label.next { display: block; opacity: 1; } div.group label { background-color: #69c; border: solid 1px black; display: none; height: 50px; width: 50px; } img { left: 0; margin: 0 auto; position: absolute; right: 0; } p { text-align: center; } label { font-size: 4em; margin: 125px 0 0 0; } label.previous { float: left; padding: 0 0 30px 5px; } label.next { float: right; padding: 0 5px 25px 0; text-align: right; }
<div class="wrap"> <div class="wrap2"> <div class="group"> <input type="radio" name="test" id="0" value="0"> <label for="4" class="previous"><</label> <label for="1" class="next">></label> <div class="content"> <p>panel #0</p> <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286"> </div> </div> <div class="group"> <input type="radio" name="test" id="1" value="1"> <label for="0" class="previous"><</label> <label for="2" class="next">></label> <div class="content"> <p>panel #1</p> <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139"> </div> </div> <div class="group"> <input type="radio" name="test" id="2" value="2"> <label for="1" class="previous"><</label> <label for="3" class="next">></label> <div class="content"> <p>panel #2</p> <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200"> </div> </div> <div class="group"> <input type="radio" name="test" id="3" value="3" checked=""> <label for="2" class="previous"><</label> <label for="4" class="next">></label> <div class="content"> <p>panel #3</p> <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287"> </div> </div> <div class="group"> <input type="radio" name="test" id="4" value="4"> <label for="3" class="previous"><</label> <label for="0" class="next">></label> <div class="content"> <p>panel #4</p> <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139"> </div> </div> </div> </div>
Why not making it smooth and nice looking with only CSS? 为什么不用CSS来让它看起来流畅而美观?
This is part of a library I created, Picnic CSS . 这是我创建的库Picnic CSS的一部分 。 However, that jsfiddle includes the library and all of the plugins for the next version (4.0 is being finished now ).
但是,该jsfiddle包含库和下一个版本的所有插件(4.0现在正在完成 )。 You can see the current 3.x version of the same plugin here, which also fulfills all of your requirements, but it's not so smooth as I'd like:
您可以在此处查看同一插件的当前3.x版本,这也满足您的所有要求,但它并不像我想的那样顺利:
Right now you can only see the scss source code in the dev branch but it is scheduled to be released in the following days, so I'll update my answer. 现在你只能在dev分支中看到scss源代码,但它计划在接下来的几天内发布,所以我会更新我的答案。
Some code please! 有些代码请! This is the HTML that you need for the 4.0 version, as others commented, you basically play with
<input type='radio'>
and <label>
to achieve the desired effect: 这是4.0版本所需的HTML,正如其他人评论的那样,您基本上使用
<input type='radio'>
和<label>
来实现所需的效果:
<div class="tabs three" style="text-align: center;">
<input id='tabC-1' type='radio' name='tabgroupC' checked />
<label class="pseudo button" for="tabC-1">1</label>
❭
<input id='tabC-2' type='radio' name='tabgroupC'>
<label class="pseudo button" for="tabC-2">2</label>
❭
<input id='tabC-3' type='radio' name='tabgroupC'>
<label class="pseudo button" for="tabC-3">3</label>
<div class="row" style="text-align: left;">
<div>
<div class="card" style="margin: 10px 20px;">
<header>
<h3>Super important notice!</h3>
</header>
<p>Thank you for registering! By doing so you agree to the <a href="#">Terms and conditions</a></p>
<footer>
<label class="button" for="tabC-2">Agree</label>
</footer>
</div>
</div>
<div>
<div class="card" style="margin: 10px 20px;">
<header>
<h3>Your basic data</h3>
</header>
<section>
<input type="text" placeholder="Full Name">
</section>
<section>
<div class="select">
<select>
<option>Where did you find us?</option>
<option>Facebook</option>
<option>Twitter</option>
<option>Linkedin</option>
</select>
</div>
</section>
<footer>
<label class="button" for="tabC-3">Next</label>
<label class="button dangerous" for="tabC-1">Back</label>
</footer>
</div>
</div>
<div>
<div class="card" style="margin: 10px 20px;">
<header>
<h3>Create account</h3>
</header>
<section>
<input type="email" placeholder="Email">
</section>
<section>
<input type="password" placeholder="Password">
</section>
<footer>
<button class="success">Finish!</button>
<label class="button dangerous" for="tabC-2">Back</label>
</footer>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.