min.js для карусели
css для карусели
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 |
<div id="carousel_3d" class="pull-left"> <div class="carousel-feature" style=""> <a href="#"><img class="carousel-image" alt="Изображениен 1" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/1.jpg" style=""></a> <div class="carousel-caption-text" style=""> <p> Эта зона обычно используется для создания заголовка к изображению </p> </div> </div> <div class="carousel-feature" style=""> <a href="#"><img class="carousel-image" alt="Изображениен 2" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/2.jpg" style=""></a> <div class="carousel-caption-text" style=""> <p> Фон будет расширяться в зависимости от подписи </p> </div> </div> <div class="carousel-feature" style=""> <a href="#"><img class="carousel-image" alt="Изображениен 3" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/3.jpg" style=""></a> <div class="carousel-caption-text" style=""> <p> В подпись можно разместить изображение </p> </div> </div> <div class="carousel-feature" style=""> <a href="#"><img class="carousel-image" alt="Изображениен 4" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/4.jpg" style=""></a> </div> <div class="carousel-feature" style=""> <a href="#"><img class="carousel-image" alt="Изображениен 5" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/5.jpg" style=""></a> <div class="carousel-caption-text" style=""> <p> Цвет фона можно изменить с помощью CSS. Прозрачность можно изменить в настройках </p> </div> </div> <ul class="tracker-individual-container" style="display: block; opacity:1;"> <li> <div class="tracker-individual-blip" id="tracker-1" style="cursor: pointer;">1</div> </li> <li> <div class="tracker-individual-blip" id="tracker-2" style="cursor: pointer;">2</div> </li> <li> <div class="tracker-individual-blip" id="tracker-3" style="cursor: pointer;">3</div> </li> <li> <div class="tracker-individual-blip" id="tracker-4" style="cursor: pointer;">4</div> </li> <li> <div class="tracker-individual-blip" id="tracker-5" style="cursor: pointer;">5</div> </li> </ul> </div> |
js для запуска
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(document).ready(function() { var carousel = $("#carousel_3d").featureCarousel({ pauseOnHover: true, carouselSpeed: 800, trackerSummation: false, sidePadding: 0 }); }); </script> |
Link to this post!