コンテンツスライダの停止とアコーディオンの開始

私が作成したアコーディオンの純粋なCSSコンテンツスライダのコードは次のとおりです。アコーディオンが開いて閉じているときにコンテンツスライダを開始および停止することはできますか？現在、コンテンツスライダは、アコーディオンが閉じていても実行し続けます。これはPure CSSで可能ですか？そうでなければ、これはバニラのJavaScript（JQueryなし）で可能です。何でも助けてくれる、歓声。コンテンツスライダの停止とアコーディオンの開始

.wrapper { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* Acordeon styles */ 
 

 
.tab { 
 
    position: relative; 
 
    margin-bottom: 1px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.bold { 
 
    font-weight:bold; 
 
    color: #005bab; 
 
    } 
 

 
.top { 
 
    margin-top:-20px; 
 
    text-align: center; 
 
    font-size:13px; 
 
} 
 

 
.input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
.label { 
 
    position: relative; 
 
    text-align: center; 
 
    display: block; 
 
    padding: 0 0 0 1em; 
 
    color: #005bab; 
 
    background: #e2ecf6; 
 
    font-size: 14px; 
 
    font-family: Verdana; 
 
    font-weight: bold; 
 
    line-height: 6; 
 
    cursor: pointer; 
 
} 
 

 
.label:hover { 
 
    background-color: #d2e2ef; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    -webkit-transition: max-height .5s; 
 
    -o-transition: max-height .5s; 
 
    transition: max-height .5s; 
 
    padding-left: 35px; 
 
    background: #dce7f2; 
 
} 
 

 
.tab-content .container { 
 
    padding: 1em; 
 
    margin: 0; 
 
    opacity: 0; 
 
    transform: scale(0.75); 
 
    -webkit-transition: transform 0.75s, opacity .75s; 
 
    -o-transition: transform 0.75s, opacity .75s; 
 
    transition: transform 0.75s, opacity .75s; 
 
    background: #f4f8fc; 
 
} 
 

 

 
/* :checked */ 
 

 
.input:checked~.tab-content { 
 
    max-height: 35em; 
 
} 
 

 
.input:checked~.tab-content .container { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
} 
 

 
/* Icon */ 
 

 
.label::after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: block; 
 
    width: 3em; 
 
    height: 3em; 
 
    line-height: 3; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
.input[type=checkbox]+.label::after { 
 
    content: "+"; 
 
} 
 

 
.input[type=radio]+.label::after { 
 
    content: ""; 
 
} 
 

 
.input[type=checkbox]:checked+.label::after { 
 
    transform: rotate(315deg); 
 
} 
 

 
.input[type=radio]:checked+.label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
.bottombar { 
 
    content: ""; 
 
    display: block; 
 
    height: 1em; 
 
    width: 100%; 
 
    background-color: #00688B; 
 
} 
 

 

 
/* all position:absolute removed */ 
 
#scroller { 
 
overflow:hidden; 
 
} 
 

 
#scroller .innerScrollArea { 
 

 
} 
 

 
#scroller ul { 
 
    padding: 0; 
 
    position: relative; 
 
    display:flex;/* UPDATE */ 
 
} 
 

 
#scroller li { 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.circle { 
 
    width: 130px; 
 
    height: 130px; 
 
    position: relative; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-color:transparent; 
 
    border-style:solid; 
 
    border-width:5px; 
 
    border-color:#006850; 
 
} 
 

 
.circle-text { 
 
    color: #1f497d; 
 
    font-family:Verdana; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    width: 200px; 
 
    top: 45px; 
 
    margin-left:-35px; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 

 
.circleinv{ 
 
    width: 130px; 
 
    height: 130px; 
 
    position: relative; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-color:transparent; 
 
    border-style:solid; 
 
    border-width:5px; 
 
    border-color:transparent; 
 
} 
 

 
.arrow { 
 
    width:145px; 
 
    height:45px; 
 
} 
 

 
.arrowinv { 
 
    visibility:hidden; 
 
    width:145px; 
 
    height:50px; 
 
} 
 

 
.flipimage { 
 
    width:145px; 
 
    height:45px; 
 
    -moz-transform: scaleY(-1); 
 
    -webkit-transform: scaleY(-1); 
 
    -o-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
    -ms-filter: fliph; /*IE*/ 
 
    filter: fliph; /*IE*/ 
 
} 
 

 
/* UPDATE for animation */ 
 
.ul { 
 
    animation: slidli 90s infinite linear; 
 
} 
 
.ul:hover { 
 
    animation-play-state:paused; 
 
} 
 
@keyframes slidli { 
 
    100% { 
 
    transform:translatex(-733.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */ 
 
    } 
 
}

<div class="top"> 
 
    <p> 
 
     <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
 
</div> 
 
<div class="wrapper"> 
 
    
 
    
 
    
 
    <div class="tab"> 
 
    <input name="tabs" class="input" id="tab-one" type="checkbox"/> 
 
     <label class="label" for="tab-one">Content Slider</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
         <div class="everything"> 
 
    <div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul class="ul"> 
 
     <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
       <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     
 
     <!--Dupes--> 
 
     
 
       <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
       <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     
 
     <!--Dupe 2--> 
 
     
 
       <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
       <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     
 
     <!--Dupe 3--> 
 
     
 
       <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:49px;"/> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
     </li> 
 
     <li> 
 
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
       <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="circleinv"> 
 
      </div> 
 
     </li> 
 
     
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="bottombar"></div> 
 
    
 
</div>

出典

2017-07-04 Cole Gwozdecki

私は通常、あなたがJSと原料のこの種を行うことを助言するだろうが、あなたはそれを避けたい場合（冗長が）ここに解決策は、作業だ：

を置き換えます

.ul:hover { 
    animation-play-state:paused; 
}

と

.input:checked~.tab-content .container .ul:hover { 
    animation-play-state:paused; 
} 

.tab-content .container .ul{ 
    animation-play-state:paused; 
} 
.input:checked~.tab-content .container .ul { 
    animation-play-state:running; 
}

解決策を示すペンです。 https://codepen.io/anon/pen/zzaKow

出典

2017-07-04 20:34:59 Suavocado

恐ろしい仲間、歓声！ –

入力ミスを修正しました。通常のulクラスではなく、ホバーバージョンを置き換えてください。 – Suavocado

コンテンツスライダの停止とアコーディオンの開始

答えて

関連する問題