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

1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)

2.) You can remove the buttons by overwriting the current CSS and adjust the visibility or display tag to render them away or (placeholding) invisible.

In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.

Edit:

This might be something for you to work with animating the slider:

#container {
    	height: 200px;
    	width: 800px;
    	border: 1px solid #333;
    	overflow: hidden;
    	margin: 25px auto;
    }
    
    #box {
    	background: orange;
    	height: 180px;
    	width: 400px;
    	margin: 10px -400px;
    	-webkit-animation-name: move;
    	-webkit-animation-duration: 4s;
    	-webkit-animation-iteration-count: infinite;
    	-webkit-animation-direction: right;
    	-webkit-animation-timing-function: linear;
    }
    
    #box:hover {
    	-webkit-animation-play-state: paused;
    }
    
    @-webkit-keyframes move {
    	0% {
    		margin-left: -400px;
    	}
    	100% {
    		margin-left: 800px;
    	}
    }

    
    
    
    	
    	
    	
    
    
    	

    		
as
    	
    
    

Result

This is the WebKit-only version. These are the equivalents for other browsers:

The @ keyframes:

@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {

Inside #box (only one property shown as example):

-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;