HTML markup – for one item (tabs type1)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="ct-tabs ct-tabs--type1"> <ul class="nav nav-tabs" role="tablist"><!-- Tabs nav --> <li role="presentation" class="active"> <a href="#elegant-interiors" aria-controls="elegant-interiors" role="tab" data-toggle="tab"> <div class="nav-tabs-icon"><span><i class="fa fa-home"></i></span></div> <h6 class="nav-tabs-title">Elegant Interiors</h6> </a> </li> </ul> <div class="tab-content"><!-- Tabs content --> <div role="tabpanel" class="tab-pane active animated" data-fx="fadeInRight" id="elegant-interiors"> <!-- place for rest content [example below] --> <div class="ct-js-slick ct-slick ct-slick-arrows--type4 ct-slick-arrows--position7" data-LGitems="1" data-XSitems="1" data-adaptiveHeight="true" data-dots="false" data-arrows="true"> <div class="item"> <img src="../assets/images/demo-content/hostel-1.jpg" alt="Image"> </div> </div> </div> </div> </div> |
Available variations
There is in {Theme} available two variations:
— ct-tabs–type1
|
1 2 3 |
<div class="ct-tabs ct-tabs--type1"> [ -- ] </div> |
— ct-tabs–type2
|
1 2 3 |
<div class="ct-tabs ct-tabs--type2"> [ -- ] </div> |
Screenshots
— ct-tabs–type1
Tabs type 1
— ct-tabs–type2
Tabs type 2