WidgetNas

چرخنده های نمایشی Carousel

برای نمایش چندین اسلاید پشت سر هم، با موضوعات مختلف، توسط این چرخنده های نمایشی قابل اجرا است.

حرکات نمایشی توسط کلاس های css و مقداری جاوا اسکریپ انجام میشود. شما میتوانید، تصاویر، اشکال، متون و تگهای html را در این اسلایدها داشته باشید.

چرخنده ها از چند قسمت اصلی تشکیل شده اند، یکی قسمت درج ردیفهای نمایشی و دیگری قمستهای کنترلی.

برای استفاده از این چرخنده ها بایستی یک div از کلاس carousel داشت، سپس باید برای فعال سازی جاوا اسکریپت، باید نوع آن را نیز تعیین کرد، wn-type="carousel". پارامترهای پیش فرض برای این موضوع وجود دارد ولیکن شما میتوانید به صورت دستی یا فراخوانی جاوا اسکریپت آنها را تغییر دهید.

خصوصیت autoPlay

مقدار این خصوصیت به صورت پیش فرض true است، یعنی با نمایش صفحه، اسلایدها به صورت خودکار پشت سر هم نمایش داده میشوند، اگر نمیخواهید به صورت خودکار این عمل انجام شود، مقدار آنرا false کنید. یعنی خصوصیت زیر را در موضوع بنویسید.
autoPlay = "false"
تنظیم توسط جاوا اسکریپت
WN("ID"].autoPlay = false;

خصوصیت interval

اگر تمایل دارید بین هر نمایش اسلاید زمانی صبر شود، این خصوصیت را تنظیم کنید، مقدار پیش فرض 5 ثانیه است، این مقدار بایستی به میلی ثانیه باشد.
interval = "5000"
تنظیم توسط جاوا اسکریپت
WN("ID"].interval = 5000;

خصوصیت hoverPause

اگر میخواهید با ورود نشانگر مویس، عمل نمایش اسلایدها متوقف شود و با خروج مویس، ادامه داده شود، این مقدار را تنظیم کنید. مقدار پیش فرض true است.
hoverPause = "true"
تنظیم توسط جاوا اسکریپت
WN("ID"].hoverPause = true;

نحوه نمایش افکت ها این موضوع برای صفحات راست به چپ و چ به راست یکسان است.

نمایش اسلاید ساده

ابتدایی ترین حالت نمایش اسلایدها بدون هیچ افکتی به شکل زیر است.

افکت های نمایشی

تعداد زیادی افکت نمایشی وجود دارد، که شما میتوانید از آنها استفاده کنید، اگر میخواهید همه اسلایدها از یک نوع افکت استفاده کنند، به div حاوی ردیف های اسلاید، کلاس نمایشی مرتبط را اضافه کنید. class="carousel-slides carousel-effect-fade"

اگر میخواهید هر اسلاید دارای یک افکت نمایشی و زمان نمایش باشد، میتوانید تنظیمات را به ردیف مورد نظر اضافه کنید.
برای اضافه کردن افکت، نام افکت را به div حاوی کلاس item اضافه کنید. class="carousel-item carousel-effect-fade"
اگر میخواهید زمان نمایش این اسلاید با دیگران متفاوت باشد، خصوصیت interval="ms" را مقدار دهی کنید.

لیست افکتها

در زیر لیست انواع افکتهای طراحی شده آورده شده است. با انتخاب هر کدام نوع افکت را مشاهده کنید. نام هر افکت دقیقا باید در کلاس آورده شود.

carousel-effect-bounce-down
carousel-effect-bounce-left
carousel-effect-bounce-right
carousel-effect-bounce-up
carousel-effect-fade
carousel-effect-fall
carousel-effect-flash
carousel-effect-flip
carousel-effect-flip-x
carousel-effect-flip-y
carousel-effect-lightspeed
carousel-effect-pulse
carousel-effect-roll
carousel-effect-rotate
carousel-effect-rotate-down
carousel-effect-rotate-up
carousel-effect-rubber-band
carousel-effect-shake
carousel-effect-slide-down
carousel-effect-slide-left
carousel-effect-slide-right
carousel-effect-slide-up
carousel-effect-swing
carousel-effect-tada
carousel-effect-wobble
carousel-effect-zoom
carousel-effect-zoom-down
carousel-effect-zoom-left
carousel-effect-zoom-right
carousel-effect-zoom-up

نمایش کنترل عقب و جلو

اگر میخواهید کاربر بتواند روی اسلایدها عقب و جلو رود به مثال زیر توجه کنید.

نشانگر تصویر

اگر میخواهید برای هر تصویر یک نشانگر داشته باشید یک div از کلاس carousel-indicators اضافه کنید

اگر میخواهید به جای مربع ها از دایره یا مستطیل کوچک استفاده کنید، یکی از کلاسهای indicator-circle و یا indicator-rectangle را اضافه کنید.


    <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 سیستم دیگر عملیات اضافه کردن خودکار را رها کرده و کنترل فرمان را به خود شما میدهد.

دقت کنید برای تعریف هر ردیف، تما باید کلاس indicator-item بکار برده شود، و گرنه سیستم قادر به شناسایی نیست. همچنین باید ایندکس ردیف تصویر نیز به آن وصل شود، این ایندکس از شماره صفر شروع میشود. indicator-index="0"

برای اضافه کردن نشانگرهای تصویری به مثال زیر توجه کنید.

محتوی

شما میتوانید هر محتوایی درون هر ردیف داشته باشید، برای این منظور محتوی خود را درون هر ردیف تعیین کنید.