This time I will share jQuery Plugin and tutorial about Fancy Circular Carousel Plugin With jQuery – circleCarousel, hope it will help you in programming stack.
circleCarousel is a fancy jQuery plugin to generate a circular carousel that arranges carousel items around a circle.
Clicking on the carousel items will display the details in the big central circle.
How to use it:
1. Import jQuery library and the circleCarousel’s files into the html file.
1 |
<link rel="stylesheet" href="css/circle.css"> |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"></script> |
5 |
<script src="js/circle.js"></script> |
2. Create your own carousel items & details following the html structure as follows:
01 |
<div class="holderCircle"> |
03 |
<div class="dotCircle"> |
04 |
<span class="itemDot active itemDot1" data-tab="1"> |
06 |
<span class="forActive"></span> |
08 |
<span class="itemDot itemDot2" data-tab="2"> |
10 |
<span class="forActive"></span> |
12 |
<span class="itemDot itemDot3" data-tab="3"> |
14 |
<span class="forActive"></span> |
16 |
<span class="itemDot itemDot4" data-tab="4"> |
18 |
<span class="forActive"></span> |
20 |
<span class="itemDot itemDot5" data-tab="5"> |
22 |
<span class="forActive"></span> |
27 |
<div class="contentCircle"> |
29 |
<div class="CirItem active CirItem1"> |
30 |
TEXT SAMPLE FOR ITEM 1 |
32 |
<div class="CirItem CirItem2"> |
33 |
TEXT SAMPLE FOR ITEM 2 |
35 |
<div class="CirItem CirItem3"> |
36 |
TEXT SAMPLE FOR ITEM 3 |
38 |
<div class="CirItem CirItem4"> |
39 |
TEXT SAMPLE FOR ITEM 4 |
41 |
<div class="CirItem CirItem5"> |
42 |
TEXT SAMPLE FOR ITEM 5 |
This awesome jQuery plugin is developed by nasirfarhadi92. For more Advanced Usages, please check the demo page or visit the official website.
