Yalnızca CSS ile nasıl resim döngüsü yapabilirim?

119

Kullanıcının oklara tıklayarak resimler arasında geçiş yapabileceği bir resim karuseli yapmak istiyorum. Örneğin:

atlı karıncanın görüntüsü

Ancak, yalnızca HTML ve CSS kullanabiliyorum — JavaScript kullanmıyorum (ve dolayısıyla jQuery). Sadece temel kuruluma ihtiyacım var; yumuşak geçişler ve benzeri gerekli değildir.

Bunu başarmaya nasıl devam edebilirim?

javascript  jquery  html  css 
— royhowie
kaynak
1
Bu (artık silinmiş) sorudan esinlenilmiştir .
— royhowie
4
Bu soru gibi StackOverflow için kapsam dışı olduğu için "şimdi silindi" sorusunun silinip silinmediğini merak ediyorum. Yakın oylama arasında parçalanmış durumdayım, çünkü açık bir şekilde yönergelere uymuyor (çok geniş) ve olumlu oylama, çünkü soru ve cevap çok güzel!
— GreenAsJade
— misafir271314
1
@ guest271314 Konu bu değil. Buradaki önemli nokta, bu sorunun teknik olarak StackOverflow için çok geniş olmasıdır. Bunun nedeni (yönergelerden alıntı yapacak olursak) "çok fazla olası çözüm" vardır ve "soru bir veya iki paragrafta yanıtlanamaz". Bunun çok geniş ne anlama geldiğine dair fikrim olmadığını unutmayın: buna benzer yüzlerce soru her gün kapatılmak üzere oylanıyor. Hiç şüphe yok ki, soruyu soran böyle bir birinci sınıf cevap vermemiş olsaydı, bu da olurdu.
— GreenAsJade
@GreenAsJade Burada yorumlandığı gibi, Soru çok özeldir: "bir kullanıcı, oklara tıklayarak görüntüler arasında geçiş yapabilir" ? Anlaşılan "çok fazla olası çözüm" değil ; aşağıdaki toplam cevapları not edin. Burada denendi; ilk deneme kullanıldı :hover; Son olarak kullanan bir parçacığını oluşan click, css; kontroller için sadece iki ok kullanmak burada özellikle önemsiz değildi. Eğer "çok fazla olası çözümler" doğru ve spesifik gereksinimini karşılayarak cevap altına sonrası alternatif bir çözüm oluşturabilir "Bir kullanıcı görüntüleri arasında geçiş yapabilirsiniz, oklara tıklayarak" ?
— misafir271314

Yanıtlar:

167

Bu kolay! Sadece radyo düğmelerini ve hedeflenen etiketleri kullanın.

Radyo düğmelerinin herhangi bir anda yalnızca birinin seçilmesine izin verme (gerekli) davranışı vardır - tıpkı karuselimizdeki bir resim gibi.

gösteri

Kod parçacığını göster

TLDR: Önemli notlar

  • Emin olun en az bir input(type="radio")olan checkedvarsayılan olarak, ya da bütün atlıkarınca gizlenir.
  • Giriş radyolarını gizleyin ve etiketleri önceki / sonraki düğmeler olarak kullanın
  • labelsÖnceki / sonraki radyo girişini doğru şekilde hedeflediğinizden emin olun (hedeflemenin nasıl yapılacağına ilişkin sondaki etiketler bölümüne bakın)
  • Karşılık gelen giriş radyosu olduğunda bir görüntü göster :checked
  • Sevimli kedi resimleri kullanın

açıklama

Temel HTML yapısının nasıl görünmesi gerektiği aşağıda açıklanmıştır:

div#holder
    div.group
        input(type="radio")
        label.previous
        label.next
        div.content
            img
    div.group
        // ... repeat as necessary

div#holdertüm içeriğimizi yerinde tutacak. Ardından, radyo düğmelerimizi, etiketlerimizi ve resimleri bir div.group. Bu, radyo girişlerimizin yıkıcı parazite (pun) maruz kalmamasını sağlar.

Anahtar seçicilerdedir (ve etiketler - bu bölümü okuduğunuzdan emin olun)

İlk olarak, radyo düğmelerimizi gizleyeceğiz - zaten çirkinler:

div.group input {
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
}

Radyo düğmelerine tıklamak zorunda kalmayacağız. Bunun yerine, fortıklamayı uygun radyo giriş bloğuna yönlendirmeleri için etiketlerimizi biçimlendireceğiz ve hedefler ( özellikler) ekleyeceğiz .

Etiketlerimizin çoğu gizlenmelidir:

div.group label {
    display: none;
}

(Stilin anlaşılmasını kolaylaştırmak için tüm estetik stilleri atlayacağım. Daha iyi görünen versiyonu yığın snippet'inde görebilirsiniz.)

Açık olan bir radyo girişinin yanında olanlar hariç veya :checked

div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
    display: block;
}

Ek olarak, div.contentaşağıdaki kontrol edilmiş giriş de görüntülenmelidir:

div.group input:checked ~ div.content {
    display: block;
}

Ancak, radyo düğmesi işaretlenmediğinde div.contentgizlenmelidir:

div.group input ~ div.content {
    display: none;
    position: relative;
}

Bazinga! Şimdi atlı karıncamız biraz çirkin de olsa, tamamen işlevsel olmalıdır . Etiketlerimizi doğru konuma taşıyalım:

label.previous { float: left; }
label.next { float: right; }

Ve görsellerimizi ilgili bölümlerinde ortalayın:

img {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
}

Son adım, etiketlerinizi nasıl ayarladığınızdır:

<input type="radio" id="1">
<label class="previous" for="0">&lt;</label>
<label class="next" for="2">&gt;</label>

Bir ile bir radyo girişi verildi, nasıl Not idait n, label.previousbir olacaktır forniteliği (n - 1) % Mve label.nextbir olacak forvasfını (n + 1) % M, Matlıkarınca görüntü sayısıdır.

Ekstra

Jade (veya başka bir şablon motoru) kullanıyorsanız, bunu aşağıdaki gibi basit bir döngü ile ayarlayabilirsiniz:

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 &lt;
            label(for="#{(i + 1) % imgs.length}").next &gt;
            div.content
                p panel ##{i}
                img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
                    height="#{imgs[i][1]}"
                    width="#{imgs[i][0]}"
                )
— royhowie
kaynak
16
Ben meydan @MadaraUchiha tarafından -> "meydan okuma kabul edildi"
— royhowie
5
Lütfen burayı 9 gag'lik bir sohbet odası yapmak için iki kez düşünün.
— mystrdat
44

cssAşağıdaki , Soru'daki belirli gereksinimi karşılamadığını unutmayın

bir kullanıcının oklara tıklayarak görüntüler arasında geçiş yapabileceği yer.

Kullanır sözde sınıfı , görüntüler arasında geçiş yapmak için kontrol grubu olarak küçük resimler; Tıklamayla CSS3 Geçişleri Nasıl Tetiklenir bölümünde açıklanan modele göre modellenmiştir : hedef: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;
  }
}
<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>
Snippet'i genişlet

— guest271314
kaynak
18

Royhowie'den esinlenerek, HTML sözdizimi söz konusu olduğunda çok daha basit bir çözüm buldum. Ayrıca, güzel animasyonlarla ve tamamen özelleştirilebilir!

Ana fikir, okları HTML'ye tek tek yerleştirerek değil, sahte elemanlar oluşturarak ve ardından dikkatlice konumlandırarak oluşturmaktı.

* {
    -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>
Snippet'i genişlet

JSFiddle

Kemanımla ilgili özelleştirmeler ve bazı teknik sınırlamalar hakkında daha fazla bilgi edinebilirsiniz.

— Wojciech Maj
kaynak
Sarmalamanın bir yolu var mı, yani son slaytta bir sonrakine basmak sizi birinciye götürür?
— royhowie
1
Merhaba @royhowie, evet, kesinlikle. İlk slayt için "geri" düğmesi ve son slayt için "sonraki" düğmesi kullanılmadığından, bunları "kaydır" düğmeleri yapmak için "geri dönüştürebiliriz". Sadece doğru bir şekilde konumlandırmanız gerekiyor. Kemanımı kaydırma düğmesini içerecek şekilde güncelledim: jsfiddle.net/on3n61bh Lütfen neler olup bittiğini daha net bir şekilde açıklarken CSS yorumlarına baktığınızdan emin olun. Ayrıca Firefox ve Chrome, giriş gruplarını kendi başlarına "sarmalıyor", bu nedenle bu tarayıcılarda, sondan ilk slayta ve tam tersi şekilde gitmek için klavyeyi kullanabilirsiniz.
— Wojciech Maj
IE'nin giriş gruplarını da "sarmaladığını" fark ettim :)
— Wojciech Maj
1
cevabınızı daha yeni sürümle (v2) güncellemeyi düşünmelisiniz — Bence bu oldukça havalı bir çözüm.
— royhowie
4

Lütfen başlangıçta Otomatik Oynat seçeneği, Sol Sağ gezinme düğmeleri, gezinme noktaları ve düğmeye tıklandığında oynatmaya devam eden yalnızca CSS atlı karınca için bu bağlantıyı kontrol edin ...

Demo Bağlantısı - 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>
Snippet'i genişlet

3

Royhowie'nin harika çözümünü aşağıdakilere bir animasyon özelliği ekleyerek genişletmek 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;
}
<div class="wrap">
  <div class="wrap2">
    <div class="group">
      <input type="radio" name="test" id="0" value="0">
      <label for="4" class="previous">&lt;</label>
      <label for="1" class="next">&gt;</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">&lt;</label>
      <label for="2" class="next">&gt;</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">&lt;</label>
      <label for="3" class="next">&gt;</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">&lt;</label>
      <label for="4" class="next">&gt;</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">&lt;</label>
      <label for="0" class="next">&gt;</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>
Snippet'i genişlet

— maioman
kaynak
2

Neden sadece CSS ile pürüzsüz ve güzel görünmesini sağlamıyorsunuz?

Picnic CSS 4.0 Sekmeleri

Bu, oluşturduğum Picnic CSS kütüphanesinin bir parçası . Bununla birlikte, bu jsfiddle, kitaplığı ve bir sonraki sürüm için tüm eklentileri içerir (4.0 şimdi tamamlanmıştır ). Aynı eklentinin tüm gereksinimlerinizi karşılayan mevcut 3.x sürümünü burada görebilirsiniz, ancak istediğim kadar pürüzsüz değil:

Picnic CSS 3.x Sekmeleri

Şu anda yalnızca geliştirme dalında scss kaynak kodunu görebilirsiniz ancak önümüzdeki günlerde yayınlanması planlandı, bu yüzden cevabımı güncelleyeceğim.

Lütfen biraz kod! Bu, 4.0 sürümü için ihtiyacınız olan HTML'dir, diğerlerinin de söylediği gibi, temelde oynamak <input type='radio'>ve <label>istenen etkiyi elde etmek için:

<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>
— Francisco Presencia
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.