Moodular - 회전,슬라이더, 터치 ,모자이크 - Jquery API

site : http://www.gougouzian.fr/ Front & Back -end Developer

Plugin & method Url : http://www.gougouzian.fr/projects/jquery/moodular/ (Download : moodular.js )

Test Url : http://www.uhoon.co.kr/test/885.html

license : MIT License / GPL - GNU General Public License

이미지 슬라이드 , 회전 , 터치도 지원한다고 합니다. 대형 배너나 이미지슬라이드등에 용이할것같습니다.

easing을 이용해서 다양한 effect를 지원하는 등..옵션이 상당히 많습니다.

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>moodular </title>
</head>
<style type="text/css"> 
/* moodular */
#moodular { overflow: hidden }
	#moodular, #moodular li { margin: 0; padding: 0; list-style: none; width: 900px; }
/* examples */
	#moodular, #moodular li { height: 400px; }
		#moodular li p { display: block; height: 400px; }
			#moodular li p span { display: inline-block; padding: 10px 10px; color: #FFF; margin: 10px; }
#nav_wrapper { margin: 0; padding: 0; list-style: none; width: 80px; height: 20px; overflow: hidden }
	#nav_wrapper li { text-align: center; }
		#nav_wrapper li.active { color: #FFF; }
 
</style>  
<body>

<ul id="moodular">
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo01.jpg);"><span>가나다라</span></p></li>
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo02.jpg);"><span>마바사아</span></p></li>
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo03.jpg);"><span>자차카</span></p></li>
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo04.jpg);"><span>타파하</span></p></li>
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo05.jpg);"><span>www.goodkiss.co.kr</span></p></li>
	<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo06.jpg);"><span>www.uhoon.co.kr</span></p></li>
</ul>  
<!-- script -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script src="885/jquery.easing.1.3.js"></script> 
<script src="885/moodular.js"></script>  
<script>
jQuery(document).ready(function () { 
	var couleurs = ["rgba(219,56,92, 0.6)"	,
	"rgba(104,197,255, 0.6)",
	"rgba(151,90,193, 0.6)",
	"rgba(193,70,136, 0.6)",
	"rgba(168,123,187, 0.6)",
	"rgba(41,186,116, 0.6)",
	"rgba(148,189,36, 0.6)",
	"rgba(240,61,44, 0.6)",
	"rgba(56,155,217, 0.6)",
	"rgba(32,187,185, 0.6)", 
	"rgba(32,169,255, 0.6)"];

	jQuery('#moodular li p span').each(function() {
		jQuery(this).css('background-color', couleurs[Math.floor(Math.random() * couleurs.length)]);
	});

	jQuery('#moodular').moodular({
/* core parameters */
	// effects separated by space
	effects: 'mosaic',
	// controls separated by space
	controls: 'keys',
	// if you want some yummy transition
	easing: 'easeOutExpo',
	// step 
	step: 1,
	// selector is to specify the children of your element (tagName)
	selector: 'li',
	// if timer is 0 the carrousel isn't automatic, else it's the interval in ms between each step
	timer: 5000,
	// speed is the time in ms of the transition
	speed: 5000,
	// queuing animation ?
	queue: false,
/* parameters for controls or effects */
	// keys control
	keyPrev: 37, // left key
	keyNext: 39, // right key
	// mosaic effects
	slices: [10, 4],
	mode : 'random'//,
	// others
	//your_params : 'cause you can create your own effect or control'
  }); 
});
</script>
</body>
</html>

Moodular - 회전,슬라이더, 터치 ,모자이크

단축키

Articles