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>