Content Slider Pure CSS

Question

I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.

 $(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> <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> 

Answer 1

You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.

Example below:

 /* 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> 

Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.