Coda – içerik kaydırma uygulaması

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.

Download

Demo

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>