jQuery Billy Carousel Tabber – Tab sekmeler içine slayt galeri

Tab örneklerini az çok bilirsiniz genelde   sitelerin sağ yada sol tarafında  bulunan bölüme eklenen, üst  üste eklenmiş içeriklerin çok fazla  yer kaplamaması için eklendiği çerçevedir.  Genelde  son yazılar, popüler yazılar, etiketler, son yorumlar gibi bölümler  eklenir  bu sekmelere. Az çok karşılaşmışsınızdır  bunlara.  Her ne kadar Türkçe’si  ‘Sekme’  olsa  da  genel olarak çoğu kişi bu tür  örnekleri ‘Tab’ diye adlandırır.

jQuery BillyCarousel uygulaması  hem slider hemde  tab olarak kullanılabilen bir  eklenti. Gerçi tab özelliği  de sliderden  farkı yok. Şu anki haliyle sadece resim ekleniyor tablar arasına. Resimlerden başka yazı vs. eklemek isterseniz biraz özelleştirmeniz gerekiyor. Ayrıca  genişliği de sabit ve bu hali ile  baya geniş.

Kullanım

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

Js dosya adresleri :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="billy.carousel.jquery.min.js"></script>

 JavaScript : 

  <script type="text/javascript">
        $(document).ready( function() { 
        // ----- Tabber
            $('#tabber').billy({
                slidePause: 5000,
                indicators: $('ul#tabber_tabs'),
                customIndicators: true,
                autoAnimate: false,
                noAnimation: true
            });

        });             
    </script>

 Css : 

body {
    margin: 0;
    padding: 0;
    font: 16px Helvetica, Arial, sans-serif;
    background: #252529;
    color: white;
}

/* Dirty Reset */
ul, ul li {
    display: block;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a, a:link, a:active, a:visited, a:active {
    border: none;
    outline: none;
    color: white;
    text-decoration: none;
}

p { font-size: 14px; line-height: 20px; }

#container {
    display: block;
    width: 900px;
    margin: 40px auto 0;
    padding: 0 0 100px 0;
}

.subtle {
    display: block;
    float: right;
    color: #878793;
    font-size: 11px;
    padding: 20px 0;
}

h3, h2, h1 {
    color: white;
}

h3 { padding: 10px 0 0 0; }

hr {
    display: block;
    float: left;
}

/* Indicators */
ul#billy_indicators {
    width: auto;
    margin: 20px 0 0 0;
    float: right;
    display: block;
    z-index: 90;
}

    ul#billy_indicators li {
        display: block;
        width: 9px;
        height: 9px;
        float: left;
        margin: 0 5px 0 0;
    }

        ul#billy_indicators li a {
            display: block;
            width: 9px;
            height: 9px;
            background: #fff;
            opacity: 0.4;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
        }   

        ul#billy_indicators li.active a { opacity: 1.0; }
        ul#billy_indicators li a:hover { opacity: 0.6; }
            ul#billy_indicators li.active a:hover { opacity: 1.0; }

/* Controls */
#clicker {
    display: block;
    float: left;
    margin: 20px 0 0 0;
}

    #clicker a {
        background: transparent;
        border: 1px solid white;
        font-size: 12px;
        color: white;
        padding: 5px 10px 4px;
        margin: 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        #clicker a:hover {
            color: #252529;
            background: white;
        }

/* Carousel */
#billy_clip { 
    width: 900px; 
    position: relative; /* For IE */
    overflow: hidden;
    height: 400px;
    z-index:100;
}

ul#billy_scroller {
    width: 9999px;
    height: 400px;
    display: block;
    float: left;
    position: relative;
}

    ul#billy_scroller li {
        width: 900px;
        height: 400px;
        float: left;
        display: block;
    }

/* Tabber */
ul#tabber {
    width: 9999px;
    height: 400px;
    display: block;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}

    ul#tabber li {
        width: 900px;
        height: 400px;
        float: left;
        display: block;
    }

/* Tabs */
#tabber_clip { 
    width: 900px; 
    position: relative; /* For IE */
    overflow: hidden;
    height: 400px;
    z-index:101;
    border-top: 1px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 1px solid white;
    float: left;
}

ul#tabber_tabs {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    margin: 10px 0 0 0;
    float: left;
}

    ul#tabber_tabs li {
        display: block;
        float: left;
        margin: 0 1px 0 auto;
    }

        ul#tabber_tabs li a {
            padding: 5px 6px 6px;
            display: block;
            font-size: 13px;
            border-top: 1px solid white;
            border-right: 2px solid white;
            border-bottom: none;
            border-left: 1px solid white;
            -moz-border-radius-topleft: 4px;
            -webkit-border-top-left-radius: 4px;
            -moz-border-radius-topright: 4px;
            -webkit-border-top-right-radius: 4px;
        }

            ul#tabber_tabs li.active a {
                background: white;
                color: #252529;
            }

.codetab {
    padding: 10px;
    width: 880px;
    height: 380px;
    background: #646391;
    font-size: 0.9em;
    overflow: auto;
    display: block;
    float: left;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

  <div id="container" >     
        <!-- The Tabs -->
        <ul id="tabber_tabs">
            <li><a href="#0">Tab One</a></li>
            <li><a href="#1">Tab Two</a></li>
            <li><a href="#2">Tab Three</a></li>
            <li><a href="#3">Tab Four</a></li>
            <li><a href="#4">Tab Five</a></li>
        </ul>

        <!-- Tabbed Area -->
        <div id="tabber_clip">
            <ul id="tabber">
                <li><img src="https://lorempixel.com/900/400/nightlife/1/" width="900" height="400" alt="Desert"></li>
                <li><img src="https://lorempixel.com/900/400/nightlife/2/" width="900" height="400" alt="Lady"></li>
                <li><img src="https://lorempixel.com/900/400/nightlife/3/" width="900" height="400" alt="Wood"></li>
                <li><img src="https://lorempixel.com/900/400/nightlife/4/" width="900" height="400" alt="Pond"></li>
                <li><img src="https://lorempixel.com/900/400/nightlife/5/" width="900" height="400" alt="Mintik"></li>
        </div>        
    </div>