چرخنده های نمایشی Carousel
برای نمایش چندین اسلاید پشت سر هم، با موضوعات مختلف، توسط این چرخنده های نمایشی قابل اجرا است.
حرکات نمایشی توسط کلاس های css و مقداری جاوا اسکریپ انجام میشود. شما میتوانید، تصاویر، اشکال، متون و تگهای html را در این اسلایدها داشته باشید.
چرخنده ها از چند قسمت اصلی تشکیل شده اند، یکی قسمت درج ردیفهای نمایشی و دیگری قمستهای کنترلی.
برای استفاده از این چرخنده ها بایستی یک div از کلاس
خصوصیت autoPlay
مقدار این خصوصیت به صورت پیش فرض true است، یعنی با نمایش صفحه، اسلایدها به صورت خودکار پشت سر هم نمایش داده میشوند، اگر نمیخواهید به صورت خودکار این عمل انجام شود، مقدار آنرا false کنید. یعنی خصوصیت زیر را در موضوع بنویسید.تنظیم توسط جاوا اسکریپت
خصوصیت interval
اگر تمایل دارید بین هر نمایش اسلاید زمانی صبر شود، این خصوصیت را تنظیم کنید، مقدار پیش فرض 5 ثانیه است، این مقدار بایستی به میلی ثانیه باشد.تنظیم توسط جاوا اسکریپت
خصوصیت hoverPause
اگر میخواهید با ورود نشانگر مویس، عمل نمایش اسلایدها متوقف شود و با خروج مویس، ادامه داده شود، این مقدار را تنظیم کنید. مقدار پیش فرض true است.تنظیم توسط جاوا اسکریپت
نحوه نمایش افکت ها این موضوع برای صفحات راست به چپ و چ به راست یکسان است.
نمایش اسلاید ساده
ابتدایی ترین حالت نمایش اسلایدها بدون هیچ افکتی به شکل زیر است.
افکت های نمایشی
تعداد زیادی افکت نمایشی وجود دارد، که شما میتوانید از آنها استفاده کنید، اگر میخواهید همه اسلایدها از یک نوع افکت استفاده کنند،
به div حاوی ردیف های اسلاید، کلاس نمایشی مرتبط را اضافه کنید.
اگر میخواهید هر اسلاید دارای یک افکت نمایشی و زمان نمایش باشد، میتوانید تنظیمات را به ردیف مورد نظر اضافه کنید.
برای اضافه کردن افکت، نام افکت را به div حاوی کلاس item اضافه کنید.
اگر میخواهید زمان نمایش این اسلاید با دیگران متفاوت باشد، خصوصیت
لیست افکتها
در زیر لیست انواع افکتهای طراحی شده آورده شده است. با انتخاب هر کدام نوع افکت را مشاهده کنید. نام هر افکت دقیقا باید در کلاس آورده شود.
نمایش کنترل عقب و جلو
اگر میخواهید کاربر بتواند روی اسلایدها عقب و جلو رود به مثال زیر توجه کنید.
نشانگر تصویر
اگر میخواهید برای هر تصویر یک نشانگر داشته باشید یک div از کلاس
اگر میخواهید به جای مربع ها از دایره یا مستطیل کوچک استفاده کنید، یکی از کلاسهای
<div class="carousel" wn-type="carousel">
<div class="carousel-slides carousel-effect-fade">
<div class="carousel-item active">
<img src="/images/Slides16-9-h-1.png" />
</div>
<div class="carousel-item">
<img src="/images/Slides16-9-h-2.png" />
</div>
<div class="carousel-item">
<img src="/images/Slides16-9-h-3.png" />
</div>
</div>
<button class="carousel-previous"></button>
<button class="carousel-next"></button>
<div class="carousel-indicators indicator-circle">
</div>
</div>
تا به اینجا دقت کنید، تعداد نمایشگرها به صورت خودکار بر حسب تعداد ردیف های نمایشی ساخته میشود و نیازی نیست شما به صورت دستی بخواهید ردیفی تعیین کنید. اما اگر میخواهید کنترل نمایش به دست خود شما باشد، با اضافه کردن اولین فرزند به div سیستم دیگر عملیات اضافه کردن خودکار را رها کرده و کنترل فرمان را به خود شما میدهد.
دقت کنید برای تعریف هر ردیف، تما باید کلاس
برای اضافه کردن نشانگرهای تصویری به مثال زیر توجه کنید.
![](/images/Slides16-9-h-1.png)
![](/images/Slides16-9-h-2.png)
![](/images/Slides16-9-h-3.png)
محتوی
شما میتوانید هر محتوایی درون هر ردیف داشته باشید، برای این منظور محتوی خود را درون هر ردیف تعیین کنید.