Bootstrap Carousel - Slider

Bootstrap Carousel - Slider

Bootstrap Carousel - Slider'i inceleyelim

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.

    <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.

<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>

 

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>

 

Diğer derslerimizde görüşmek üzere.

Mustafa BÜKÜLMEZ
Web sitesi, ERP, MRP, CRM ve kişiye özel uygulamalar hazırlanır. -- Deneyip çalıştığını onaylamadan çok nadir ders eklerim. Denemediklerim ise eski makalelerimdendir. Hem bildiklerimi paylaşmak hemde her seferinde aramamak için yayınlıyorum. -- *Bilgi paylaştıkça çoğalır. *Bir mum diğer mumu yakmakla ışığından bir şey kaybetmez. Aksine Daha çok ışık yayar. -- 1992 İstanbul doğumluyum. Kahramanmaraş'ta yaşıyorum. Lise: Ağ sistemleri ve Yönetimi, Üniversite: Bilgisayar Programcılığı.. -- 07.2014 tarihinden beri bir firmada Bilgi İşlem Müdürü olarak çalışmaktayım. -- Kişisel Bloğum : https://csharpiledundenbugune.blogspot.com.tr/
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bootstrap tan nasıl css ve js kodlarını indirecez.
http://getbootstrap.com/ sitesine girdiğinde karşına çıkar indirme yeri.

Yukarı Git