There are three variation of the gallery:
ct-photoGallery–alignLeft – this is the standard one
ct-photoGallery–alignRight
ct-photoGallery–alignCenter
HTML MARKUP for 2 elements (markup it’s repeatable, if you need more item just duplicate the code below)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="ct-photoGallery ct-photoGallery--alignLeft"> <div class="row"> <div class="col-md-12"> <div class="nav-tabs-justified"> <div class="tabpanel"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation"><a href="#person1" aria-controls="person1" role="tab" data-toggle="tab"><img src="../assets/images/demo-content/person1.jpg" alt="Person1"></a></li> <li role="presentation"><a href="#person2" aria-controls="person2" role="tab" data-toggle="tab"><img src="../assets/images/demo-content/person2.jpg" alt="Person2"></a></li> (...) (...) (...) </ul> <div class="tab-content ct-photoBox"> <!-- person 1 --> <div role="tabpanel" class="tab-pane animated fadeIn" id="person1"> <div class="ct-personImage"> <img src="../assets/images/demo-content/person1-medium.jpg" alt="Person image"> </div> <div class="ct-personDescription"> <h3 class="ct-personName animated" data-fx="fadeInDown">Caty Jenson #1</h3> <p class="ct-personAbout"> Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo. Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio. Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s. </p> <a href="" class="btn btn-lg btn-primary text-uppercase">subscribe today</a> </div> </div> <!-- person 2 --> <div role="tabpanel" class="tab-pane animated fadeIn" id="person2"> <div class="ct-personImage"> <img src="../assets/images/demo-content/person2-medium.jpg" alt="Person image"> </div> <div class="ct-personDescription"> <h3 class="ct-personName animated" data-fx="fadeInDown">Caty Jenson #2</h3> <p class="ct-personAbout"> Mauris eleifend elit faucibus, aliquet magna utamus, bibendum lacus. Nam a vulputate justo. Etiam mitum ipsum, aliquam sed tincidunt vitae, blandit vel oduio. Mauris malesuada tincidunt aliquet. Maecenas auctor at ipsum s. </p> <a href="" class="btn btn-lg btn-primary text-uppercase">subscribe today</a> </div> </div> </div> </div> </div> </div> </div> </div> |
Screenshot:
