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
[php]
<!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=’https://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=”https://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> [/php]
Ne Düşünüyorsun?
- Beğen
- Hahaha
- Sevimli
- İnanılmaz
- Üzgün
- Sinirli
