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
Hazırladığım ve yüklediğim tüm dersleri deneyip çalıştığını onayladıktan sonra ekliyorum. Çalışmayan kodlar deneyimli kişiler için sorun olmayabilir ama yeni başlayanlar için problemdir. Hem yazılıma gönül vermiş sevgili arkadaşlarıma yardımcı olmak hem daha sonra lazım olduğunda arama süremi kısaltmak için paylaşıyorum.. -- *Bilgi paylaştıkça çoğalır. *Bir mum diğer mumu yakmakla ışığından bir şey kaybetmez. Aksine birlikte etrafı daha çok aydınlatırız. -- Lisede Ağ sistemleri ve Yönetimi bölümü Üniversitede de Bilgisayar Programcılığı okudum. Şuanda da Kahramanmaraş'ta olan Gemciler Güven Metal Sanayi ve Ticaret A.Ş firmasında Bilgi İşlem Müdürü olarak çalışmaktayım. Yaptığım işe ek olarak yine Kahramanmaraş'ta olan 1453 Yazılım firmasının kurucu ortaklarından biriyim. ----- 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