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

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>

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

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

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

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


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

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

newslatter

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

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

امتیاز دهید