Fancy Circular Carousel Plugin With jQuery - circleCarousel

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.

<link rel="stylesheet" href="css/circle.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/circle.js"></script>

2. Create your own carousel items & details following the html structure as follows:

<div class="holderCircle">

  <div class="dotCircle">
    <span class="itemDot active itemDot1" data-tab="1">
      Item 1
      <span class="forActive"></span>
    </span>
    <span class="itemDot itemDot2" data-tab="2">
      Item 2
      <span class="forActive"></span>
    </span>
    <span class="itemDot itemDot3" data-tab="3">
      Item 3
      <span class="forActive"></span>
    </span>
    <span class="itemDot itemDot4" data-tab="4">
      Item 4
      <span class="forActive"></span>
    </span>
    <span class="itemDot itemDot5" data-tab="5">
      Item 5
      <span class="forActive"></span>
    </span>
    ...
  </div>

  <div class="contentCircle">

    <div class="CirItem active CirItem1">
      TEXT SAMPLE FOR ITEM 1
    </div>
    <div class="CirItem CirItem2">
      TEXT SAMPLE FOR ITEM 2
    </div>
    <div class="CirItem CirItem3">
      TEXT SAMPLE FOR ITEM 3
    </div>
    <div class="CirItem CirItem4">
      TEXT SAMPLE FOR ITEM 4
    </div>
    <div class="CirItem CirItem5">
      TEXT SAMPLE FOR ITEM 5
    </div>
  </div>

</div>

---

This awesome jQuery plugin is developed by nasirfarhadi92. For more Advanced Usages, please check the demo page or visit the official website.