Auto scrolling with CSS

Question

In my website [based on wordpress] , I have a project slider (technically image with some text) . But that slider is not auto scrolling , there is a button for sliding left

Answer 1

Here is an example for auto scroll in both limited and unlimited element width:

/*use this js if your element width is unlimited an you want to scroll in a 
constant speed. else, you dont need this js code*/
var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/80; /* 80 = scrolling speed (44px/s)*/
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

.scroll-box{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: green;
}
.scroll-container{
  width: fit-content;
  direction: rtl; /*if you want to scroll left to right set dir to ltr */
}
#scroll-element{
  background-color: yellow;
  padding: 10px;
}

@-webkit-keyframes scroll{
  0% {
    margin-right: 0%; /*if you want to scroll left to right set margin-left*/
    
  }
  100%{
    margin-right: 100%;/*if you want to scroll left to right set margin-left*/
  }
}

    
    
    	
    	
    	
    
    
      

       

        
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation