jQuery Animated Infographics

January 04, 2020 No comments jQuery Plugin 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


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 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 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
        <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 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 class="next"></div>

3.4. Initialize the plugin in jQuery document ready function:

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

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.

{{ message }}

{{ 'Comments are closed.' | trans }}