Coda – içerik kaydırma uygulaması

Coda

Görüntüsüne bakıldığında tab yani sekmeler arası geçiş için kayma işlemini gerçekleştiren bir çalışma olarak görünse de bu örnek kendi başına bir slayt eklentisidir. Web sitenizdeki içerikler arası kaydırma yapmak için kullanabilirsiniz. Biraz özelleştirerek slide fotoğraf galeri örnekleri de oluşturabilmeniz mümkündür.    Kevin Batdorf  tarafından  geliştirilen bu örneği kullanarak web sitenizin herhangi bir yerine kayan içerikler yerleştirmeniz mümkün.

Kullanım

Head  etiketleri  arasına eklenmesi gereken bölümler.

Js dosya adresleri :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <!--script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery-ui-1.8.20.custom.min.js"></script>-->
    <script src="./js/jquery.coda-slider-3.0.js"></script>

Javascript :

    <script>
      $().ready(function() {
        $('#main-slider').codaSlider({
          autoHeight: false,
          continuous:false,
          dynamicArrows: false,
          dynamicTabs: false
        });
        $('#showcase').codaSlider();
        $('#continuous').codaSlider({
          autoSlide: true,
          continuous: true,
          dynamicArrowsGraphical: true,
          dynamicTabsAlign: "right",
          dynamicTabsPosition: "bottom",
          panelTitleSelector: "div.title"
        });
        $('#dynamic-tabs').codaSlider({
          autoSlideControls:true,
          dynamicTabsAlign: "left",
          dynamicTabsPosition: "top",
          dynamicArrows: false
        })
        $('#information').codaSlider({
          dynamicArrows: false,
          dynamicTabs: false,
          slideEaseFunction: "easeOutCirc"
        });
      });
      </script>

 Body etiketleri  arasına eklenecek olan bölüm.

Html :

    <div class="coda-slider"  id="main-slider">
      <div>

          <div class="coda-slider"  id="showcase">
            <div>
              <h2 class="title" style="display:none">Home</h2>
Buraya  Sayfa icerigi ekleyin. Here  add  page  content.
            </div>
            <div>

              <h2 class="title">How does it work?</h2>
Buraya  Sayfa icerigi ekleyin. Here  add  page  content.
            </div>
            <div>

              <h2 class="title">Installation</h2>
   Buraya  Sayfa icerigi ekleyin. Here  add  page  content.
            </div>
            <div>

              <h2 class="title">Contact</h2>
Buraya  Sayfa icerigi ekleyin. Here  add  page  content.
            </div>
          </div>
      </div>
      <div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-23 tarihinde yayınlandı,Toplam 1934 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...