- Katılım
- 15 Ara 2019
- Mesajlar
- 11
- Beğeniler
- 3
- İletişim
Slider Örneğine Ait Açıklamalar
Html Bölümü
Slider sayfa içerisinde pozisyon olarak hangi konumda gözükmesini istiyorsanız, sayfanın o konumuna aşağıda bulunan html kodlarını eklemeniz gerekir.
Kullanmak istediğiniz bütün fotoğrafları, aralarında boşluk olmaması şartı ile yerleştirin. CSS ile başlangıç aşamasında yalnız 1
Tetikleyici olarak kullanılmakta olan button.png fotoğrafını da farklı bir div etiketi içerisinde yer alacak şekilde yan yana 10 defa yerleştirmeniz gerekiyor. Fakat her biri için farklı bir id vermeniz gerekiyor, çünkü JQuery bölümü dahilinde hangi kısma tıklanmaktaysa bu tıklanma reaksiyonuna göre tepki gösterece ve işlem sağlayacaktır.
Css Bölümü:
Aşağıda belirtmiş olduğum alan dahilinde CSS kodlarını kendi isteğinize göre düzenleyerek kullanabiliriz. Önem arz eden kısımlar kodların yan tarafında açıklanmıştır.
JQuery Bölümü:
Html bölümünde gösterilmesi gereken bütün fotoğraflar için birer buton yerleştirdik ve bu butonlara ayrı id'ler yazdık.
Şimdi ise bütün butonlar için aşağıda vermiş olduğum örnekteki gibi bir özellik eklemeliyiz. Aşağıda yer alan button1 için çalışması gereken özelliği görebilir ve diğer butonlar için çoğaltma işlemini kendiniz gerçekleştirebilirsiniz. Ayriyeten örnek dosyalarını download işlemi gerçekleştirirseniz bütün kodları görebilirsiniz.
ALIINTIDIR...
Html Bölümü
Slider sayfa içerisinde pozisyon olarak hangi konumda gözükmesini istiyorsanız, sayfanın o konumuna aşağıda bulunan html kodlarını eklemeniz gerekir.
Kullanmak istediğiniz bütün fotoğrafları, aralarında boşluk olmaması şartı ile yerleştirin. CSS ile başlangıç aşamasında yalnız 1
Linkleri görebilmek için kayıt olmanız gerekmektedir
fotoğrafın gözükmesi gerektiğini ve diğerlerinin ise gizlenmesi gerektiğini sağlamış olacağız.Tetikleyici olarak kullanılmakta olan button.png fotoğrafını da farklı bir div etiketi içerisinde yer alacak şekilde yan yana 10 defa yerleştirmeniz gerekiyor. Fakat her biri için farklı bir id vermeniz gerekiyor, çünkü JQuery bölümü dahilinde hangi kısma tıklanmaktaysa bu tıklanma reaksiyonuna göre tepki gösterece ve işlem sağlayacaktır.
Kod:
<div id="slideShow">
<img src="sliderImages/ustfoto01.jpg" id="foto1" />
<img src="sliderImages/ustfoto02.jpg" id="foto2" />
<img src="sliderImages/ustfoto03.jpg" id="foto3" />
<img src="sliderImages/ustfoto04.jpg" id="foto4" />
<img src="sliderImages/ustfoto05.jpg" id="foto5" />
<img src="sliderImages/ustfoto06.jpg" id="foto6" />
<img src="sliderImages/ustfoto07.jpg" id="foto7" />
<img src="sliderImages/ustfoto08.jpg" id="foto8" />
<img src="sliderImages/ustfoto09.jpg" id="foto9" />
<img src="sliderImages/ustfoto10.jpg" id="foto10" />
<div id="butonlar">
<img src="sliderImages/button.png" id="button1" />
<img src="sliderImages/button.png" id="button2" />
<img src="sliderImages/button.png" id="button3" />
<img src="sliderImages/button.png" id="button4" />
<img src="sliderImages/button.png" id="button5" />
<img src="sliderImages/button.png" id="button6" />
<img src="sliderImages/button.png" id="button7" />
<img src="sliderImages/button.png" id="button8" />
<img src="sliderImages/button.png" id="button9" />
<img src="sliderImages/button.png" id="button10" />
</div>
</div>Aşağıda belirtmiş olduğum alan dahilinde CSS kodlarını kendi isteğinize göre düzenleyerek kullanabiliriz. Önem arz eden kısımlar kodların yan tarafında açıklanmıştır.
Kod:
<style type="text/css">
#slideShow{ // bu slider'a ait olan temel katmanımız
width:750px; // genişliği ve yüksekliği fotoğraflara göre ayarlıyoruz.
height:350px;
margin:0px;
padding:0px;}
#foto10,#foto9, #foto8, #foto7, #foto6, #foto5, #foto4, #foto3, #foto2
{display:none;} // ilk anda görünecek olan resim haricindeki tüm resimleri gizliyoruz.
#butonlar{ // tıklanacak olan resimleri koyduğumuz div
position:relative;
bottom:60px;
width:458px;
margin:0px auto;
}
#slideShow img{
cursor:pointer;
margin:0px;}
</style>Html bölümünde gösterilmesi gereken bütün fotoğraflar için birer buton yerleştirdik ve bu butonlara ayrı id'ler yazdık.
Şimdi ise bütün butonlar için aşağıda vermiş olduğum örnekteki gibi bir özellik eklemeliyiz. Aşağıda yer alan button1 için çalışması gereken özelliği görebilir ve diğer butonlar için çoğaltma işlemini kendiniz gerçekleştirebilirsiniz. Ayriyeten örnek dosyalarını download işlemi gerçekleştirirseniz bütün kodları görebilirsiniz.
ALIINTIDIR...