Embedded Files
Hazırlayan : HÜSEYİN KARAKOÇ
Bootstrap Carousel Nedir ?
Bootstrap eşi benzeri olmayan birşey. Herşey hazır ve mobil uyumlu olarak elinizin altına kadar geliyor. Menü, slider, blog tasarımı vs. bootstrap'ın slider'ini anlatacağım
Aşağıdaki kısımda sliderin alt tarafında, sliderdeki resim adedi kadar nokta görünmesini sağlamak içindir. Sliderinizde kaç tane resim kullanacaksanız burayı o kadar arttırmanız gerekmektedir. -"class="active""- kısmını değiştirmenize gerek yok.
DATA-TARGET
"data-target" özelliği, özellikle Bootstrap gibi yaygın olarak kullanılan web çerçevelerinde sıkça kullanılır. Örneğin, bir menüyü açmak veya bir pencereyi açmak gibi işlevleri gerçekleştirmek için sık sık kullanılır.
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
Bu kısımda sliderdeki resimleri gösteriyoruz.Normalde img lerdeki height ve weight olmuyor onları ben ekledim. Burada height in bir etkisi yok aslında weight i yazdığınızda otomatik olarak height i ayarlıyor. Resmin üzerine yazı vs yazmak isterseniz div in içerisinde yazabilir ve konumlandırabilirsiniz.
<div class="item active">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200" />
</div>
DATA-SLİDE KODU
Slaytlar arasında ileri geri (nex veya prev) gitmek ve slayt pozisyonlarını değiştirmek için kontrol ikonları kullanılır. Bu kısımda birşey değiştirmenize gerek yoktur ve sliderın sağında ve solunda görünen oklar içindir.
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
D-NONE D-MD-BLOCK KODU
Öğeleri gizlemek için herhangi bir yanıt veren ekran varyasyonu için .d-nonesınıfı veya sınıflardan birini kullanmanız yeterlidir..d-{sm,md,lg,xl}-none
.d-*-noneBir öğeyi yalnızca belirli bir ekran boyutu aralığında göstermek için bir sınıfı bir sınıfla birleştirebilirsiniz .d-*-*; örneğin, .d-none .d-md-block .d-xl-noneöğeyi orta ve büyük cihazlar hariç tüm ekran boyutları için gizler.
bu resimleri eklediğimizde slayt şeklinde sıralı şekilde resimler geçiş yapacak isterseniz birde resimlerin altına yazı yazabilirsiniz div açarak şu kodu yazmanız yeterli
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
En son kısımda bu şekil src parametresi içine resimlerinizi ekleyerek güzel ve estetik şekilde slaytınızı oluşturursunuz .Hem sayfanızda dağınık bir görüntü oluşmaz ve tek bir yerde hepsini toplayabilirsiniz.
Page updated
Report abuse