Inhalt Slider Pure CSS

Question

Ich habe den Code unten für einen Content-Slider mit HTML, CSS und JQuery. Kann ich genau das bekommen, was ich jetzt habe, aber nur mit reinem CSS? Wenn es mit reinem CSS nicht möglich ist, ist es mit Vanilla JavaScript ohne JQuery möglich? Alles hilft, Prost.

$(function(){ 
 
     var scroller = $('#scroller div.innerScrollArea'); 
 
     var scrollerContent = scroller.children('ul'); 
 
     scrollerContent.children().clone().appendTo(scrollerContent); 
 
     var curX = 0; 
 
     scrollerContent.children().each(function(){ 
 
      var $this = $(this); 
 
      $this.css('left', curX); 
 
      curX += $this.outerWidth(true); 
 
     }); 
 
     var fullW = curX/2; 
 
     var viewportW = scroller.width(); 
 

 
     // Scrolling speed management 
 
     var controller = {curSpeed:0, fullSpeed:2}; 
 
     var $controller = $(controller); 
 
     var tweenToNewSpeed = function(newSpeed, duration) 
 
     { 
 
      if (duration === undefined) 
 
       duration = 600; 
 
      $controller.stop(true).animate({curSpeed:newSpeed}, duration); 
 
     }; 
 

 
     // Pause on hover 
 
     scroller.hover(function(){ 
 
      tweenToNewSpeed(0); 
 
     }, function(){ 
 
      tweenToNewSpeed(controller.fullSpeed); 
 
     }); 
 

 
     // Scrolling management; start the automatical scrolling 
 
     var doScroll = function() 
 
     { 
 
      var curX = scroller.scrollLeft(); 
 
      var newX = curX + controller.curSpeed; 
 
      if (newX > fullW*2 - viewportW) 
 
       newX -= fullW; 
 
      scroller.scrollLeft(newX); 
 
     }; 
 
     setInterval(doScroll, 40); 
 
     tweenToNewSpeed(controller.fullSpeed); 
 
    });

#scroller { 
 
    position: absolute; 
 
} 
 

 
#scroller .innerScrollArea { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
#scroller ul { 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

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

 
.circle-text { 
 
    color: #1f497d; 
 
    font-family:Verdana; 
 
    font-size: 20.5px; 
 
    text-align: center; 
 
    width: 200px; 
 
    top: 90px; 
 
    left: 10%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 

 
.arrow { 
 
    width:300px; 
 
    height:80px; 
 
} 
 

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

 
.everything { 
 
    /*transform: scale(0.6); 
 
}

<div class="everything"> 
 
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul> 
 
    \t \t <li> 
 
      <br style="line-height:89px;"/> 
 
     <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
      \t \t <li> 
 
       <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
Employee<br/>Relations<br/>Specialist 
 
     </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;"/> 
 
     <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
      \t \t <li> 
 
       <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
Director, Employee<br/>Relations &<br/>Well-Being 
 
     </div> 
 
     </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</div>

Answer 1

Sie animation verwenden können, aber die ganze Sache zu halten ewig gleitenden, müssen Sie klonen (oder eine redundante Kopie in HTML machen) zumindest der Elemente, die Sie sehen zuerst im Schieberegler. Sonst würde es sich wie ein marquee verhalten, eine Leerstelle leben, bis alles von der Box gleitet.

Beispiel unten:

/* 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: 250px; 
 
    height: 250px; 
 
    position: relative; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-color:transparent; 
 
    border-style:solid; 
 
    border-width:9px; 
 
    border-color:#006850; 
 
} 
 

 
.circle-text { 
 
    color: #1f497d; 
 
    font-family:Verdana; 
 
    font-size: 20.5px; 
 
    text-align: center; 
 
    width: 200px; 
 
    top: 90px; 
 
    left: 10%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 

 
.arrow { 
 
    width:300px; 
 
    height:80px; 
 
} 
 

 
.flipimage { 
 
    width:300px; 
 
    height:80px; 
 
    -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 9s infinite linear; 
 
} 
 
ul:hover { 
 
    animation-play-state:paused; 
 
} 
 
@keyframes slidli { 
 
    100% { 
 
    transform:translatex(-133.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="everything"> 
 
    <div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <!-- from here it is a copy of the previous elements . 3 of them might have been enough --> 
 
     
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <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/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</div>

Hinweis: verwendete ich das Flex-Modell und abgesunken die absolute Positionierung. Haupteltern können absolut sein, wenn Sie es brauchen, Kinder nicht.