Home JQuery Sitene Mükemmel JQuery Slider Ekle ( Videolu anlatım)
Sitene Mükemmel JQuery Slider Ekle ( Videolu anlatım)

Sitene Mükemmel JQuery Slider Ekle ( Videolu anlatım)

1.98K
80

Merhaba Arkadaşlar,

Diğer videolu dersimizde  olan nivo ’ı sitemize nasıl entegre ederbiliriz ile ilgiliydi.Onunla ilgili çok güzel videolu anlatım yaptım. Şimdi ise bir arkadaşımızın  isteği üzerine daha farklı bir sliderın anlatımını yapacağım. Bu slider da çok fazla geçiş animasyonu var  ve istediğinizi seçip uygulayabiliyorsunuz. Zaten bu videoyu yayınlamamın diğer sebebi de budur. İzleyeceğiniz videoda ki sliderın adı skitter slider.  Dersimizde bu sliderı kendi web sitemize nasıl entegre edeceğiz ile ilgili çekilmiş ayrıntılı videodur. Tabi bazı arkadaşlarımızın yine eksiklikleri olabilir . Nedenide büyük bir ihtimalle CSS ve Html konularında eksik olmaları… Ama sitemizde bu
videolar sayesinde yine de kendilerini biraz geliştireceklerine inanıyorum.

Yorumlarınızı eksik etmeyin.

Hayırlı Seyirler.

Videoyu izleyemiyorsanız Youtube.com engellenmiştir.

Çözüm için DNS adreslerinizi aşağıdaki gibi değiştirin.

Tercih edilen DNS Sunucusu:  8.26.56.26

Diğer DNS Sunucusu : 8.20.247.20

.

SLİDER’ ı  Web sitesinden İndirmek İçin TIKLAYIN.

BENİM ÇALIŞMAYI İNDİRMEK İÇİN TIKLAYIN

(1984)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(80)

  1. hocam çok güzel slider çok beğendim sizide tebrik ederim dremewer cs3 den cs6 başarılı bir geçiş yaptınız 🙂

  2. Hocam supersınız dedıgınızı yaptık ama bu calısmayı sayfanın ortasına veya asagıya almak ıstersen nerden yapmalıyız

  3. Hocam kolay gelsin.. nivo-slider3.1 yu .yaptım video nuza bakarak ama ben önceden yaptığım siteye uyguladım.. ordaki resim sabitti.. şimdi sizin yaptığınızı yaptım ama bir hata var.. resimler 4 tanesi alt alta görünüyor .. sizden ricam yardim lütfen…

    1. cabır buyuk olasılıkla jquery kodlarını yanı head ler arasındakı kodları koymadın. Eger orda sorun yoksa. Body ıcındekı scripti yerleştirmedin. Bunlara dikkat ettiysen sorun olmamalı.

  4. hocam doğru şimdi tamam çok teşekkür ederim..bir satır eksik kopyalamışım… birde hocam bu internet olmadan çalışmıyor? bu işi internet gereksimi olmayan yöntemi vermı acaba?

  5. Hocam benim demek istediğim.. bende sizin siteden ve bazı sitelerden indirdiğim hazır css templed var.Bazılarında internet olmasada ve localhost olmasada o resimler yinede otomatik değişiyor ama bu ben yaptığımda ya internet olmalı yada localhost .o yüzden sordum hocam..Saygılarımla..

  6. Bu slider sadece anasayfa için diye biliyorum.

    dostum ben bunu sadece istediğim konularda kullanmak istiyorum.Böyle bir slider var mı?

    Konu içi slider lazım ?
    varmı böyle birşey?

  7. Merhaba hocam,
    ben amatör olarak Asp.net te site yapacam,bu slider örneginizi asp.net siteme ekleyebilirmiyim, eklenirse nasıl yapıldığını anlatırsanız çok sevinirin,
    İyi çalışmalar…

    1. Abdulkadir arkadaşım ,bu slider ı tabikide sisteminizde kullanabilirsiniz. Ama resmi dışarıdan girecekseniz yazılım kısmını yazmanız lazım diğer türlü sitede gösterdiğim gibi kullanabilirsiniz. Ama her defasında resimleri hosta girip kendiniz değiştirmelisiniz

  8. Hocam çok teşekkür ederim . uzun zamandan beri aradığım bir slider örneğiydi. lakin bir sorum olacak ben çok profesyonel birisi değilim amatör olarak ilgileniyorum bu işle. araç resimleri burada 800×300 olarak görünüyor benim koyacagım resimlerde araba resimleri ama ben 800×300 olarak yaptıgım fotograflar oldukça geniş oluyor ve resim bozuluyor . bu konuda ne yapmam gerekir. yani uygun boyuta aldıgımda resmi oldugu gibi gösterebilmem için.. teşekkür ederim

    1. mahmut arkadaşım style.css dosyasının içeriğini değiştirmen lazım. Css düzenlemen lazım kısacası.

      .border-skitter { margin:0px auto; border:1px solid #000; width:800px; height:300px; background:#333; margin-bottom:40px; -moz-box-shadow:rgba(0,0,0,0.5) 0 0 10px; }

      yukarıdaki satırını düzeltmelisin. Ona göre bazı değişiklikler olabilir ama sadece sana tiyo bu. 🙂 Ona göre düzenlemeleri yap

      1. Sanırım Nasıl yapacağımı buldum. Belki başka arkadaşlarında işine yarar umuduyla paylaşmak istedim.
        “Skitter.Styles.css” dosyasında 3ncü satır aşağıdaki gibi düzenlenirse slider büyük olduğu takdirde resimleri ortalama yapılabiliyor.

        .box_skitter img { margin-top: 100px;margin-left:100px; max-width:none; } /* Tip for stildv */

  9. Ömer hocam bir soum daha olacaktı. ben sizin çalışmanızı indirdim fakat orjinal sitesinden indirdiğim örnekte mediumbox olarak işaretlenen altında yuvarlaklar olanını seçtim. yalnız ben bu örneği explorer9’ta uyguladığımda herhangi bir sıkıntı yok. explorer 8 lerde o yuvarlaklar kare olarak görünüyor bu konuda bir şey yapabilirmiyiz?

  10. Arkadaşlar Merhaba, ben web sitemin Background’unda bir flash swf oynatmak istiyorum 1000px 1000px boyutlarında ne yaptıysam olmadı bu konu hakkında bir bilgisi olan var mı? :(((

  11. Ömer Bey tekrar merhaba,birçok ayarı değiştirerek istediğim hale getirdim şimdi 2 küçük sorunum kaldı 🙂
    1. si: numaraların olduğu bölümü slayt artımında ya da eksiltilmesinde manuel olarak elle ortalamak yerine slayt sayısına göre otomatik ortalı gelecek şekilde ayarlayabiliyor muyuz? ve olabiliyorsa nasıl?
    2.si : eklediğim resimlerin üzerine otomatik olarak gelecek bir logo eklemek istiyorum yani logo sabit olarak her slayt ta gözükecek ama slayt görseli onun altına gelecek, bu yapılabilir mi? Alternatif olarak slayt görsellerine logoyu ekleyip öyle ekliyorum imagelar arasına ama istediğim bu değil elbette. Acaba yardımcı olabilir misiniz?
    Teşekkür ederim.

  12. Arkadaşlar merhaba Ömer Bey’e de facebook grubundan sordum ama kendisi zaten oldukça yoğun o geri dönene kadar belki bu platformda bana yardımcı olacak birileri vardır diye düşündüm.

    Sorunum şu, bu Skitter sliderda slaytlar arasındaki geçiş sürelerini değiştirmek istiyorum. Ama hangi dosyadan nasıl yapacağımı bulamadım.

    Acab abenim gibi bu sorunu yaşamış ve çözmüş, ya da yaşamamış ama bilgisi olan var mıdır bana yardım edecek? 🙂

  13. @Güneş Üçer sorunun çözümü şu şekilde…
    $(‘.box_skitter_large’).skitter({interval: 3000});

    bu kodu ana sayfanın kod kısmındaki // Highlight ın üstündeki parantezde optıons olan kodun yerine yapıştıryorsun satırın tamamını sileceksiniz.

    interval 3000 değilde atıyorum 8000 olarak deneyin sürenin uzadığını göreceksiniz…
    İyi çalışmalar

    1. Amaç OKAY; çok teşekkür ederim, ben kimseden çözüm gelmeyince daha iptidai bir yöntem buldum efektlerin özelliklerinin bulunduğu dosyadan tek tek zamanlamalarıyla oynadım:)
      Bir daha değiştirmek istersem bu kolay yöntemi deneyeceğim. Zaman ve emek ayırıp ilgilendiğin için teşekkürler, eminim aynı sorunu yaşayan bir çok arkadaşın işine yaracaktır.

  14. hocam php admin panelinden resim ekleme ve resim değiştirme veritabanından link vererek haber çekerek nasıl oluşturabiliriz

  15. Hocam localhost da firefox ve interney explorer da çalışıyor ama google chrome da çalışmıyor. Google chrome da nasıl çalıştıracağız, çok acil yardım

    1. şenol arkadaşıö tüm browserlarda çalışıyor denenmiştir. localhostta çalışmaması hosta attığınızda çalışmayacağı anlamına gelmiyor. kolay gelsin

  16. Hocam, uygulamayı yapmış olduğum sitemin index sayfasının menu çubuğunun altında 998 pixellik bir tablo açtım içine include ettim, index sayfasını açtığımda anasayfamı sola yaslıyor komple, ama bir türlü ortalayamadım. bu uygulamaya ait kodlar benim anasayfamdaki tüm include sayfalarınıda etkiliyor, hangi dosyanın hangi kodunu değiştirsem acaba anasayfam komple ortalı olur. çok teşekkürler ilginiz için. acil lütfen

  17. Meraba güzel çalışma olmuş tebrik ederim. Bi ricam olucaktı JQuery hakkında detaylı bilgiye ihtiyacım var , yani yaklaşık 30 sayfa falan bana yardımcı olabilir misiniz ? Netteki kaynaklar yeterli değil ..
    Teşekkürler 🙂

  18. hocam ben klasöru indirdim gerekli temizleme işlemlerini yaptım çalışıyo ama anasayfama ekleyince resimleri parçalanmış resim olarak gösteriyo ve altalta diziyo bu head ve bodyleri kontrol ettim ama bir sorun bulamadım ne yapmam gerekir yardımcı olursanız sevinirim

    1. hayriye hanım videodakileri tam anlamıyla uygularsanız hiçbir sorun kalmıyor. siz büyük bir ihtimal dosyaların tanımlanmasını index.html dosyasında yazmadınız. benim yaptığım çalışmayı indirin ordan kontrol edin. yapılmışı var yani 🙂

  19. teşekkür ederim hocam hatamı buldum bende birden fazla images dosyası oldugu için tabi haliyle göstermiyomuş digerine images1 deyince sorun çözüldü bide hocam gelen yorumlarıda okudum ama bu sliderin boyutunu nasıl küçültecez yukarıda buna benzer bir sorun var ama ordaki cevapları denememe ragmen bir sonuca ulaşamadım 🙁

  20. Hocam bunu eklentisiz olarak wordpress’e ekleme işinin zorluk derecesi ne kadardır? Yeni başladığım temamda kullanmak istiyorum ama entegre işinde gözüm kesmedi.

  21. merhaba hocam, ben bu slider ı şöyle kullanıyorum,
    sitemdeki menülerden birine tıkladığım jquery load ile içerik yüklüyorum , ve onun içinde gözükmesini istiyorum ama bir türlü yapamadım, siyah bi kutu geliyor, slider ın içeriği gelmiyor, neden kaynaklanabilir ?

    1. emre arkadaşım tam olarak ne demek istediğini anlamadım. Nasıl bu slider ı başka şekilde kullandın , ne yapmak istediğini de yazdıklarından anlamadım. Kusura bakma.

  22. ömer abi ben bu nu worldpress ıcın koymaya calsıtım amma senın o head ve head arasınındakı kodu wp ındex php de yok head head arası yok tek head var bırde html gibi body body arası yok napmam gerekır wp eklentılerı ıyı degıl bu sılederı duzenledım koyma ımkanım yokmu bunu worldprese

  23. tmm abı yukledım plugın oalrakda ama panelden acıyoruk eklentıyı ama sıtede gorunmuyor web sıtesının herhangı bır yerıne kod falan ayzmam gerekıyormu yoksa sadece plugını etkinleştirip ayarları yapmam gerekırmı

  24. slm hocam öncelikle ilginiz için teşekkürler.videoları ve yorumları dikkatlice okudum.lakin bir yerde sıkıntı yaşadım ben php kullanarak site yapmaya çalışıyorum.bu slideri kendi siteme attım görüntüde bi sıkıntı yok resimleri kendi istediğim resimlerle değiştirmeme rağmen halen eski resimler görünüyor.birde ilginç olarak tasarım ekranında ben istediklerim görünüyor çalıştırdığımda orjinalde olanlar ne yapmam gerekiyor.teşekkürler

    1. mehmet arkadaşım resim klasörlerinin içine resimlerini koyduktan sonra php dosyandada resimlerin yolunu değiştirdikten sonra birde xml dosyası var onu bulup tekrardan koyduğun resimlerin yollarını yazman gereklidir.

  25. İyi günler slider da yer alan resimlerin numaralarının görünmemesi mümkün mü?Bunun için ne yapmamız gerekiyor?

    1. tuğrul ve fatma ayşe css klasörünün içinde skitter.styles.css dosyası var onun içinde

      .box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}

      opacity: 0.75 olan değeri 0 yaparsanız görünmez. Kolay gelsin.

  26. gecenin yarısı yine ben ömer bey…
    bu slideri sorunsuz bir şekilde kuramadım .
    Dreamweawer da aynı uygulamalardan geciriyorum fakat
    benim sitenin arka planını değiştiriyor ( arka planda resim var bembeyaz oluyor, üst menülerim sola kayıyor vs. karışıklıklar oluyor.)benim site normalde ortalanmış ve tablolardan oluşturulmuş? çözümü nedir bu sorunun ? teşekkürler.

  27. Abi harikasın sen ya çok uğraştım ama şuan harika bi tasarımım oldu, sıkı bir takipçi kazandın diyebilirim. Kolay gele…

    1. ibrahim Bey, google da skitter slider wordpress olarak aratırsanız plugin olarak bulabilirsiniz. Sonrasında wordpress Eklentilerden bunu yükleyebilirsiniz. Kolay gelsin.

  28. Hocam Çalışma Çok Güzel.Ben Burdaki Resim Sayısını 5’e Düşürmek İstiyorum,Nasıl Yapabilirim.

    1. Ayberk sitene baktım, yorum yaparken yazmış olduğun siteyse… çokkkkkk karışık bir siten var. Kodlama baştan savma, yani siteni nasıl düzenleyeceksin o konuda hiç bilmiyorum. Kolay gelsin.

  29. Hocam deneyimlerinizi ve paylaşımdaki sabrınız için öncelikle şahsınıza teşekkür ederim
    “Sitene Mükemmel JQuery Slider Ekle” dersinizi xxx adresinden indirdiğim duyarlı bir siteye uyguladım sonuç harika sanırım yakın bir zamanda sitemi aktif hale getirir sizinde önerilerinizi alma şansım olur.
    Size danışmak istediğim konu ; Html5 siteyi ön izlemede Normal ekran, ipad ve cep telefonu modunda izlerken sitenin tüm görsel ve yazıları orijinal bir şekijde izlenilen ekrana göre küçülüyor ve doğru bir şekilde görünüyor, ancak sizin dersinizden aldığım slider ölçüsünü otamatik olarak ekrana göre küçültemiyorum. Müsait olduğunuzda bilgi paylaşırsanız çok memnun olurum.

    Tekrar Teşekkür Ederim.

    1. Umdi arkadaşım, Responsive siteler yani her çözünürlüğe göre sitelerde çalışmalar çok farklı oluyor. Yani iyi bir css bilgisine sahip olmalısınız. Bu yüzden slider’ı tüm çözünürlüklere göre ayarlamanız daha da zordur. çünkü sliderlar genelde mobil telefonlarda gözükmezler, iptal olurlar. Genelde tasarımcılar böyle çalışırlar. Kısacası demem o ki sliderlerı kes kopyala yapıştır mantığıyla mobil, tablet uyarlaması yapılamazlar. Bunun için iyi bir css bilgisine sahip olmalısın. Çünkü her slider’ın çalışma mantığı farklıdır.

  30. Merhaba Hocam ;

    Ben sizin derslerden bakıp tablolarla oluşturduğum web siteme bu slider’ı eklemek istiyorum fakat işin içine div girdiğinden yapamadım 🙁

    1. şebnem hanım sitemizde istediğiniz herşeyi bulabilirsiniz aslında. Dreamweaver cs6 derslerimizde div konusu anlatılmıştır. Bu konuda kendiniz geliştirmek istiyorsanız dreamweaver cs6 kitabımı almanızda fayda var. Yeni başlayanlar için herşeyi anlattım. Kolay gelsin.

  31. hocam ben yaptım gayette başarılı oldu sizin görmenizi isterim fakat nereye yollayacağımı bilemedim
    kitap değilde direk sizden ders alamıyormuyuz?
    ayrıca ben cidden webmaster olmak istiyorum html5 siteler kurmak istiyorum mesela morhippo.com gibi siteler kurmam için hangi dersleri almam gerekiyor işe buradan gördüklerimle bir web sitesi tasarlayarak başladım fakat bahsettiğim site gibi siteler kurmak için başka dersler de almam gerekiyor sanırım.sizinle nasıl konuşabilirim?

    1. Şebnem e-mailime gönderebilirsin.yukarıda yasal kurallar menüsünde email adresim yazıyor. ordan mesaj atabilirsin yaptığını. Bu arada o tarz siteler için php ve asp dersleri almalısın.

  32. Selam çalışma için teşekkürler. asp.net te sayfama yükledim site.master a fakat (0x800a1391 – JavaScript çalışma zamanı hatası: ‘$’ tanımsız) hatası alıyorum yardımcı olursanız sevinirim…

    1. Volkan arkadaşım, html olarak denemeni tavsiye ederim. Sonrasında çalışıyorsa zaten asp.net de de çalışacaktır. Bir yerlerde hata yapıyorsun.

  33. Hocam çok detaylı bir açıklama olmuş, uzun zamandır araştırmasını yaptığım bu konu ile artık tarafınızdan bilgi sahibi oldum diyebilirim. Konu hakkında verdiğiniz değerli paylaşımınız benim gibi diğer ihtiyaç sahiplerinin de işine çok yarayacaktır umuyorum, teşekkürler..

  34. Hocam ben dediğiniz her şeyi yapıyorum ama olmuyor siteye farklı yazılar geliyor yardımcı olursanız sevinirim…

    1. Furkan arkadaşım hangi konuda farklı yazılar geliyor. benim Bireysel olarak herkesin işini yapmam mümkün değil. Gelen yazılar hakkında bilgi verirsen yardımcı olmaya çalışırım. Kolay gelsin

  35. Merhaba
    Bi turlu yapamadım sızın yapmıs oldugunuz slıder i indirdim ozip ıcındekı butun klasorlerı mı ftp den atıp sonra vıdeodakı gereken ayarı yapacagız yoksa sadece index olusturup ındex kodlarını sayfamızın ındex ıne mı kopyalayacagız .

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.