<div class="slider"> <figure> <figcaption> <a href="test.html">Test deneme</a> </figcaption> <img src="http://lorempixum.com/g/300/200/sports/1" /> </figure> <figure> <figcaption> <a href="test.html">Test deneme 2</a> </figcaption> <img src="http://lorempixum.com/g/300/200/sports/2" /> </figure> <figure> <figcaption> <a href="test.html">Test deneme 3</a> </figcaption> <img src="http://lorempixum.com/g/300/200/sports/3" /> </figure> <nav> <a data-slide="1"></a> <a data-slide="2"></a> <a data-slide="3"></a> </nav> </div>
.slider { width: 300px; height: 200px; position: relative; overflow: hidden; font-family: Tahoma, sans-serif; font-size: 12px; -webkit-box-shadow: 0px 0px 10px #CCC; } .slider figure { padding: 0; margin: 0; opacity: 0; position: absolute; top: 0; left: 0; width: inherit; height: inherit; -webkit-transition-duration: 0.5s; } .slider figure img { z-index: 0; margin-top: -200px; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; } .slider figure figcaption { display: block; position: absolute; bottom: 0; left: 0; background-color: gray; opacity: 0; width: inherit; margin-bottom: -200px; color: #FFF; -webkit-box-shadow: 0px 0px 15px #222; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.9, #555), color-stop(0.1, #444) ); } .slider figure figcaption a { color: inherit; text-decoration: none; padding: 10px; display: block; } .slider figure.slide-in { -webkit-transition-duration: 1.5s; opacity: 1; } .slider figure.slide-in figcaption { -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in; opacity: 0.9; margin-bottom: 0; } .slider figure.slide-in img { -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; opacity: 1; margin-top: 0; } .slider nav { width: inherit; text-align: center; position: absolute; top: 10px; } .slider nav a { display: inline-block; width: 10px; height: 10px; -webkit-border-radius: 5px; background-color: #777; -webkit-transition-duration: 0.3s; -webkit-box-shadow: 1px 1px 1px #333 inset, 1px 1px 6px #DDD; cursor: pointer; } .slider nav a.slide-in { -webkit-transition-duration: 0.3s; background-color: #222; }
$('.slider figure:first, .slider nav a:first').addClass('slide-in'); $('nav a').click(function() { $('.slider figure, nav a').removeClass('slide-in'); $('.slider figure:eq(' + ($(this).data('slide') - 1) + ')').addClass('slide-in'); $(this).addClass('slide-in'); });