اسلایدر تمام صفحه با جی کیوئری
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

slider-show

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

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

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

<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">

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

<article class="kontext">
<div class="layer one show">
<h2>Blog-Theme.ir</h2>
slider show by jquery
</div>
<div class="layer two">
<h2>slider show by jquery</h2>
</div>
<div class="layer three">
<h2>slider show</h2>
</div>
</article>
<ul class="bullets"></ul>
<div class="credit"><a href="http://blog-theme.ir">BLOG-THEME.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>

امیدوارم که از این آموزش هم خوشتون اومده باشه

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

امیر رضائی وبسایت


عاشق طراحی وب و گرافیک هستم بیشتر اوقاتم در روز رو پای کامپیوتر به کد نویسی و طراحی سایت و تولید محتوا برای این سایت می کنم.وردپرس رو خیلی دوست دارم چندین بار هم سعی کردم با مدیریت های دیگه هم کار کنم ولی باز هم وردپرس رو ترجیح دادم.

مطالب مشابه با این موضوع

بالا رفتن