Kodlama Merkezi Yazılımcı Dostu Paylaşım Merkezi
Günümüzde bir çok web sitesinin anasayfasında rastladığımız, yeni eklenen içeriklerin hızlı ve dikkat çekici şekilde görüntülenmesini sağlayan slider yapımını anlatacağım.
Sliderimızı oluşturmak için bir adet html sayfamız, slideri görselleştirmek için css dosyamız ve etkileşimi sağlamak içinse javascript dosyasına ihtiyacımız olacak. Bu dosyaları oluşturduğunuzu varsayarak direk kodlara geçiyorum.
index.html dosyası içindeki head kısmında gerekli olan tanımlamaları yapalım. Manşet haber sliderında jquery kullandığımız için jquery-2.1.4.js veya jquery-2.1.4.min.js dosyasını internetten indirip projenize eklemeyi unutmayın.
index.html head kısmının içeriği;
|
1 2 3 4 5 6 |
<meta charset="utf-8"> <title>CSS & Jquery Slider</title> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="slider.js"></script> |
index.html body kısmının içeriği;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="manset"> <ul id="manset"> <li> <a href="kodlamamerkezi.com" title="Kodlama Merkezi"> <img src="img/res1.jpg" alt="Kodlama Merkezi" /> <span class="mTitle"> Kodlama Merkezi </span> </a> </li> <li> <a href="kodlamamerkezi.com" title="Kodlama Merkezi"> <img src="img/res2.jpg" alt="Kodlama Merkezi" /> <span class="mTitle"> Kodlama Merkezi </span> </a> </li> </ul> <div class="sayfalama"> <ul id="sayfalama"> <li> 1 </li> <li> 2 </li> </ul> </div> </div> |
<ul id=”manset”> içerisindeki <li> sayısını arttırarak resimleri, <ul id=”sayfalama”> içerisindeki <li> sayısınıda arttırarak istediğiniz kadar numaralandırma ekleyebilirsiniz. Tabi birde resimlerin yer aldığı img klasörünü ve göstermek istediğiniz resimleri hazırlamanız gerekiyor.
reset.css dosyasının içeriği,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } |
style.css dosyamızın içeriği
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.manset {width: 800px;height: 385px;overflow: hidden;-webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.75);} .manset img {width: 800px;height: 385px;} .manset > ul#manset {width: 800px;height: 342px;overflow: hidden;} .manset > ul#manset > li {width: 800px;height: 342px;float: left;overflow: hidden;position: relative;font-size: 28px;font-weight: 600;font-family: 'Roboto', sans-serif;} .manset > ul#manset > li > a {display: block;text-decoration: none;outline: none;color: #fff;} .manset > ul#manset > li > a > span.mTitle {width: 100%;height: 57px;background: rgba(0,0,0,.8);display: block;position: absolute;left: 0;bottom: 0;line-height: 57px;text-indent: 10px;} .manset > .sayfalama {width: 800px;height: 43px;background: #1e1e1e;float: left;overflow: hidden;} .manset > .sayfalama > ul#sayfalama {width: 627px;height: 25px;margin: 0 auto;border: 1px solid #2d2d2d;margin-top: 9px;} .manset > .sayfalama > ul#sayfalama > li {float: left;font-size: 14px;font-weight: 700;color: #a6a6a6;height: 25px;border-right: 1px solid #282828;font-family: Arial;text-align: center;line-height: 25px;padding: 0 9px;cursor: pointer;} .manset > .sayfalama > ul#sayfalama > li:last-child {border-right: 0;} .manset > .sayfalama > ul#sayfalama > li:hover, .solContent > .manset > .sayfalama > ul#sayfalama > li.aktif {background: #47bab1;color: #fff;} .aktiff {background-color:red; color:white;} |
Son olarak javascript kodlamızı slider.js oluşturup içine bu kodları ekleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$(function() { $("ul#sayfalama > li:first").addClass("aktif"); $("ul#manset li").hide(); $("ul#manset li:first").show(); var toplamLi = $("ul#manset li").length; var deger = 0; $("ul#sayfalama > li").click(function() { var indis = $(this).index(); $("ul#manset li").hide(); $("ul#manset li:eq("+indis+")").fadeIn(250); $("ul#sayfalama > li").removeClass("aktif"); $(this).addClass("aktif"); deger = indis; return false; }); $.dondur = function () { $("ul#sayfalama > li").removeClass("aktif"); $("ul#manset li").hide(); if (deger < toplamLi -1) { deger++; $("ul#manset li:eq("+deger+")").fadeIn(250); $("ul#sayfalama > li:eq("+deger+")").addClass("aktif"); }else { deger = 0; $("ul#manset li:first").fadeIn(250); $("ul#sayfalama > li:first").addClass("aktif"); } return false } var sliderDondur = setInterval('$.dondur()',5000); $(".manset").hover(function() { clearInterval(sliderDondur); },function() { sliderDondur = setInterval('$.dondur()',5000); }); }); |
$(“ul#sayfalama>li”).click(function() bu satırdaki .click yazısını hover ile degiştirirsek mouse üzerine gelince otomatik olarak değişen bir slayta sahip olabilirsiniz. Biraz css ve javascript bilgisi ile sliderınızı kendi isteğinize göre biçimlendirip kullanabilirsiniz.
Bir sorun ile karşılaşırsanız yorum göndermeyi unutmayın.
çalışmıyor resimler dönmüyor
hata bendeymiş kusura bakma js dosyasını yanlıs indirmişim tşk ederim
Merhaba,
Bu slideri wordpress’e nasıl uygulayabiliriz.
Teşekkürler