Simple jQuery plugin to rotate text
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
CHANGELOG.md
README.md
composer.json

README.md

Textrotator

Simple jQuery plugin to rotate text, rotate images (banners), or any other html.

Installation

Add to head of your html document

<script type="text/javascript" src="jquery.textrotator.min.js" />

Add your html markup

  • add different display time duration by adding data-duration="1000" . This adds 1s duration
  • add different easin and easout easing by adding data-easingin="swing" data-easingout="linear".
  • add random = true to randomize the li elements.
<html>
	<head>
		<script type="text/javascript" src="jquery.textrotator.min.js" />
	</head>
	<style>
		#my-textrotator {list-style: none; padding:0; margin: 0 0 24px;}
		#my-textrotator li {display: none;}
	</style>
	<body>
		<ul id="my-textrotator">
			<li data-duration="10000" data-easingin="swing" data-easingout="linear" >Text 1</li>
			<li>Text 2</li>
		</ul>
	</body>
</html>

Add javascript code for calling the Rotator.

<script type="text/javascript">
	$(function(){
		$('#my-textrotator').textRotator({
			random : false,
			fadein : 1000,
			fadeout : 500,
			duration : 5000,
           	easingin: 'swing',
            easingout: 'swing'		
		})
	})
</script>

Adding Wordpress

Shortcodes

[textrotator]
[tritem duration="5000"  easingin="easeInElastic"]<div style="background-color: red ;margin-top: 6px; padding: 100px 12px; text-align: center;">Slide 1</div>[/tritem]
[tritem duration="10000"]<div style="background-color: blue ;margin-top: 6px; padding: 100px 12px; text-align: center;">Slide 2</div>[/tritem]
[tritem duration="1000" ]<div style="background-color: green;margin-top: 6px; padding: 100px 12px; text-align: center;">Slide 3</div>[/tritem]
[/textrotator]

The functions.php File


add_shortcode('tritem', 'turple_shortcode_tritem');
function turple_shortcode_textrotator($att, $content = null){
	$banner = '<ul class="textrotator" style="list-style: none; padding: 0; margin: 0 0 24px">' . do_shortcode($content) .'</ul>';	
	return __($banner);
}

add_shortcode('textrotator', 'turple_shortcode_textrotator');
function turple_shortcode_tritem($att, $content="null"){	
	return '<li style="display: none" '.
		(isset($att['duration']) ? ' data-duration="'.intval($att['duration']).'" '  : '') .
		(isset($att['easingin']) ? ' data-easingin="'.intval($att['easingin']).'" '  : '') .
		(isset($att['easingout']) ? ' data-easingout="'.intval($att['easingout']).'" '  : '') .
		'>'. do_shortcode($content) . '</li>';
	
}

Errata or Issues

If you find and issues please fill out an Issues request https://github.com/sturple/textrotator/issues