Bootstrap'ta Carousel Slider Kullanımı | aliyasindogan.com
BOOTSTRAP'TA CAROUSEL SLİDER KULLANIMI

BOOTSTRAP | Ali Yasin Doğan | 23.09.2016 | 6686

Bootstrap'ta Kütüphanesindeki Bileşenlerin Örnekleriyle Birlikte Paylaşacağım. İlk Olarak da Slider Olarak Bildiğimiz Carouseli Paylaşacağım.

Bootstrap Carousel Slider Kodları:

            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
 
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                     <img src="http://placehold.it/1140x400/00ffbf/000000" />
                        <div class="carousel-caption">
                            Asp.Net
     
                        </div>
                    </div>
                    <div class="item">
                              <img src="http://placehold.it/1140x400/64FE2E/000000" />
                        <div class="carousel-caption">
                            Bootstrap
                        </div>
                    </div>
                    <div class="item">
                 <img src="http://placehold.it/1140x400/2E2EFE/000000" />
                        <div class="carousel-caption">
                            Bootstrap
                        </div>
                    </div>
 
                </div>
 
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
 
        Örnek:
 
 

 




 Etiketler:  bootstrap carousel slider