Responsive Circular Slider In Vanilla JavaScript – jCircle

Category: Javascript , Slider | April 20, 2018
Views Total:3,737 views
Official Page:Go to website
Last Update:April 20, 2018


Responsive Circular Slider In Vanilla JavaScript – jCircle


jCircle is a vanilla JavaScript library that enables you to showcase HTML contents (text or images) in a responsive, animated, auto-rotating circular slider.

How to use it:

Import the jCircle’s JavaScript and stylesheet into the html page.

<link href="jCircle.css" rel="stylesheet">
<script src="jCircle.min.js"></script>

Add your own content to the circular slider.

<div id="circles-container">
  <div id="main-circle-content"></div>
  <div id="circle">
    <div class="min-circle" data-inside="min-circle"> <a href="imgs/1.jpg"> <img src="imgs/thumb_1.jpg" alt=""> </a>
      <div class="content-text">Caption 1</div>
    <div class="min-circle" data-inside="min-circle"> <a href="imgs/2.jpg"> <img src="imgs/thumb_2.jpg" alt=""> </a>
      <div class="content-text">Caption 2</div>
    <div class="min-circle" data-inside="min-circle"> <a href="imgs/3.jpg"> <img src="imgs/thumb_3.jpg" alt=""> </a>
      <div class="content-text">Caption 3</div>

Create a new jCircle instance with following settings:

var circle= new jCircle({
    'container': 'circles-container',
    'circle': 'circle',

Initialize the circular slider and done.


All default configuration options.

var circle= new jCircle({
    // Contains All Content
    container: 'circles-container',
    // DIV That Contains Mini DIVs Circles 
    circle: 'circle', 
    // Center Big Circle
    // Class Name For Mini Circles DIVs
    minCirclesClass: 'min-circle', 
    // For Internal Use, Array Of Mini Circles DIVs
    minCircles: [], 
    // [normal | enlarge-view]
    mainViewStyle: 'normal',
    // Animates Mini Circles?
    animateCircles: true, 
    // Animation Type [rotateSelf]
    animateType: 'rotateAround', 
    // Animation Status [pause | play]
    animateStatus: 'play',
    // Animation Delay Time (speed) [Number Of Seconds]
    speed: 3, 
    // Stops Animation On Mouse Over [true | false]
    stopOnOverMain: true, 
    stopOnOverMini: true, 
    // [pulse, zoomOutIn, flip, rotate]
    minCirclesEffectOver: 'none', 
    // [images | text]
    contentType: 'images', 
    // Enlarge Center Area On Mouse Over 
    mainContentOverAction: 'normal'

You Might Be Interested In:

Leave a Reply