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 :
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/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>
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>
Finally, initialize the plugin in jQuery document ready function and done.
<script>
$(document).ready(function(){
$('.slider-circle').wet({speed: 500});
});
</script>
Done
Thanks for make jQuery plugin is developed by neyron163 For more Helpfull for users, please check the demo page or visit the official website.
