Çoklu Bootstrap Carousel Slayt Gösterisi

Tek bir sayfaya veya bir sayfaya Çoklu Önyükleme Dönen Slayt Gösterisi kaydırıcısını nasıl eklerim?

Bu eğitimde, çalışan bir kaynak kodu örneği sunuyoruz. İlk olarak sayfanın alt kısmında bulunan İndirme Kodu butonunu kullanarak örnek kodu indirin.

Sayfaya birden çok önyükleme atlıkarınca kaydırıcısı eklemek ve oluşturmak çok kolay ve basittir.

Öyleyse örnek kodla başlayalım.

Kaynak kodu indirme işlemi tamamlandıktan sonra “multiple-bootstrap-carousels.zip” adlı bir zip dosyası alacaksınız. Zip dosyasını yerel bilgisayar sistemine herhangi bir yere çıkarın.

Çıkardıktan sonra “multiple-bootstrap-carousels” adlı bir dizin bulursunuz, bu dizinde aşağıdaki varlıkları alırsınız:

1. CSS Dizini
2. Yazı Tipleri Dizini
3. Görüntüler Dizini
4. JS Dizini
5. CSS Dizini
6. HTML Dosyası – çoklu-bootstrap-carousels.html

Bu kanıtlar nelerdir?

Bu varlıklar, bir önyükleme birden çok atlıkarınca kaydırıcısı oluşturmak için gereklidir.

• CSS dizini, duyarlı HTML sayfaları tasarlamak için kullanılan bir "bootstrap.min.css" dosyası içerir.
• Font dizini, çeşitli yerleşik grafik simgelerini oluşturmak için önyükleme CSS tarafından kullanılır. Carousel kaydırıcı ok gezinme kontrolü de bu tarafından oluşturulur. Buradan kontrol edebilirsiniz.
• Görüntüler dizini, atlıkarınca kaydırıcısının slaytlarında kullanacağımız tüm görüntüleri içerir.
• JS dizini “jquery.min.js” ve “bootstrap.min.js” olmak üzere 2 js dosyası içerir. jquery.min.js dosyası, jquery'nin web sitelerinde JavaScript kullanma amacını taşıyan bir JavaScript kitaplığıdır. bootstrap.min.js dosyası, önyükleme karuselleri, model formları, araç ipuçları, sekmeler vb. oluşturmak için kullanılan önyükleme çerçevesi js kitaplığı dosyasıdır. bootstrap.min.js dosyası jquery.min.js dosyasına bağlıdır, yüklemeniz gerekir bootstrap js'yi kullanmadan önce. Bootstrap js kütüphane dosyası hakkında daha fazla bilgiyi burada bulabilirsiniz.
• HTML dosyası (multiple-bootstrap-carousels.html) , birden çok dönen kaydırıcının tüm tasarım ve kod kısımlarını içerir.

çoklu-bootstrap-carousels.html dosyası hakkında daha fazla bilgi edelim.

HTML dosyasını herhangi bir kod düzenleyicide açmalısınız. Bilgisayarda herhangi bir kod düzenleme aracı yüklemeniz yoksa, işte bazı ücretli kod düzenleme araçları, herhangi bir kod düzenleme aracını indirin ve yükleyin:

Head bölümünde gerekli tüm CSS & js dosyasını ve dört carousel JS kodunu aşağıdaki gibi yükledik:

kod

 <kafa>
 <title>Çoklu Bootstrap Carousel Slayt Gösterisi Örneği</title>
 <meta karakter kümesi="utf-8">
 <meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1">
 
 <!-- önyükleme css kitaplığı -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery en son kitaplığı (önce bu kitaplığı yükleyin) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- önyükleme js kitaplığı -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- css kodunu özelleştiren carousel -->
 <stil>
 .carousel {
 /* buraya kaydırıcı yükseklik genişliği gibi özelleştirme css ekleyebilirsiniz */
 }
 </style>
 
 <!-- carousel js kodu -->
 <script>

 /* ilk atlıkarınca slayt gösterisi */
 $('#carousel-1').carousel({
      // Döngü kayması arasındaki gecikme süresi, Yanlış ise döngü yok
      aralık: 500,

      // Fare girişinde slaydı duraklatır ve mouseleave'de kaldığı yerden devam eder.
      duraklatma: "vurgu",

      // Karuselin sürekli olarak dönmesi mi yoksa sabit duruşları mı olması gerektiği.
      sarma: doğru,

      // Karuselin klavye olaylarına tepki vermesi gerekip gerekmediği.
      klavye: doğru
 });
 
 
 /* ikinci atlıkarınca slayt gösterisi */
 $('#carousel-2').carousel({
      aralık: 1000,
      sarma: doğru,
      klavye: doğru
 });
 
 
 /* üçüncü atlıkarınca slayt gösterisi */
 $('#carousel-3').carousel({
     aralık: 2000,
     sarma: doğru,
     klavye: doğru
 });
 
 
 /* ileri atlıkarınca slayt gösterisi */
 $('#carousel-4').carousel({
     aralık: 3000,
     sarma: doğru,
     klavye: doğru
 });
 </script>
 </head>

Body bölümünde iki carousel HTML kodunu tanımlıyoruz. Şimdi, ilk kaydırıcı kodunun çalışmasını açıklıyoruz. Bir satır sınıfı div'i col-md-6 sınıfını kullanarak iki sütuna ayırdık. Ve ilk sütuna, aşağıdaki gibi birinci carousel kaydırıcısının HTML kodunu ekledik.

 <div class="row">
 <!-------------- ilk sütun başlangıcı -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Atlıkarınca Bir</h3></center>
   <!-------------- ilk atlıkarınca slayt gösterisi başlangıcı -------------->
   <div class="carousel slayt" data-ride="carousel">
   <!-- madde işaretlerini kaydırır -->
   <ol class="döner göstergeleri">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- slaytlar için paketleyici -->
   <div class="carousel-inner" rolü="listbox">
    
    <!-- slayt 1 -->
    <div class="item aktif">
     <img src="images/girl-1.jpg" alt="Hanya">
    </div>
 
    <!-- slayt 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Hanya">
    </div>
 
    <!-- slayt 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Çiçek">
    </div>

   </div>

   <!-- sol ve sağ slaytlar kontrol okları -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Önceki</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Sonraki</span>
   </a>
  </div>
  <!-------------- ilk atlıkarınca slayt gösterisi sonu -------------->
  </div>
 </div>
 <!-------------- ilk sütun sonu -------------->
</row>

Yukarıdaki HTML koduna üç parça atlıkarınca kaydırıcısı var

• Kaydırıcı Madde İşaretleri
• Resim Slaytları
• Kaydırıcı Gezinme

Slider Bullets bölümü, HTML'nin order list etiketi kullanılarak oluşturulmuştur. <ol>, önyükleme CSS dosyasında tanımlanan carousel-indicators adlı bir sınıf kullanır. Ve her <li> etiketinin data-target=”#carousel-1″ özelliği vardır; burada #carousel-1 , örnek kodda ilk carousel js kodunda kullandığımız kimliğin aynısıdır.

Slider Image Slides bölümü, sınıf öğesi içeren bir div'e sahiptir. Bu div'in her birinde, slayt görüntüsünü yüklemek için bir görüntü etiketi ekledik.

Kaydırıcı Gezinme , görüntü slaytlarında sola veya sağa gezinmek için kullanılır. Gezinme okları, Glyphicon adı verilen önyükleme grafik simgeleri tarafından oluşturulur. Gezinme düğmeleri, önyükleme atlıkarınca veri özniteliği işleviyle ve atlıkarınca kontrol sınıfıyla bağlantı <a> etiketine sarılır. <a> etiketinin href özniteliğine, daha önce eklediğimiz ID'yi ( #carousel-1 ) kaydırıcı madde işaretleri kısmına ekledik. Bu kimlik, ilk kaydırıcı işlevini birinci kaydırıcı HTML kodunda etkinleştirmek için ilk dönen slayt gösterisi js kodunda kullanılır.

İkinci kaydırıcı kodumuza, ikinci kaydırıcı js kodu, ikinci kaydırıcı madde işaretleri ve gezinme HTML kodu gibi kaydırıcı kodunun üç parçası için başka bir #carousel-2 kimliği atadık.

Ümit etmek! Çocuklar, öğretici ve örnek kodu açıklayıcı ve sizin için çalışıyor buluyorsunuz. Örnekte kodun her bölümü hakkında yorum yaptık, böylece her kodu kolayca anlayabilirsiniz.

Çocuklar, eğitim dili ve indirilebilir örnek kodla ilgili bir öneriniz varsa, lütfen bize mail adresimizden yazın. E-posta adresimiz awordpresslife{at}gmail{dot}com'dur

Bu öğreticiyi okuduğunuz, kullandığınız ve desteklediğiniz için teşekkürler.

Bu öğreticiyi sizin için yazmaya çalıştığımız Faydalı Referanslar bağlantılarını aşağıda bulabilirsiniz: