Automatic Tabs UI Examples

A tiny tabs JavaScript plugin that has the ability to automatically switch between tabs at a given speed.

Default tabs


                new Tabs({
                    el: '#tabs2'
                });

Tab 1 data

turpis diam bibendum. occaecat aliquip sed Morbi lorem vulputate Nibh et lectus non. quisque. et non. quisque. eu minim vulputate Pharetra.

Tab 2 data

ut. anim hendrerit mollit ut anim sem ut urna hendrerit nunc senectus luctus laborum voluptate malesuada quisque. dolore egestas.

Tab 3 data

nunc posuere donec occaecat incididunt reprehenderit pharetra. malesuada donec leo pulvinar consequat. fames molestie aliquip.

Tabs with timer option


                new Tabs({
                    el: '#tabs2',
                    timer: 500
                });

Tab 1 data

turpis diam bibendum. occaecat aliquip sed Morbi lorem vulputate Nibh et lectus non. quisque. et non. quisque. eu minim.

Tab 2 data

ut. anim hendrerit mollit ut anim sem ut urna hendrerit nunc senectus luctus laborum voluptate malesuada quisque. dolore egestas.

Tab 3 data

nunc posuere donec occaecat incididunt reprehenderit pharetra. malesuada donec leo pulvinar consequat. fames molestie.

Tabs with timer and loading


                new Tabs({
                    el: '#tabs3',
                    timer: 4000,
                    loading: true,
                });

Tab 1 data

turpis diam bibendum. occaecat aliquip sed Morbi lorem vulputate Nibh et lectus non. quisque. et non. quisque.

Tab 2 data

ut. anim hendrerit mollit ut anim sem ut urna hendrerit nunc senectus luctus laborum voluptate malesuada quisque.

Tab 3 data

nunc posuere donec occaecat incididunt reprehenderit pharetra. malesuada donec leo pulvinar consequat.

Tabs with timer, loading and loadingColor


                new Tabs({
                    el: '#tabs4',
                    timer: 2000,
                    loading: true,
                    loadingColor: '#f94c4c'
                });

Tab 1 data

turpis diam bibendum. occaecat aliquip sed Morbi lorem vulputate Nibh et lectus non. quisque. et non. quisque.

Tab 2 data

ut. anim hendrerit mollit ut anim sem ut urna hendrerit nunc senectus luctus laborum voluptate malesuada quisque.

Tab 3 data

nunc posuere donec occaecat incididunt reprehenderit pharetra. malesuada donec leo pulvinar consequat.