Animated Circle Infographics With jQuery

Html & CSS
Demo    Download
Animated Circle Infographics with jQuery
File Size: 86.46 KB
Views Total: 1347 views
Last Update:May 02, 2019
Publish Date: October 26, 2018
Official Website: Go to website
License: MIT
Plugin Author: neyron163

A Circle Animated Infographics with HTML CSS & touch-Swipe with jQuery. A lightweight circle jQuery plugin to create touch enabled with animate / slide contents around circle with smooth transitions. its working with touchSwipe jquery plugins, working for mobile touch devices that will detect when a visitor swipes or pinches a touch input device and then trigger an event/handler based on the swipe direction and distance.

Installation:
1 # NPM
2 $ npm install jquery-touchswipe –save

Table of Contents

How to use :

1. Add with jQuery and jQuery touch-Swipe Script from document.

<script src="/path/to/jquery-latest.min.js"></script>
<script src="/path/to/jquery.touchSwipe.min.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/[email protected]/jquery.touchSwipe.min.js"></script>

2. Add Html Element:

<div id="businessCycle">
        <div class="grid no-padding">
          <svg viewBox="0 0 1380 60" class="svg-piece">
            <path id="arch" width="1380px" height="60px" fill="#f5f5f5" d="M0,0h1380c0,31.3,0,31.3,0,60C1139,24.1,914.4,0.2,690,0C464.7-0.2,239.5,23.4,0,60
                C0,45.3,0,45.3,0,0z"></path>
          </svg>
          <div class="flex__container">
            <div class="watch__block">
              <h2 class="title_h1" style="max-width: 300px;">Business Life Cycle</h2>
            </div>
            <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">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </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">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p><a href="#" class="link">Learn More</a>
                </div>
                <div class="next"></div>

                </div>
              </div>
          </div>
        </div>

3. Finally, initialize the plugin in jQuery document ready function and done.

<script>
$(document).ready(function(){
   $('.slider-circle').wet({speed: 500});
});
</script>

Done

List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.