اسلایدر متن و تصویر liteAccordion

اسلایدر متن و تصویر liteAccordion

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

این پلاگین یک اسلایدر آکوردئونی زیبا ایجاد می کند.


مراحل انجام کار

این آموزش شامل ۹ قسمت زیر است:

  1. اضافه کردن فایل های لازم
  2. اضافه کردن تگ های HTML به صفحه
  3. صدا زدن پلاگین
  4. یک مثال ساده
  5. تنظیمات یا گزینه های پلاگین liteAccordion
  6. متدهای پلاگین liteAccordion
  7. شماره گذاری آیتم های اسلایدر
  8. فعال کردن اسلایدها با قرار گرفتن موس روی هر آیتم
  9. دانلود فایل های پلاگین liteAccordion

اضافه کردن فایل های لازم

برای استفاده از این پلاگین، ابتدا باید فایل های زیر را به صفحه تان اضافه کنید:

  1. liteAccordion.css
  2. jquery.min.js
  3. liteaccordion.jquery.js
<head>
<!– liteAccordion css –>
<link href=”/liteAccordion-master/css/liteaccordion.css” rel=”stylesheet” /><!– jQuery –>
<script src=”/jquery.min.js”></script><!– easing –>
<script src=”/liteAccordion-master/js/jquery.easing.1.3.js”></script><!– liteAccordion js –>
<script src=”/liteAccordion-master/js/liteaccordion.jquery.js”></script>
</head>

در انتهای این آموزش فایل های پلاگین “liteAccordion” برای دانلود قرار داده شده است.


اضافه کردن تگ های HTML به صفحه

برای ساخت یک اسلایدر آکوردیانی، باید تگ های HTML را طبق کد زیر، در صفحه قرار دهید:

<div id=”yourID”>
<ol>
<li>
<h2><span>Slide One</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>

صدا زدن پلاگین

حالا همه چیز آماده است و تنها کاری که مانده، صدا زدن پلاگین است:

<script>
$(document).ready(function(){
$(‘#yourID’).liteAccordion();
});
</script>

یک مثال ساده

در مثال زیر یک اسلایدر آکوردیانی ساده با محتوای متن و تنظیمات پیشفرض نشان داده شده است:

مثال ۱

<!DOCTYPE HTML>
<html>
<head>
<!– liteAccordion css –>
<link href=”/liteAccordion-master/css/liteaccordion.css” rel=”stylesheet” /><!– jQuery –>
<script src=”/jquery.min.js”></script><!– easing –>
<script src=”/liteAccordion-master/js/jquery.easing.1.3.js”></script><!– liteAccordion js –>
<script src=”/liteAccordion-master/js/liteaccordion.jquery.js”></script>
</head>
<body>
<div id=”two”>
<ol>
<li>
<h2><span>اسلایدر اول</span></h2>
<div>
<h3>این اسلایدر اول است</h3>
<p>از دیگر آموزش های سایت آموزش دیدن فرمایید <br />
<a href=”http://www.webtekar.ir/html”>آموزش HTML</a>
</p>
</div>
</li>
<li>
<h2><span>اسلایدر دوم</span></h2>
<div>
<h3>این سلایدر دوم است</h3>
<p>از دیگر آموزش های سایت آموزش دیدن فرمایید <br />
<a href=”http://www.webtekar.ir/php”>آموزش PHP</a>
</p>
</div>
</li>
<li>
<h2><span>اسلایدر سوم</span></h2>
<div>
<h3>این اسلایدر سوم است</h3>
<p>از دیگر آموزش های سایت آموزش دیدن فرمایید <br />
<a href=”http://www.webtekar.ir/css”>آموزش CSS</a>
</p>
</div>
</li>
<li>
<h2><span>اسلایدر چهارم</span></h2>
<div>
<h3>این اسلایدر چهارم است</h3>
<p>از دیگر آموزش های سایت آموزش دیدن فرمایید <br />
<a href=”http://www.webtekar.ir/javascript”>آموزش JavaScript</a>
</p>
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<script>
$(document).ready(function(){
$(‘#two’).liteAccordion({containerWidth : 600});
});
</script>
</body>
</html>

تنظیمات یا گزینه های پلاگین liteAccordion

در لیست زیر گزینه های پلاگین liteAccordion همراه با مقادیر پیشفرض شان آورده شده است:

containerWidth : 960, // fixed (px) containerHeight : 320, // fixed (px) headerWidth: 48, // fixed (px) activateOn : 'click', // click or mouseover firstSlide : 1, // displays slide (n) on page load slideSpeed : 800, // slide animation speed onTriggerSlide : function() {}, // callback on slide activate onSlideAnimComplete : function() {}, // callback on slide anim complete autoPlay : false, // automatically cycle through slides pauseOnHover : false, // pause on hover cycleSpeed : 6000, // time between slide cycles easing : 'swing', // custom easing function theme : 'basic', // basic, dark, light, or stitch rounded : false, // square or rounded corners enumerateSlides : false, // put numbers on slides linkable : false // link slides via hash

بسادگی مانند زیر، می توانید پارامترها را به تابع ()liteAccordion پاس بدهید، دو پارامتر اول یعنی onTriggerSlide و onSlideAnimComplete بترتیب “رویداد باز یا بسته شدن اسلایدر” و “رویداد تمام شدن اسلاید” است:

$('#one').liteAccordion({
 onTriggerSlide : function() {
 this.find('figcaption').fadeOut();
 },
 onSlideAnimComplete : function() {
 this.find('figcaption').fadeIn();
 },
 autoPlay : true,
 pauseOnHover : true,
 theme : 'stitch',
 rounded : true,
 enumerateSlides : true
}).find('figcaption:first').show();

متدهای پلاگین liteAccordion

چندین متد برای پلاگین liteAccordion وجود دارد:

play // trigger autoPlay on a stopped accordion
stop // stop an accordion playing
next // trigger the next slide
prev // trigger the previous slide
destroy // remove the accordion, destroying all event handlers and styles
debug // returns a debug object

تمام متدهای بالا، قابلیت زنجیر شدن (chainable) را دارند:

$('#yourdiv').liteAccordion('play');
زنجیر کردن متدها:
$('#yourdiv').liteAccordion('next').liteAccordion('next');

شماره گذاری آیتم های اسلایدر

با استفاده از گزینه ی enumerateSlides و تنظیم آن با مقدار “true” می توانید آیتم های اسلایدر را شماره گذاری کنید، همچنین با استفاده از گزینه linkable می توانید هر کدام از آیتم های اسلایدر را به ازای کلیک روی عنصر <a> که بصورت درون پیوندی به آیتم های اسلایدر لینک شده است، فعال نمایید:

<script>
$(document).ready(function(){
 $('#two').liteAccordion({
 containerWidth : 500,
 theme : 'stitch',
 rounded : true,
 enumerateSlides : true,
 firstSlide : 2,
 linkable : true,
 easing: 'easeInOutQuart' });
});
</script>

فعال کردن اسلایدها با قرار گرفتن موس روی هر آیتم

با استفاده از گزینه activateOn و تنظیم آن با مقدار “mouseover” زمانی که مکان نمای روی آیتم ها قرار می گیرد، عملیات اسلاید اتفاق می افتد:

<script>
$(document).ready(function(){
 $('#two').liteAccordion({
 containerWidth : 600,
 theme : 'light',
 firstSlide : 3,
 easing: 'easeOutBounce',
 activateOn: 'mouseover'});
});
</script>

دانلود فایل های پلاگین liteAccordion

حجم: ۳۴۲ کیلو بایت



اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google