با سلام خدمت دوستان در این مقاله قصد دارم آموزش طراحی اسلایدر ساده توسط پلاگین جی کوئری به نام bxslider رو بهتون آموزش بدم .در ابتدا شما باید یک آشنایی جزئی با کد های جاوا اسکریپت و اچ تی ام ال داشته باشید تا بتونید این اسلایدر رو شخصی سازی کنید .
دریافت فایل های مورد نیاز :
در مرحله ی اول شما باید فایل های مورد نظر برای ساخت اسلایدر رو دانلود کنید تا بتونید در فایل اچ تی ام ال خودتون فراخوانی کنید .ابتدا وارد سایت http://bxslider.com خواهید شد و بر روی گزینه دانلود کلیک می کنید تا بتونید فایل های این پلاگین رو دانلود نمایید .
بعد از دانلود ما باید دو فایل از پلاگین رو در پوشه ی سایت خودمون انتقال بدیم .
jquery.bxslider.css : شامل کد های css این اسلایدر میشه .
jquery.bxslider.js : این فایل کد های جاوا اسکریپت این اسلایدر میشه .
یک فایل دیگر نیز وجود دارد به نام jquery.bxslider.min.js که همان فایل jquery.bxslider.js ولی با این تفاوت که نسخه ی فشرده شده این فایل می باشد که کم حجم تر از فایل اصلی می باشد ، در این آموزش ما از فایل jquery.bxslider.js استفاده می کنیم .
اما یک فایل مهم دیگر یا باید به صورت آنلاین در سند Html فراخوانی شود یا به صورت لوکال که این فایل جی کوئری می باشد . اگر می خواهید به صورت لوکال از آن استفاده کنید ابتدا وارد لینک زیر شده و آن را ذخیره کنید .
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
در این آموزش ما از این فایل به صورت لوکال استفاده می کنیم . در کنار فایل های دانلود شده یک پوشه به نام bx_loader.gif و controls.png وجود دارد که می توانید یک پوشه به نام img یا هر پوشه ای به اسم دلخواه انتخاب کنید و این دو عکس را درون آن کپی کنید .
خب در این مرحله فایل های مورد نیاز برای ساخت اسلایدر رو دریافت کردیم و مانند عکس زیر اون ها رو مرتب سازی کردیم .
فراخوانی فایل های مورد نیاز :
برای این که بتوانیم از فایل هایی که دریافت کردیم استفاده کنیم باید اون ها رو در فایل اچ تی ام ال خودمون فراخوانی کنیم .
در اول این آموزش توضیح دادم باید آشنایی جزئی با اچ تی ام داشته باشید تا بتونید این فایل ها رو فراخوانی کنید ، برای فراخونی هم همانند عکس زیر آن ها را درون تگ head قرار می دهیم .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>slider</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="css/jquery.bxslider.css"></script>
</head>
<body>
</body>
</html>
حتما دقت داشته باشید که فایل جی کوئری در اولین خط فراخوانی شود تا مشکلی پیش نیاید .
طراحی اسلایدر
بعد از فراخوانی فایل های مورد نیاز باید عکس ها رو به صورت لیست در اچ تی ام ال طراحی کنید و میدونید که باید li استفاده کنید .
در این آموزش من از سه عکس در اسلایدر استفاده می کنم .
<ul class="bxslider">
<li><img src="img/hillside.jpg" /></li>
<li><img src="img/picto.png" /></li>
<li><img src="img/houses.jpg" /></li>
</ul>
اگر این کد ها رو ذخیره کنید و در نتیجه رو در مرورگر مشاهده کنید ، چند عکس به صورت لیست برای شما به نمایش درمیاد ، ولی برای این که این سه عکس به صورت اسلاید به نمایش دربیاند شما باید قطعه کد جاوا اسکریپت رو درون تگ head قرار بدید . البته می تونید درون یک فایل با پسوند .js ذخیره کنید ، ولی خیلی این کار توصیه نمیشه ...
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
اگر فایل اچ تی ام ال رو اجرا کنید مشاده می کنید که اسلایدر ساده ما طراحی شد و دیدید که کار خیلی پیچیده ای نیست !
این اسلایدر به طور پیش فرض داری تنظیمات خاصی از قبیل توضیحات برای عکس ، اتوماتیک تعویض شدن عکس ها و ... نمی باشد که در بخش بعدی به این تنظیمات می پردازیم .
تنظمیات
اجرای خودکار اسلایدر
به صورت پیش فرض عکس ها تعویض نمی شوند و باید تنظیمات مربوطه را انجام دهید برای این کار کدی که درون فایل head قرار دادید رو ویرایش کنید و مقادیر زیر به اون اضافه کنید .
auto: true,
autoControls: true
بعد از اضافه شدن کد :
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
ایجاد Caption (عنوان) برای اسلاید ها
برای این کار علاوه بر اضافه کد دو مقادیر به کد جاوا اسکریپت باید از تگ title در اچ تی ام ال استفاده کنیم تا عنوان خود را به هر عکس نسبت دهیم .
کد اچ تی ام ال :
<ul class="bxslider">
<li><img src="img/hillside.jpg" title="Slide1" /></li>
<li><img src="img/picto.png" title="Slide2" /></li>
<li><img src="img/houses.jpg" title="Slide3" /></li>
</ul>
کد جاوا اسکریپت :
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
خب دوستان این دو تنظیمات جزئی ترین و پرکاربرد ترین تنظیمات این اسلایدر بودند که آموزش داده شد ، برای مشاهده تنظیمات بیشتر شما می تونید رو این لینک کلیگ کنید تا تنظیمات دیگری رو مشاهده کنید .
امیدوارم تونسته باشم در ساخت یک اسلایدر ساده کمکتون کرده باشم .
موفق و پیروز باشید ...
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید