Плагин jQuery Round Карусель circle Carousel

Circle Carousel - это круглый карусельный плагин jQuery. Круговфя карусель jQuery может генерировать набор круговых каруселей вокруг центра, и при нажатии на изображение будут крутые вращающиеся анимации.
Как использовать

Представьте файлы jquery, circle.js и circle.css на странице.

1. <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><script src = "путь / to / jquery.min.js"> </ script></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
2. <script src = "путь / to / circle.js"> </ script></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
3. <link rel = "stylesheet" href = "css / circle.css"></font></font><font></font>

Скопировать код

Структура HTML

Структура HTML круговая карусель jQuery заключается в следующем.

1. <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><div class = "holderCircle"></font></font><font></font>
   
2. <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
3.   <div class = "dotCircle"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
4.     <span class = "itemDot active itemDot1" data-tab = "1"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
5.       Пункт 1</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
6.       <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
7.     </ Span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
8.     <span class = "itemDot itemDot2" data-tab = "2"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
9.       Пункт 2</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
   
10.       <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    
11.     </ Span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    
12.     <span class = "itemDot itemDot3" data-tab = "3"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    
13.       Пункт 3</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    
14.       <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    
15.     </ Span></font></font><font></font>
    
16.     <span class="itemDot itemDot4" data-tab="4"><font></font>
    
17.       Item 4<font></font>
    
18.       <span class="forActive"></span><font></font>
    
19.     </span><font></font>
    
20.     <span class="itemDot itemDot5" data-tab="5"><font></font>
    
21.       Item 5<font></font>
    
22.       <span class="forActive"></span><font></font>
    
23.     </span><font></font>
    
24.     ...<font></font>
    
25.   </div><font></font>
    
26. <font></font>
    
27.   <div class="contentCircle"><font></font>
    
28. <font></font>
    
29.     <div class="CirItem active CirItem1"><font></font>
    
30.       TEXT SAMPLE FOR ITEM 1<font></font>
    
31.     </div><font></font>
    
32.     <div class="CirItem CirItem2"><font></font>
    
33.       TEXT SAMPLE FOR ITEM 2<font></font>
    
34.     </div><font></font>
    
35.     <div class="CirItem CirItem3"><font></font>
    
36.       TEXT SAMPLE FOR ITEM 3<font></font>
    
37.     </div><font></font>
    
38.     <div class="CirItem CirItem4"><font></font>
    
39.       TEXT SAMPLE FOR ITEM 4<font></font>
    
40.     </div><font></font>
    
41.     <div class="CirItem CirItem5"><font></font>
    
42.       TEXT SAMPLE FOR ITEM 5<font></font>
    
43.     </div><font></font>
    
44.   </div><font></font>
    
45. <font></font>
    
46. </div><font></font>

Скопировать код