اسلایدر تمام صفحه با جی کیوئری
دسته‌ها : آموزش های طراحی سایت , اسلایدر ۰۵ مرداد ۱۳۹۵ - ۱۳:۴۹ امیر رضائی بدون نظر
خانه آموزش های طراحی سایتاسلایدر اسلایدر تمام صفحه با جی کیوئری

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="https://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>

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

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

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


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

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

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!

ارتباط با ما
Email: info@blog-theme.ir
Adress: IRAN

پیوند ها

best web design software