ijquery

اسلایدشو تمام صفحه

screenshot

با استفاده از این پلاگین می توانید در سایته خود اسلاید شوی تمام صفحه داشته باشید

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="css/kontext.css">
<link rel="stylesheet" href="css/demo.css">

2- کد html جهت استفاده پلاگین

<article class="kontext">
	<div class="layer one show">
		<h2>ijquery.ir</h2>
		<p>Plugins for jquery</p>
	</div>
	<div class="layer two">
		<h2>دنیای جی کوئری</h2>
	</div>
	<div class="layer three">
		<h2>دنیای جی کوئری</h2>
	</div>
</article>
<ul class="bullets"></ul>
<div class="credit"><a href="http://ijquery.ir">ijquery.ir</a></div>
<script src="js/kontext.js"></script>
<script>
	// Create a new instance of kontext
	var k = kontext( document.querySelector( '.kontext' ) );
	// API METHODS:
	// k.prev(); // Show prev layer
	// k.next(); // Show next layer
	// k.show( 3 ); // Show specific layer
	// k.getIndex(); // Index of current layer
	// k.getTotal(); // Total number of layers
	// DEMO-SPECIFIC:
	var bulletsContainer = document.body.querySelector( '.bullets' );
	// Create one bullet per layer
	for( var i = 0, len = k.getTotal(); i < len; i++ ) {
	var bullet = document.createElement( 'li' );
	bullet.className = i === 0 ? 'active' : '';
	bullet.setAttribute( 'index', i );
	bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bulletsContainer.appendChild( bullet );}
	// Update the bullets when the layer changes
	k.changed.add( function( layer, index ) {
		var bullets = document.body.querySelectorAll( '.bullets li' );
		for( var i = 0, len = bullets.length; i < len; i++ ) {
			bullets[i].className = i === index ? 'active' : '';}});
	document.addEventListener( 'keyup', function( event ) {
		if( event.keyCode === 37 ) k.prev();
		if( event.keyCode === 39 ) k.next();}, false );
	var touchX = 0;
	var touchConsumed = false;
	document.addEventListener( 'touchstart', function( event ) {
	touchConsumed = false;
	lastX = event.touches[0].clientX;
	}, false );
	document.addEventListener( 'touchmove', function( event ) {
		event.preventDefault();
		if( !touchConsumed ) {
			if( event.touches[0].clientX > lastX + 10 ) {
				k.prev();
				touchConsumed = true;}else if( event.touches[0].clientX < lastX - 10 ) {
				k.next();
				touchConsumed = true;
			}}}, false );
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 


پیش نمایش دانلود فایل پلاگین

7 دیدگاه دربارهٔ «اسلایدشو تمام صفحه»

  1. سلام
    من برای یک سایت میخوام از این اسلایدر استفاده کنم ولی میخوام که عرضش 100% صفحه رو پوشش بده، برای این کار کجا رو باید ادیت کنم؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *