В примере все сделано картинками, при желании легко заменяется на слова со стилями. Прокрутка по сдвигу колеса мыши, в раскрытом состоянии так же прокручивается.
Html код
|
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<div id="ca-container" class="ca-container"> <div class="ca-wrapper" style="overflow: hidden;"> <div class="ca-item ca-item-1" id="bx_2037796212_5"> <div class="ca-item_head"><a href="#" title="Паркур"><img src="images/img_1.png" alt="Паркур"title="Паркур" ></a></div> <div class="ca-item-main"> <a href="#" class="ca-more"> </a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> В нашем центре будут созданы все необходимые условия для занятий паркуром.</p><p> Мы создаем место, где ты сможешь эффективно и, что не менее важно, безопасно отрабатывать разнообразные прыжки и акробатические элементы.</p><p> Также вас ждут <strong>мастер-классы от лучших трейсеров России</strong>! </p> </div> </div> </div> </div> <div class="ca-item ca-item-2" id="bx_2037796212_7"> <div class="ca-item_head"><a href="#" title="Батут-центр"><img src="http://kr.tmb.name/images/img_2.png" alt="Батут-центр"title="Батут-центр" ></a></div> <div class="ca-item-main"> <a href="#" class="ca-more"> </a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> <strong>Батут</strong> - уникальное устройство для получения положительных эмоций! </p><p>С помощью батута вы сможете повысить мышечный тонус и устойчивость к различным заболеваниям, кроме того аэробная нагрузка при тренировках на батуте помогает бороться с лишним весом и эффективно его снижать. </p> </div> </div> </div> </div> <div class="ca-item ca-item-3" id="bx_2037796212_6"> <div class="ca-item_head"><a href="#" title="Слэклайн"><img src="http://kr.tmb.name/images/img_3.png" alt="Слэклайн" title="Слэклайн" ></a></div> <div class="ca-item-main"> <a href="#" class="ca-more"> </a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> <strong>Слэклайн</strong> - активный вид времяпрепровождения и эффективная тренировка вестибулярного аппарата</p><p>. Удержать баланс на узкой нейлоновой полоске - дело непростое, но очень веселое, причем не только для самого канатоходца, но и для окружающих.</p><p> Приходите к нам и оцените сами! </p> </div> </div> </div> </div> <div class="ca-item ca-item-4" id="bx_2037796212_6"> <div class="ca-item_head"><a href="#" title="ВМХ"><img src="http://kr.tmb.name/images/img_4.png" alt="ВМХ" title="ВМХ" ></a></div> <div class="ca-item-main"> <a href="#" class="ca-more"> </a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> Для тех, кто не расстается со своим двухколесным другом, у нас также найдется место!</p><p> Для любителей <strong>BMX</strong> у нас будут созданы все условия для тренировок и отработки разнообразных трюков.</p><p> И падать (с кем не бывает) будет совсем не больно! </p> </div> </div> </div> </div> <div class="ca-item ca-item-5" id="bx_2037796212_6"> <div class="ca-item_head"><a href="#" title="Брейк-данс"><img src="http://kr.tmb.name/images/img_5.png" alt="Брейк-данс" title="Брейк-данс" ></a></div> <div class="ca-item-main"> <a href="#" class="ca-more"> </a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> <strong>Крылья</strong> - настоящий рай для тех, кто увлекается BreakDance'ом.</p><p> Для вас будет организован отдельный зал со специальным покрытием и огромными зеркалами.</p><p> Ну а для отработки силовых движений - добро пожаловать в акробатическую зону с мягкими матами и поролоновыми ямами. И конечно будут проводиться мастер-классы от профессионалов.</p><p> Приходите, скучно не будет! </p> </div> </div> </div> </div> </div> </div> |
Css код
Js код
Js вызов
|
1 2 3 |
<script type="text/javascript"> $('#ca-container').contentcarousel(); </script> |
Link to this post!