CSS3 반응 슬라이더가

Question

내가에만 자동으로 이루어집니다 설명 here.

내 질문은, 내가 본되는 CSS3 애니메이션으로 CSS3를 사용하여와 슬라이더를 설정 한 자동화, 여전히 회전 및 자동이 슬라이더를 얻을 수있는 방법이있다 버튼이 작동합니까?

/* Slider Setup */ 

input { 
display: none; 
} 

#slide1:checked ~ #slides .inner { margin-left:0; } 
#slide2:checked ~ #slides .inner { margin-left:-100%; } 
#slide3:checked ~ #slides .inner { margin-left:-200%; } 
#slide4:checked ~ #slides .inner { margin-left:-300%; } 


#overflow { 
width: 100%; 
overflow: hidden; 
} 

#slides .inner { 
width: 500%; 
line-height: 0; 
} 

#slides article { 
width: 20%; 
float: left; 
} 

/* Slider Styling */ 

/* Control Setup */ 

#controls { 
margin: -25% 0 0 0; 
width: 100%; 
height: 50px; 
} 

#controls label { 
display: none; 
width: 50px; 
height: 50px; 
opacity: 0.3; 
} 

#active { 
margin: 23% 0 0; 
text-align: center; 
} 

#active label { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
display: inline-block; 
width: 10px; 
height: 10px; 
background: #bbb; 
} 

#active label:hover { 
background: #ccc; 
border-color: #777 !important; 
} 

#controls label:hover { 
opacity: 0.8; 
} 

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(1){ 
background: url('imgs/next.png') no-repeat; 
float: right; 
margin: 0 -70px 0 0; 
display: block; 
} 


#slide1:checked ~ #controls label:nth-child(4), 
#slide2:checked ~ #controls label:nth-child(1), 
#slide3:checked ~ #controls label:nth-child(2), 
#slide4:checked ~ #controls label:nth-child(3){ 
background: url('imgs/prev.png') no-repeat; 
float: left; 
margin: 0 0 0 -70px; 
display: block; 
} 

#slide1:checked ~ #active label:nth-child(1), 
#slide2:checked ~ #active label:nth-child(2), 
#slide3:checked ~ #active label:nth-child(3), 
#slide4:checked ~ #active label:nth-child(4) { 
background: #333; 
border-color: #333 !important; 
} 

/* Info Box */ 

.info { 
line-height: 20px; 
margin: 0 0 -150%; 
position: absolute; 
font-style: italic; 
padding: 30px 30px; 
opacity: 0; 
color: #000; 
text-align: left; 
} 

.info h3 { 
color: #333; 
margin: 0 0 5px; 
font-weight: normal; 
font-size: 22px; 
font-style: normal; 
} 

/* Slider Styling */ 




/* Animation */ 

#slides .inner { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 
} 

#slider { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
} 

#controls label{ 
-webkit-transform: translateZ(0); 
-webkit-transition: opacity 0.2s ease-out; 
-moz-transition: opacity 0.2s ease-out; 
-o-transition: opacity 0.2s ease-out; 
transition: opacity 0.2s ease-out; 
} 

#slide1:checked ~ #slides article:nth-child(1) .info, 
#slide2:checked ~ #slides article:nth-child(2) .info, 
#slide3:checked ~ #slides article:nth-child(3) .info, 
#slide4:checked ~ #slides article:nth-child(4) .info{ 
opacity: 1; 
-webkit-transition: all 1s ease-out 0.6s; 
-moz-transition: all 1s ease-out 0.6s; 
-o-transition: all 1s ease-out 0.6s; 
transition: all 1s ease-out 0.6s; 
} 

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
} 

을 그리고 기본적으로 내 슬라이드 이러한 네, 있습니다 :

는 CSS는 다음과 같습니다

   <article > 
        <div class="info">     
         <div id="slideContent"> 
          <div> 
           <h1></h1> 
           <h1 style="color:#ff9900;"><b></b></h1> 
          </div> 
          <div id="slideTxt"></div> 
          <div id="slideBtn"></div> 
         </div> 
        </div> 
        <img src="imgs/slide background" /> 
       </article> 

Answer 1

해당 페이지의 페이지 소스에서 찾고 시도. 대부분 HTML을 사용하기 때문에 시작하는 것이 가장 좋습니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "소스보기"를 누르십시오. 필요한 것은 바로 거기에 있습니다.

Answer 2

다른 것을 둘러 보면서 IE가 최신 css3 애니메이션과 잘 작동하지 않는다는 것을 발견했습니다. 따라서 javascript를 사용하여이 작업을 수행 할 것입니다.

편집 : Jquery가 문제 였기 때문에 Javascript를 사용하고 직접 슬라이더를 만들었습니다. 나는이 css one을 좋아해서 10 초마다 슬라이더의 버튼을 "가짜 클릭"하도록 작은 JS를 만들었다.

var labelNumber=1; 
var flag = true; 
function customSlideShow(){ 
    if(flag){ 
     $("label[for='slide" + labelNumber + "']").trigger('click'); 
     labelNumber++; 
     if (labelNumber==5){labelNumber=1;}; 
     setTimeout(customSlideShow, 10000); 
    };}