SharePoint Haber Uygulaması #4 – jQuery News Slider

Merhaba Arkadaşlar,
Bu yazımızda haber modülümüz de kullanmak üzere ansayfayamıza yerleştireceğimiz jQuery ile yapılmış bir Haber Slider’ı anlatacağım.

Bu işlem için ücretsiz bir plug-in olan Slider Pro’yu kullanacağım. Bu plug-in’e http://bqworks.com/slider-pro/ adresinden ulaşabilirsiniz. Ben kendi demom için http://bqworks.com/slider-pro/#example5 adresindeki örneği kullanacağım.

Bu Plug-in’i nasıl kullanacağız

https://github.com/bqworks/slider-pro/archive/master.zip adresinden ilk olarak plug-in imizi indirelim ve bir klasöre çıkartalım
Examples klasöründe yer alan example5.html dosyasını açalım ve slider’ın nasıl gözüktüğüne bakalım
Dosyanın kaynak kodlarını düzenleyebileceğimiz şekilde açalım
Dikkat edeceğimiz kod kısımları
1. Referans olarak eklenen js ve css dosyaları
2. Plug-in’in çağırıldığı ve ayarlarının belirtildiği kısım
3. Slider’ı oluşturan html yapısı
Slider’ın görünümünde ufak değişiklikler yapalım
1. sp-slides sınıflı div’in altında yer alan sp-slide isimli div içerisindeki sp-caption sınıflı div i silelim ve yerine aşağıda ekran görüntüsünde yer alan h3 ve p elementlerini ekleyelim
2. Example5.html dosyasını refresh ettiğimizde farkı görebilirsiniz
Slider’ın yapısal kısmını aşağıdaki görseli inceleyerek daha iyi anlayabilirsiniz.
- slider-pro sınıflı bir genel kapsayıcı
  - sp-slides sınıflı slide’ları barındıran kapsayıcı
    - sp-slide sınıflı her slide için yer alan div’ler
  - sp-thumbnails sınıflı thumbnail’leri barındıran kapsayıcı
    - sp-thumbnail sınıflı her slide’a ait thumbnailllerin yer aldığı divler
Slider’a hazırlık için gerekli dosyaları aşağıdaki görselleri takip ederek Site Assets kitaplığında daha önce açtığımız klasörlere taşıyalım
1. slider-pro-master\dist\js kalsöründe yer alan jquery.sliderPro.min.js dosyasını Site Assets altındaki js klasörüne
2. slider-pro-master\dist\css klasöründeki slider-pro.min.css dosyasını Site Assets altındaki css klasörüne
3. slider-pro-master\dist\css\Images klasöründeki dosyaları ise Site Assets altındaki img klasörüne taşıyalım
Son olarak boş bir html dosyası oluşturup içerisine en son görselde yer alan içeriği ekleyip bu dosyayı da SPNews.html olarak kaydedip Site Assets altındaki html klasörüne taşıyalım.