CODEWITHSUNDEEP
css
marvelX
marvelX

Reputation: 19

CSS images slider animation doesn't work

I'm new here and I'll try to simplify my questin. I'm sorry if I break any rules. I'm trying to do a simple css silde image.

While I'm doing the animation code, I want the picture to fade from the left for every link I select. I'm doing everything as the video says but it is not working.

@-webkit-keyframes 'slide'{
0% {left:-500px;}
100%{left: 0}

}

ul.slides li:target {
z-index: 100;
-webkit-animation-name: slide;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:1;
}
<!DOCOTYPE html>
<html>
  <head>
   <title>pure CSS Slider</title>

<link rel="stylesheet" href="file:///D:/CSS%20projects/CSS%20slider/style.css"/>



  </head>


<body>

<div id="container">
	<h1>pure CSS Slider</h1>
    
     <ul class="tumbs">

     <li><a href="#slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb1.jpg">
     	<span>this is image 1</span></a></li>
     <li><a href="#slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb2.jpg"><span>this is image 2</span></a></li>
     <li><a href="#slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb3.jpg"><span>this is image 3</span></a></li>
     <li><a href="#slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb4.jpg"><span>this is image 4</span></a></li>
     <li><a href="#slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb5.jpg"><span>this is image 5</span></a></li>
     <li><a href="#slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb6.jpg"><span>this is image 6</span></a></li>
     <li><a href="#slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb7.jpg"><span>this is image 7</span></a></li>


     </ul>


    <ul class="slides">
<li class="first" id="slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-1.jpg">
</li>
<li  id="slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-2.jpg">
</li>
<li  id="slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-3.jpg">
</li>
<li  id="slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-4.jpg">
</li>
<li  id="slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-5.jpg">
</li>
<li  id="slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-6.jpg">
</li>
<li  id="slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-7.jpg">
</li>

</ul>

 </div>


</body>
</html>

Upvotes: 0

Views: 377

Answers (1)

user4698813
user4698813

Reputation:

Your code doesn't work because:

  • left only applies to elements that are positioned in some way (relative, absolute, fixed) with position. So add that to your li/img CSS. Alternatively, you could use transform: translateX(-500px);

JSFiddle - http://jsfiddle.net/njyu7qhk/1/

So, the relevant CSS should look like this:

@-webkit-keyframes slide {
    0% { left: -500px; }
    100% { left: 0; }
}

ul.slides li:target {
    z-index: 100;
    position: relative;
    -webkit-animation: slide 1s;
}

I also removed the quotes in the keyframes name. It seems to work with them, but I think it's 'standard' to name it without the quotes. Not completely sure on that though.

Good luck.

Upvotes: 1

Related Questions