Слайдер изображений через плагин Barousel на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<link rel="stylesheet" type="text/css" href="/css/barousel_demo.css" /> <script src="/js/jquery.barousel.min.js" type="text/javascript"></script> <script src="/js/jquery.thslide.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#barousel_thslide').barousel({ navWrapper: '#thslide_barousel_nav .thslide_list', manualCarousel: 1, navType: 3, scrollOver: 1 }); $('#thslide_barousel_nav').thslide({ itemOffset: 93 }); }); </script> |
2#: В то место, где будет сам слайдер, вставляйте следующий код:
|
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 |
<div id="barousel_thslide" class="barousel"> <div class="barousel_image"> <!-- image 1 --> <img src="Ссылка на большое изображение 1" alt="" class="default" /> <!-- image 2 --> <img src="Ссылка на большое изображение 2" alt="" /> <!-- image 3 --> <img src="Ссылка на большое изображение 3" alt="" /> <!-- image 4 --> <img src="Ссылка на большое изображение 4" alt="" /> <!-- image 5 --> <img src="Ссылка на большое изображение 5" alt="" /> <!-- image 6 --> <img src="Ссылка на большое изображение 6" alt="" /> <!-- image 7 --> <img src="Ссылка на большое изображение 7" alt="" /> <!-- image 8 --> <img src="Ссылка на большое изображение 8" alt="" /> </div> <div class="barousel_content"> <!-- content 1 --> <div class="default"> Описание к изображению 1 </div> <!-- content 2 --> <div> Описание к изображению 2 </div> <!-- content 3 --> <div> Описание к изображению 3 </div> <!-- content 4 --> <div> Описание к изображению 4 </div> <!-- content 5 --> <div> Описание к изображению 5 </div> <!-- content 6 --> <div> Описание к изображению 6 </div> <!-- content 7 --> <div> Описание к изображению 7 </div> <!-- content 8 --> <div> Описание к изображению 8 </div> </div> <div id="thslide_barousel_nav" class="thslide"> <div class="thslide_nav_previous"> <a href="#"></a> </div> <div class="thslide_list"> <ul> <li><a href="#"><img src="Ссылка на маленькое изображение 1" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 2" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 3" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 4" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 5" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 6" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 7" alt="" /><span></span></a></li> <li><a href="#"><img src="Ссылка на маленькое изображение 8" alt="" /><span></span></a></li> </ul> </div> <div class="thslide_nav_next"> <a href="#"></a> </div> <div class="clearer"></div><br/> |
