CODETABS FILES :
<!-- Main style codetabs, included default skin --> <link rel="stylesheet" href="code/codetabs.css"> <!-- Effect animation core in tabs --> <link rel="stylesheet" href="code/code.animate.css"> <!-- jQuery 1.7+ required - hosted from Google --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Main js codetabs --> <script src="code/codetabs.js"></script>
MARKUP HTML : add the HTML tabs into page
<div class="ct ct-flatbox"> <!-- TAB 1 --> <div> <!-- Tab title --> <div class="ct-pagitem">Tabs title</div> <!-- Tab content --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> <!-- TAB others same TAB 1 --> <div>...</div> </div>
MARKUP HTML : add the HTML slider into page
<div class="ct"> <!-- Each image is a slide --> <img src="imgs/img1.jpg" alt="image1"> <img src="imgs/img2.jpg" alt="image2"> <img src="imgs/img3.jpg" alt="image3"> ... </div>
SETTING OPTIONS :
<div class="ct ct-flatbox" data-codtabs=" isAutoRun-on fxOne-stickVer speed-1200 pag-{ align: center } "> ... </div>
SETTING OPTIONS :
<script> jQuery(document).ready(function($) { $('.ct').codetabs({ fxOne : 'stickVer', speed : 1200, pag : { align : 'center' } }); }); </script>