Как я могу сделать карусель изображений только с CSS?

Я ищу сделать карусель изображений, где пользователь может переключаться между изображениями, нажимая на стрелки. Например:

изображение карусели изображения

Тем не менее, я могу использовать только HTML и CSS-без JavaScript (и, следовательно, jQuery). Мне просто нужна базовая настройка; гладкие переходы и т.п. не нужны.

Как я могу это сделать?

Это легко! Просто используйте переключатели и целевые метки.

Радиокнопки имеют (необходимое) поведение только для того, чтобы один был выбран в любой момент времени – точно так же, как изображение в нашей карусели.

демонстрация

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

panel #0

panel #1

panel #2

panel #3

panel #4

Примечание. css ниже не соответствует конкретному требованию по Вопросу

где пользователь может переключаться между изображениями, нажимая на стрелки.

Использует :target псевдо-class , миниатюры в качестве элементов управления для переключения между изображениями; смоделированный по шаблону, описанному в разделе Как запускать переходы CSS3 на клике, используя: target

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

Вдохновленный royhowie, я закончил с гораздо более простым решением, если речь заходит о синтаксисе HTML. Кроме того, с приятной анимацией и полностью настраиваемой!

Основная идея заключалась в том, чтобы создавать стрелки, не помещая их в 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; } 
 

Пожалуйста, проверьте эту ссылку только для карусели CSS с функцией автоматического воспроизведения в начале, кнопками навигации влево, навигационными точками и возобновлением воспроизведения при нажатии кнопки …

Демо-ссылка – 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; } 
 

Extending royhowie’s awesome solution by adding an animation property on img :

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

panel #0

panel #1

panel #2

panel #3

panel #4

Why not making it smooth and nice looking with only CSS?

Picnic CSS 4.0 Tabs

This is part of a library I created, Picnic CSS . However, that jsfiddle includes the library and all of the plugins for the next version (4.0 is being finished now ). 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:

Picnic CSS 3.x Tabs

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.

Some code please! This is the HTML that you need for the 4.0 version, as others commented, you basically play with and to achieve the desired effect:

 

Super important notice!

Thank you for registering! By doing so you agree to the Terms and conditions

Your basic data

Create account