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ş.

Download

Demo

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>