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.

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>