Bootstrap Carousel - Slider
Selam arkadaşlar bu dersimizde Bootstrap Carousel yani slider i inceleyelim.
Arkadaşlar biliyorsunuz ki tasarım konusunda sıkıntı yaşayan ve web siteleri hazırlamak isteyenler için 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. Bizde bugun bu bootstrap'ın slider'ini inceleyeceğiz. Aşağıda gördüğünüz gibi HTML kodlarını verdim. Yalnız bunun için bootstrap'ın sitesinden css ve js dosyalarını indirmeniz gerekmektedir. Yoksa bu kodlar bir işinize yaramaz.
Markup
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200" />
</div>
<div class="item">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200"/>
</div>
<div class="item">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200"/>
</div>
<div class="item">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200"/>
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
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.
Markup
<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.
Markup
<div class="item active">
<img src="img/slider/img.jpg" alt="" class="" height="350" width="1200" />
</div>
Bu kısımda birşey değiştirmenize gerek yoktur ve sliderın sağında ve solunda görünen oklar içindir.
Markup
<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>
Diğer derslerimizde görüşmek üzere.
http://mustafabukulmez.com/
http://mustafabukulmez.com/
0 Yorum: