Inhalt Slider stoppen und starten in Akkordeon

Ich habe Code unten für einen reinen CSS Inhalt Schieberegler in einem Akkordeon, das ich erstellt habe. Ist es möglich den Content Slider zu starten und zu stoppen, wenn das Akkordeon geöffnet und geschlossen wird? Derzeit läuft der Content Slider auch wenn das Akkordeon geschlossen ist. Ist das mit Pure CSS möglich? Wenn nicht, wäre dies mit Vanilla JavaScript möglich (keine JQuery). Alles hilft, Prost.Inhalt Slider stoppen und starten in Akkordeon

.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>

Quelle

2017-07-04 Cole Gwozdecki

Ich würde normalerweise raten, dass Sie mit JS diese Art von Sachen zu tun, aber wenn Sie es hier eine Arbeits (wenn auch ausführlich) Lösung vermeiden wollen:

ersetzen

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

mit

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

Hier ist ein Stift, der die Lösung zeigt. https://codepen.io/anon/pen/zzaKow

Quelle

2017-07-04 20:34:59 Suavocado

Awesome Kumpel, Prost! –

Nur ein Tippfehler korrigiert. Stellen Sie sicher, dass Sie die Hover-Version und nicht die normale UL-Klasse ersetzen. – Suavocado

Inhalt Slider stoppen und starten in Akkordeon

Antwort

Verwandte Themen