jQuery Animated Infographics

1. Introduction

circle-slider is a jQuery plugin for creating animated infographics. The plugin showcase slides in a circle and presents them sequentially with specific delay using a smooth transition.

Jquery circle slider animated infographics

2. Plugin Overview

Library	circle-slider (Animated Infographics)
Author	neyron163
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version and jQuery Touch Swipe 1.6 or Latest

Demo

3. How to install and use circle-slider jQuery plugin

Follow the below steps to install circle-slider jQuery plugin on your website.

3.1. Load jQuery plugin into your website:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

3.2. Add circle-slider plugin JavaScript and CSS files:

<!-- Animated Infographics CSS -->
<link rel="stylesheet" href="./index.css">

<!-- Animated Infographics JS -->
<script src="./index.js"></script>

3.3. Create HTML structure with custom slides:

<div class="flex__container">
    <div class="slider-circle">
        <div class="slide-item">
            <div class="icon icon-rocket"></div>
            <h3 class="rest__title_h4">1. Start-up</h3>
            <p class="description_small">Starting a new business requires extensive planning and preparation. Many new start-ups fail, simply because they don’t have the resources, infrastructure, or expertise to ensure all the pillars to success are upheld.</p><a href="/startup-consulting/" class="link">Learn More</a>
        </div>
        <div class="slide-item">
            <div class="icon icon-schedule"></div>
            <h3 class="rest__title_h4">2. Growth</h3>
            <p class="description_small">Growing your business involves managing the complexity of, not only sales but, organizational structure, processes, and resources.</p><a href="/business-growth-strategies/" class="link">Learn More</a>
        </div>
        <div class="slide-item">
            <div class="icon icon-growth"></div>
            <h3 class="rest__title_h4">3. Expansion</h3>
            <p class="description_small">Your organization offers a valuable product or service in the marketplace, and you have been able to reach a growth platform.</p><a href="/business-expansion/" class="link">Learn
More</a>
        </div>
        <div class="slide-item">
            <div class="icon icon-portfolio"></div>
            <h3 class="rest__title_h4">4. Maturity</h3>
            <p class="description_small">Your business has expanded, and you are reaching the height of your success in your market.</p><a href="/business-maturity/" class="link">Learn More</a>
        </div>
        <div class="slide-item">
            <div class="icon icon-idea"></div>
            <h3 class="rest__title_h4">5. Transition</h3>
            <p class="description_small">Your business has expanded, and you are reaching the height of your success in your market.</p><a href="/business-transition/" class="link">Learn More</a>
        </div>
        <div class="next"></div>
    </div>
</div>

3.4. Initialize the plugin in jQuery document ready function:

<script type="text/javascript">
    $('.slider-circle').wet({speed: 500});
</script>

4. Conclusion

In this article, we presented circle-slider jQuery plugin which you can use to create awesome circle slides with a nice animation effect. This plugin is fully responsible - you don't have to hide it on mobile devices.