Alışılagelmiş slayt scriptlerinden biraz daha farklı bir slayt resim scripti. Minik önizleme ile zenginleştirilmiş hoş bir görünüme kazanan bu scripti aşağıdan inceleyebilir ve indirebilirsiniz.
Scriptin çalışan örneği:
Demo
Scripti indir:
Download
<!DOCTYPE html>
<html lang="en">
<head>
<title>AhmetCetintas » Elastik Resim Slayt</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Elastic Image Slideshow with Thumbnail Preview" />
<meta name="keywords" content="jquery, css3, responsive, image, slider, slideshow, thumbnails, preview, elastic" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
</head>
<body>
<div class="container">
<h1>AhmetCetintas.Com Elastik Resim Slayt Script</h1>
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h2>Creative</h2>
<h3>Geek</h3>
</div>
</li>
<li>
<img src="images/large/2.jpg" alt="image02" />
<div class="ei-title">
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img src="images/large/3.jpg" alt="image03"/>
<div class="ei-title">
<h2>Tranquilent</h2>
<h3>Compatriot</h3>
</div>
</li>
<li>
<img src="images/large/4.jpg" alt="image04"/>
<div class="ei-title">
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img src="images/large/5.jpg" alt="image05"/>
<div class="ei-title">
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
<li>
<img src="images/large/6.jpg" alt="image06"/>
<div class="ei-title">
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img src="images/large/7.jpg" alt="image07"/>
<div class="ei-title">
<h2>Photography by</h2>
<h3>Bartek Lurka</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
</ul><!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
<div class="reference">
<p class="demos"><span>Demo 1<span> | <a href="index2.html">Demo 2 (otomatik baslar)</a></p>
</div>
</div><!-- wrapper -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
easing : 'easeOutExpo',
titleeasing : 'easeOutExpo',
titlespeed : 1200
});
});
</script>
</body>
</html>
Türkçe karakter sorununu da çözerseniz çok güzel olur..
Türkçe karakter sorunu scriptin kullandığı font kaynaklı. Bu sebeple rar dosyası içindeki demo.css de font seçimini değiştirip Arial yaptım. İstersen yeniden indirebilirsin. Ayrıca eğer sen farklı bir font kullanmak istersen şu kodlarla bu işlemi gerçekleştirebilirsin.
@font-face {
font-family: seçtiğinfontadı;
src: url(seçtiğinfontdosyaadresi);
}
daha sonra Arial olan kısmı seçtiğin font adıyla değiştir. Hepsi bu