با استفاده از این پلاگین می توانید در سایته خود اسلاید شوی تمام صفحه داشته باشید
آموزش استفاده
۱- فراخوانی کتابخانه پلاگین و خصوصیت ها
<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>
ممنون از مطلبی که گذاشتید
خوبه سایتت خوبه 😐
کاربردی بود. ممنون
http://www.ariafanavari.ir
خسته نباشید
خیلی خوب بود
سلام
من برای یک سایت میخوام از این اسلایدر استفاده کنم ولی میخوام که عرضش 100% صفحه رو پوشش بده، برای این کار کجا رو باید ادیت کنم؟
تشکر ، خیلی خوب بود