پارامترهای نرم و صاف لغزنده پاسخگو پاسخگو برای صفحه فرود. نمونه هایی از استفاده از تنظیمات مختلف کشویی Slick

سلام دوستان. امروز ما در مورد صحبت خواهیم کرد جی کوئری پاسخگو لغزنده برای کمک به تزئین خود صفحه فرود، اطلاعات را درست بسازید و آن را بطور خلاصه ارائه دهید.

من یک بار انجام یک نظرسنجی در شبکه های اجتماعی و از من خواست که اسکریپت کشویی ارزشمندی را که خودتان استفاده می کنید ، پیشنهاد کنم. این پست موفقیت چندانی کسب نکرد ، اما به من توصیه شد ابزار عالی، که امروز در وهله اول خواهد بود بابت آن بسیار ممنونم. شاید بعد از این مقاله کسی یک فیلمنامه حتی بهتر را پیشنهاد کند.

اسکریپت های TOP که نوار لغزنده را در سایت پیاده سازی می کنند

از آنجا که تمام اسکریپت های ارائه شده در زیر پلاگین های jQuery هستند ، می توان آنها را به راحتی در سایت های معمولی html ، و در هر CMS و بسیاری از آنها جاسازی کرد.

چرخ فلک جغد 2

Owl Carousel 2 به نظر من بهترین کشویی jQuery رایگان است. بسیاری از تنظیمات ، در دسترس بودن API و سفارشی سازی کامل. همه اینها باعث شد که از نگاه اول عاشق شوم. در تلفن های هوشمند و تبلت ها بسیار خوب واکنش نشان می دهد ، از کشیدن انگشت و سایر موارد پشتیبانی می کند.

کشویی نرم و صاف

در وهله دوم ، اکنون ، Slick slider را قرار می دهم. گزینه ای جالب که مدتی است از آن استفاده کرده ام. برای کارهای صفحه فرود خوب بودم. توضیحات پرداخت ، آرم های مارک ها و شرکای این اسلایدر با همه وجود با همهمه مقابله کرد. می توان از روش ها و رویدادها استفاده کرد و همچنین اسلایدها را در چندین مکان در صفحه نمایش داد.

کشویی سودو

از جمله موارد دیگر ، کشویی با کشیدن و رها کردن عناصر بر روی صفحه نمایش لمسی ، از نوسان پشتیبانی می کند ، که بدون شک بازدید کنندگان وب سایت شما را با استفاده از تلفن های هوشمند یا رایانه لوحی خوشحال می کند.

بنابراین ، کشویی نام دارد نرم و صاف.... برای اتصال نوار لغزنده در سایت ، کد را در آن بچسبانید سر خطوط زیر سایت شما:

این همه! کشویی آماده رفتن است. اکنون تمام آنچه برای شما باقی مانده است این است که آن را به عناصر لازم وصل کنید. ما html می نویسیم:

و کشویی را به آن وصل کنید (این کد بهتر است در قسمت سر قرار گیرد):

پس از چنین دستکاری های ساده ، شما کشویی نرم و صاف کار را با تنظیمات پیش فرض شروع می کند.

بجای محتویات 1, محتویات 2 و دیگران ، می توانید هر محتوا را قرار دهید - تصاویر ، عناوین ، پاراگراف ها و غیره. به عنوان مثال ، برای یک فروشگاه آنلاین ، می توانید یک روتاتور محصول تهیه کنید:

می توانید تعداد نامحدودی از عناصر را به روتاتور اضافه کنید.

این کشویی همچنین از بسیاری تنظیمات پشتیبانی می کند - تعداد موارد نمایش داده شده ، تعداد موارد پیمایش شده ، کشویی عمودی یا افقی ، سرعت پیمایش و موارد دیگر.

همچنین می توانید تعداد موارد نمایش داده شده را برای وضوح نمایشگرهای مختلف تنظیم کنید:

$ (سند). از قبل (تابع () ($ (". محصول-کشویی")) نرم و صاف ((پاسخگو: [(نقطه شروع: 1024 ، // برای نمایش تا 1024 پیکسل یا بیشتر) تنظیمات: (اسلایدها ToShow: 3 ، // مقدار عناصر نمایش داده شده 3 اسلاید ToScroll: 3 ، // تعداد عناصر پیمایش شده در یک زمان 3 نقطه: صحیح // نمایش نقاط (با تعداد عناصر))) ، (نقطه شکست: 600 ، // برای نمایش کمتر از تنظیمات 600px: (نمایش اسلایدها: 2 ، // تعداد موارد نمایش داده شده 2 اسلایدToScroll: 2 // تعداد موارد پیمایش شده در یک زمان 2)) ، (نقطه شکست: 480 ، // برای نمایش کمتر از تنظیمات 480px: (اسلایدها ToShow: 1 ، // تعداد موارد پیمایش شده در یک زمان 1 اسلاید ToScroll: 1 // مقدار عناصر پیمایش شده در یک زمان 1))])))))؛

تنظیمات دقیق تر را می توان در اینجا یافت

نرم و صاف - یک راه حل جامع برای ایجاد قابلیت های چرخ فلک ، به اشکال مختلف آن. نسخه های نمایشی و استاندارد و منابع قابل مشاهده و بارگیری هستند.

قطع غیر ضروری است

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

• slick.min.js (کوچک شده)
• slick.css (+ می توانید سبک ها را تمیز کنید)
• slick-theme.css (+ می توانید سبک ها را تمیز کنید)

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

چرخ فلک اساسی

عملکرد اصلی چرخ فلک ، تنظیم کلاس div \u003d "چند مورد" است. div class \u003d "چرخ فلک" فقط برای تنظیم حاشیه چرخ فلک مورد نیاز است.

اسکریپت اولیه سازی اسکریپت

$ (سند). از قبل (تابع () ($ (". چند مورد"). نرم و صاف ((// نامتناهی: صحیح ، // پیمایش به صورت خودکار در یک دایره: true ، slidesToShow: 3 ، slidesToScroll: 3))) )؛

کشویی اسلاید (عرض: 100٪ ؛ شناور: سمت چپ)) .slick-slide (مکان نما: اشاره گر؛) .multiple-things .slick-slide (حاشیه: 0 15px؛) .carousel (padding: 0 3٪؛ float: سمت چپ ؛ عرض: 100٪ ؛ اندازه جعبه: جعبه مرزی؛) / * برای محصولات تجارت ووکامرس * / .carousel .woocommerce ul.products li.product (حاشیه: 1em 0 1.992em 0؛ عرض: 100٪؛)

چرخ فلک برای محصولات woocommerce

نسخه اصلاح شده

نمایش محصولات برای چرخ فلک کمی ساده شده است (! یک راه حل جهانی نیست ، می تواند در گزینه های مختلف چیدمان متفاوت نمایش داده شود):

هنگام بارگیری اسکریپت های چرخ فلک ، طرح بندی رخ می دهد. بیایید چند سبک اولیه ایجاد کنیم که چرخ و فلک را در طرح فعلی حفظ کند:

چندمنظوره (نمایشگر: flex! مهم؛ فلکس بسته بندی: بسته بندی؛ حاشیه پایین: 25px؛). img چندمنظوره (-موز-backface-دید: قابل رویت ؛ -webkit-backface-قابلیت مشاهده: قابل مشاهده ؛ backlight-visual : قابل مشاهده؛) .slick-list (حاشیه: 0 -1px 0 0! مهم؛ padding: 0 1px 0 0! مهم؛ عرض: 100٪؛) .slick-track (مرز: solid # e9eaec؛ edge-width: 0 0 0 1px؛ نمایش: flex! مهم؛ padding-bottom: .1rem؛) .carousel .product (حاشیه: جامد # e9eaec؛ مرز-عرض: 1px 1px 1px 0؛ زمینه: #fff؛ padding: 15px؛ list-style .

ویژگی های Backface برای تصاویر مشخص شده است ، tk. اگر شما مخفی شوید ، هنگام عقب برگرداندن آنها برچسب ها را مخفی می کنند.

پاسخگویی چرخ فلک

اسکریپت را می توان برای وضوح صفحه نمایش های مختلف سفارشی کرد. برای انجام این کار ، پارامترهای پاسخگو را در تنظیمات تجویز کنید.

پاسخگو: [(نقطه ضعف: 1280 ، تنظیمات: (اسلایدها ToShow: 4 ، slidesToScroll: 4 ،))) ، (نقطه شکست: 1024 ، تنظیمات: (slidesToShow: 3 ، slidesToScroll: 3 ،)) ، (breakpoint: 800، تنظیمات: (slidesToShow : 2 ، slidesToScroll: 2)) ، (breakpoint: 480 ، تنظیمات: (slidesToShow: 1 ، slidesToScroll: 1))]

یا آن را با وضوح مشخصی کاملاً غیرفعال کنید - تنظیمات: "لغو انتخاب"

کشویی نرم و صاف

به تازگی ، من همچنین نوار لغزنده اصلی را بر اساس نرم و صاف درست می کنم. یک مشکل کوچک وجود دارد - وقتی صفحه بارگیری می شود ، تمام اسلایدها برای کسری از ثانیه نمایش داده می شوند و سپس اضافه می شوند. من این را مانند این مبدل کردم:

همه چیز را بجز یک اسلاید نامرئی کنید:

Slick-track\u003e div: nth-child (2) img (نمایشگر: بلوک! مهم؛) # شاخص کشویی-صفحه نمایش (نمایشگر: هیچ؛)

و هنگامی که صفحه بارگیری می شود ، بقیه را روشن کنید:

JQuery (سند). از قبل (تابع () (jQuery ("# \u200b\u200bimg-slider index"). Css ("نمایش" ، "بلوک")))؛

بارگیری اسلایدها

اسلیک چیز دیگری دارد عملکرد مفید تنبل () شما فقط باید یک ویژگی را به اسکریپت اضافه کنید lazyLoad: 'ondemand'... و خروجی تصویر را تغییر دهید:

یا در غیر این صورت می توانید آن را مانند این ساده کنید:

شناسه) ، "کامل")؛ ؟\u003e

برای اینکه اسلایدها برعکس بارگیری شوند ، در ابتدا باید ثبت نام کنید lazyLoad: 'مترقی'

بارگیری استاندارد تصاویر کاملاً درست کار نمی کند ، توصیه می کنم از آن در رابطه با تنبلی استفاده کنید.

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

صفحهmedia و (حداکثر دستگاه-عرض: 480 پیکسل) (# فهرست کشویی ،. هتل-عکس (ارتفاع: 200px؛) .slick-list ، .slick-track (ارتفاع: 100٪؛) # index-slider img ، .hotel-photos img (ارتفاع: 100٪؛ متناسب با شیء: پوشش؛))

متناسب با شیء: پوشش؛ - ویژگی CSS 3 جالب ، توسط اکثر مرورگرها پشتیبانی می شود

گالری نرم و صاف

اخیراً در یکی از سایت ها متوجه استفاده جالب Slick به عنوان گالری شدم. ویژگی این است که تصاویر گالری به لبه های صفحه می رسد (سایت در مقابل صفحه نمایش کامل).

برای پیاده سازی ، باید نوار لغزنده (# شاخص_ کشویی) را در یک ظرف (.s2) قرار دهید ، و سبک های زیر را بنویسید:

S2 (سرریز: پنهان ؛ صفحه نمایش: بلوک ؛) # فهرست-لغزنده (حداکثر عرض: 1000px ؛ حاشیه: 0 خودکار ؛) .s2 .slick-list (سرریز: قابل مشاهده ؛) # index-slider .slick-slide img ( حداکثر عرض: 800px ؛ حاشیه: 0 خودکار؛)

یا حتی ساده تر:

برای ساخت چنین گالری ، کافی است 2 سبک را ثبت کنید:

# فهرست کشویی (حداکثر عرض: 1280px ؛ حاشیه: 0 خودکار؛) # فهرست کشویی .slick-list (سرریز: قابل مشاهده ؛)

ما در آخرین درس با دستور اسکریپت کشویی را بارگیری کردیم

$ bower i slick.js

همچنین می توانید در google پیدا کنید - اولین پیوند مطابق درخواست http://kenwheeler.github.io/slick/

مزایای کشویی:

- از وقایع لمسی پشتیبانی می کند - با کشیدن انگشت از تلفن می توان مشاهده کرد
- از پاسخگو پشتیبانی می کند - بسته به اندازه صفحه نمایش ، می توانید تعداد مختلفی از اسلایدها را تنظیم کنید: در صفحه های بزرگ ، 4 اسلایدها را مشاهده کنید ، در صفحه های متوسط \u200b\u200b، 2-3 ، بر روی تلفن ها ، یک بار

این یک کار خوب است که اسکریپت ها را از پوشه bower_compactions درج کنید



سپس ، هنگامی که اسکریپت به روز شود ، bower نیازی به بازنویسی شماره نسخه در کد ندارد ، زیرا bower اسکریپت ها را به اسامی ثابت می دهد که در هنگام بروزرسانی تغییر نمی کنند.

در مورد سبک هایی که در پوشه slick: slick.css ، slick.less ، slick.theme.less وجود دارد ، بهتر است آنها را در پوشه css کپی کرده و از آنجا وصل کنید. اگر آنها را در جای خود بگذارید و در سبک های کشویی تغییراتی ایجاد کنید ، پس از بروزرسانی متن ، همه این تغییرات از بین می روند.

فریم ها بر خلاف سایر کشویی ها ، در لیست قرار نمی گیرند بلکه در بلوک ها قرار می گیرند:

بدون پارامتر تماس بگیرید

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

$ (".single-item"). نرم و صاف ()؛

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

در مثال پارامترهای پیمایش حلقه را برای "لغزنده نرم و صاف" تنظیم می کنیم ، نمایش نقاط پیمایش را فعال می کنیم و تعداد اسلایدهای نمایش داده شده و پیمایش شده را مشخص می کنیم.
$ ("موارد چند منظوره"). نرم و صاف ((
بی نهایت: درست ،
// لغزنده حلقه - پس از آخرین اسلاید اولین می آید نقاط: درست ،
// نقاط زیر کشویی که اسلایدهای فعال را نشان می دهد
اسلایدهاToShow: 3 ،
// تعداد اسلایدها که روی صفحه نمایش داده می شوند اسلایدهاToScroll: 1
// تعداد اسلایدها که در یک زمان تبدیل شده اند
});

حالت سنتر

در حالت سانترال ، اسلاید فعال محور است.
$ (".center"). نرم و صاف ((
مرکز حالت: درست ،
اسلایدهاToShow: 3 ،
});
اسلاید مرکزی کلاس "مرکز نرم و صاف" دارد ، به این معنی که می توانید به طور جداگانه آن را سبک کنید.

تطبیق پذیری

در کشویی ، بسته به مقدار عرض صفحه ، می توانید نمایشگر پاسخگو از تعداد معینی از اسلایدها را تنظیم کنید. به عنوان مثال ، وقتی صفحه کمتر از 600 پیکسل داشته باشد باید فقط 2 اسلاید را نمایش دهید و یکبار آنها را تغییر دهید. راه حل این مشکل به این صورت خواهد بود

$(".uncycle"). نرم و صاف ((نامحدود: نادرست ، سرعت: 350 ، // سرعت چرخش را تعیین کنید اسلایدهاToShow: 4 ، // تعداد اسلایدها برای نشان دادن اسلایدهاToScroll: 2 ، // چند اسلاید برای تبدیل یک زمان پاسخگو: [(نقطه شکست: 600 ، // برای فعال کردن تنظیمات در چه صفحه نمایش می دهد تنظیمات: (slidesToShow: 2 ، slidesToScroll: 1 ، نامتناهی: صحیح ،))))؛

سوئیچینگ صاف

در حالت استاندارد ، نوار لغزنده جایگزینی ناگهانی اسلایدها را انجام می دهد. اما عملکرد Slick حالت تعویض اسلایدها را فراهم می کند. برای انجام این کار ، شما باید به ویژگی داده تنبلی متوسل شوید ، که مسیر تصویر را مشخص می کند. این ویژگی را نباید به بسته بندی ، بلکه به برچسب تصویر اختصاص داد. با این کار از استفاده از کد js جلوگیری می شود. بدیل این دستور خواهد بود

LazyLoad: "ondemand"

صفت باید به صورت زیر نوشته شود

< img data- lazy = " images/slaid.jpg" >

بدون حرکت حرکت صاف

خصوصیت چنین کشویی این است که فقط یک اسلاید روی صفحه نمایش وجود دارد که هنگام تعویض ، به تدریج به حالت بعدی تبدیل می شود. این اثر بر اساس اصل افزایش تدریجی شفافیت است. یعنی یک بازه زمانی مشخص انتخاب می شود که در طی آن شفافیت اسلاید اول از 0٪ به 100٪ تغییر می کند و به همین دلیل اسلاید بعدی قابل مشاهده می شود. اسکریپت چنین کشویی به این شکل خواهد بود

$(". محو"). نرم و صاف ((نامحدود: واقعی ، سرعت: 400 ، محو شدن: true ، cssEase: "خطی"))؛

Slick متنوع ترین و آسان برای استفاده کشویی است که امروزه در دسترس است. طیف گسترده ای از تنظیمات کشویی بسیاری از راه حل های مختلف برای اجرای کشویی را در بر می گیرد که احتمالاً مهمترین مزیت این کشویی است.

تنظیم کشویی نرم و صاف

• دسترسی - مقدار اولیه این پارامتر درست تنظیم شده است ، وظیفه اتصال دکمه های ناوبری برای کشویی را دارد - اینها پیکان های رو به جلو و عقب ، و همچنین دکمه هایی به شکل نقطه هستند.
• تطبیقی \u200b\u200bقد - فقط در مورد کشویی منفرد صدق می کند ، که بسته به ارتفاع کشویی ، ارتفاع ظرف والدین تغییر می کند. در شرایط اولیه ، تنظیم متصل نیست.
• پخش خودکار - چرخش اسلایدها را در حالت خودکار و بدون دخالت کاربر پیکربندی می کند. مقدار پیش فرض برای این تنظیم نادرست است.
• autoplaySpeed - این پارامتر برای پخش خودکار کمکی است و مدت زمانی را نشان می دهد که پس از آن نمایش به صورت خودکار نمایش داده می شود. در ابتدا روی 3000 میلی ثانیه تنظیم می شود.
• پیکان - پیکانهای رو به جلو و عقب را به نوار لغزنده وصل می کند. برای تغییر موقعیت و ظاهر این فلش ها می توانید از ورق سبک خارجی استفاده کنید.
• asNavFor - با استفاده از شناسه یا کلاس ، یک لینک ناوبری بین دو لغزنده برقرار می کند. در شرایط اولیه ، پارامتر با صفر مطابقت دارد.
• prevArrow - به شما امکان می دهد ظاهر پیکان ناوبری استاندارد را که اسلایدهای قبلی را پیمایش می کند ، تغییر دهید.
• nextArrow - شبیه به توابع پارامتر قبلی است ، اما مسئول فلش است که اسلاید را به جلو سوئیچ می کند.
• مرکز - اسلاید فعلی را به مرکز ظرف اصلی والدین برطرف کنید ، در ابتدا گزینه غیرفعال است.
• مرکز قرار دادن - هنگامی که حالت نمایش مرکزی اسلاید فعلی روشن است (پارامتر قبلی) ، یک حاشیه داخلی را برای این اسلاید تعیین می کنید ، که بصری به شما امکان می دهد تا اسلاید فعلی را بزرگ کنید.
• cssEase - مسئول انیمیشن تغییر تصاویر است ، می تواند آن را صاف یا واضح تر کند. مقدار پیش فرض "سهولت" را می پذیرد.
• سفارشی سازی - به شما امکان می دهد تا الگوی خود را وارد کنید تا اسلایدها را مشاهده کنید.
• نقاط - نقاط جابجایی را به طور پیش فرض متصل می کند.
• قابل کشیدن - امکان فشار دادن اسلایدها را با فشار دادن ماوس فراهم می کند. یعنی اگر مکان نما ماوس را بر روی کشویی قرار دهید ، آن را نگه دارید و آن را به طرف حرکت دهید ، سپس اسلاید به حالت بعدی تغییر می یابد.
• محو شدن - ایجاد اثر اسلاید محو در هنگام تعویض ، اثر انیمیشن.
• فوکوس انتخاب - عنصر کشویی مشخص شده را متمرکز می کند.
• تسکین دهنده - به شما امکان می دهد هنگام تعویض تصاویر ، حالت انیمیشن خاصی را تنظیم کنید.
• edgeFriction - تعویض اسلایدها را بر روی آخرین عنصر غیرفعال می کند. فقط درصورتی کار می کند که کشویی قفل نشود.
• نا محدود - نمایش اسلاید را حلقه می زند. این بدان معناست که وقتی آخرین تصویر را تغییر می دهید ، نمایش پرده ای از سر شروع می شود.
• ابتکار عمل - تصویری را که از آنجا نمایش اسلاید شروع می شود ، تعریف می کند. به طور پیش فرض ، کشویی شروع اولین تصویر را به ترتیب انتخاب می کند.
• تنبلی - به شما امکان می دهد حالت بارگیری را برای اسلایدهای بعدی تنظیم کنید. فقط 2 تنظیم در دسترس است: "ondemand" و "مترقی" که دومی پیش فرض است.
• مکث - هنگامی که مکان نما را روی موشواره بر روی بدن کشویی می چرخانید ، اسلایدها را نکشید. فقط در صورتی تعریف می شود که تعویض خودکار اسلاید تعریف شود.
• مکث - هنگام حرکت در سوئیچ های نقطه ای ، اسلایدها را متوقف نمی کند. فقط در صورتی تعریف می شود که تعویض خودکار اسلاید تعریف شود.
• پاسخ به - باعث واکنش در تغییر در عرض پنجره مرورگر می شود. سه مقدار برای استفاده در دسترس است: "windows" ، "slider" یا "min".
• پاسخگو - به شما امکان می دهد تنظیمات کشویی را با عرض صفحه تنظیم کنید. با تنظیمات قبلی تفاوت در این است که حد عرض با مقدار دقیق در پیکسل ها تعیین می شود. برای طرح بندی پاسخگو برای دستگاه های تلفن همراه استفاده می شود.
• اسلایدها - به شما امکان می دهد تعداد تصاویر نمایش داده شده در ناحیه قابل مشاهده را تنظیم کنید. در ابتدا ، 1 اسلاید نشان داده می شود ، اما این مقدار می تواند متغیر باشد.
• اسلایدهاToScroll - به نوار لغزنده می گوید که در هنگام تعویض چه تعداد عکس باید تغییر یابد.
• سرعت - سرعتی که اسلایدها تغییر می کنند را برطرف می کند.
• متغیر عرض - عرض ظروف کشویی را به عرض هر تصویر نمایش داده شده تطبیق می دهد.

UPD:من سعی کردم بر اساس این درس یک اسلایدر ایجاد کنم و معلوم شد که بسیار ناقص است.
تکمیل کننده

1. مخزن را در اینجا https://github.com/kenwheeler/slick بارگیری کنید
2. در پرونده index.html قبل از باز کردن اضافه کردن سبک های کشویی:

قبل از بسته شدن اسکریپت ها را وصل کنید

این اسلایدر به فونت ها نیز نیاز دارد. پوشه قلم ها از پوشه کشویی باید در پوشه css پروژه قرار بگیرد.
و همچنین در پوشه کشویی باید تصویر ajax-loader.gif را بیابید و مسیر آن را در پرونده slick-theme.css بنویسید

3. حالا ما یک کلاس را به عنوان div-wrider of slider ، مثلاً چند مورد ، اختصاص می دهیم
و در پرونده script.js کد را می نویسیم

$ (سند). از قبل (عملکرد () (
$ (". چند مورد") صاف ((
پخش خودکار: نادرست ،
autoplaySpeed: 6000 ،
فلش: درست ،
بی نهایت: درست ،
نقاط: درست ،
مرکز حالت: درست ،
اسلایدهاToShow: 3 ،
اسلایدهاToScroll: 1
});
});

4. نوار لغزنده در حال کار است. اما فلش ها قابل مشاهده نیستند ، زیرا آنها خارج از مرزهای کشویی هستند و عرض کشویی تمام صفحه است. فلش ها را در پرونده slick-theme.css جستجو کنید و دندانه را تغییر دهید تا فلش در داخل کشویی باقی بماند و نه در خارج.

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

$ ("وسط") صاف ((
مرکز حالت: درست ،
// اسلاید فعلی را مرکز کنید
مرکز قرار دادن: "50px" ،
// کمی اسلاید فعلی را بزرگ کنید
اسلایدهاToShow: 3
// نمایش 3 اسلاید برای مشاهده
});

برای افزایش اندازه کشویی مرکز. در حقیقت ، این روش کارایی ندارد.
اسلاید میانی را با سبک بزرگ کنید
.slick-centre (
پس زمینه-رنگ: # 8cc63f؛
تبدیل: مقیاس (1.3)؛
}

چندین کشویی و چرخ فلک تصویر باریک را با استفاده از کد کوتاه با دسته نمایش دهید. کاملاً پاسخگو ، ضربه تند وشدید زدن ، فعال کردن ، کشیدن ماوس رومیزی و حلقه بی نهایت. اتوپلاپ ، نقاط ، فلش و غیره کاملاً در دسترس است.

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

ما 5 طرح برای کشویی و 1 طرح کاروسل اضافه کرده ایم. همه طرح ها را می توانید در وب سایت نسخه ی نمایشی ما پیدا کنید. کافی است کد کوتاه طراحی را که دوست دارید و استفاده کنید ، کپی کنید.

ورود به سیستم را تغییر دهید

1.8 (08 آگوست 2019)

• [*] پیوندهای آزمایشی را به روز کنید
• [*] برخی از مسائل کوچک و کوچک را برطرف کرد.
• [*] متن به روز شده در تصویر زیر به روز شد یعنی تصویر کشویی را اضافه کنید.

1.7.1 (31 ، مه 2019)

• [+] پارامتر کوتاه کوتاه جدید یعنی image_fit \u003d "true" اضافه شد. از پارامتر image_fit برای مشخص کردن چگونگی تغییر اندازه تصویر برای متناسب کردن ظرف آن استفاده می شود. به طور پیش فرض "صحیح" است. گزینه ها "صحیح یا غلط" هستند. توجه: يادداشت: image_fit \u003d "درست" در صورتي كه كليد بازي داده شود بهتر كار مي كند. اگر image_fit \u003d "false" ، نیازی به استفاده از پارامتر کشویی نیست.
• [*] پارامتر image_fit با کد کوتاه کار می کند.
• [+] پارامتر کوتاه کوتاه جدید به عنوان مثال image_size \u003d "کامل" برای کد کوتاه اضافه شد (پیش فرض "کامل" است ، مقادیر تصاویر کوچک ، متوسط \u200b\u200b، medium_large ، بزرگ ، کامل)
• [-] ارتفاع پیش فرض 400 از پارامتر کشویی حذف شد.
• اگر - image_fit \u003d "false" ، ویژگی CSS متناسب با آبجکت را از img تحت CSS حذف کنید.

1.6.2 (12 فوریه 2019)

• [*] تغییر جزئی در جریان Opt-in.

1.6.1 (26 دسامبر 2018)

• [*] جریان انتخاب را به روز کنید.

1.6 (06 دسامبر 2018)

• [*] تست شده با وردپرس 5.0 و گوتنبرگ.
• [*] مسائل مربوط به ارتفاع کشویی ثابت با برخی از طرح ها.
• [*] امنیت بهتری را با esc_url و esc_html به دست آورد.
• [*] برخی از مشکلات CSS را برطرف کرد.

1.5.1 (05 ژوئن 2018)

• [*] برخی از دستورالعمل های افزونه مفصل WordPress را دنبال کنید.

1.5 (10/3/2018)

• [*] برخی از مسائل مربوط به CSS مربوط به پیکان کشویی را برطرف کرد.

1.4 (10/3/2018)

• [*] برخی از مسائل مربوط به CSS را برطرف کرد

1.3.4 (04/10/2017)

1.3.3 (04/10/2017)

• [*] slick.min.js به جدیدترین نسخه به روز شد
• [*] همه مشکلات پاسخگو را برطرف کرد و بسیاری از دستگاه های تلفن همراه را بررسی کرد.
• [*] اگر از هر افزونه کش استفاده می کنید ، پس از به روزرسانی افزونه ، حافظه پنهان را پاک کنید

1.3.2.1 (27/09/2017)

• [*] مسئله طراحی 6 حل شده با متغیر پارامتر کد کوتاه \u003d "صحیح" در طرح پاسخگو
• [*] اگر از هر افزونه کش استفاده می کنید ، پس از به روزرسانی افزونه ، حافظه پنهان را پاک کنید

1.3.2 (23/09/2017)

• [*] مسئله شماره 6 طراحی ثابت با متغیر پارامتر کوتاه کد متغیر \u003d "واقعی"
• [*] اگر از هر افزونه کش استفاده می کنید ، پس از به روزرسانی افزونه ، حافظه پنهان را پاک کنید

1.3.1.1 (23/09/2017)

• [*] مسئله پاسخگو گزارش شده توسط کاربران در v-1.3.1 را رفع کنید
• [*] اگر از هر افزونه کش استفاده می کنید ، پس از به روزرسانی افزونه ، حافظه پنهان را پاک کنید

1.3.1 (22/09/2017)

• [*] مسئله اصلی JS wp_register_script را برطرف کنید

1.3 (22/09/2017)

• [+] اضافه شد کشویی پارامتر در کد کوتاه
• [*] RTL بهتر شد تا با وب سایت های RTL همکاری کند
• [*] حالت مرکز و پهنای باند متغیر بهتر از هر بازخورد Usres بهبود می یابد
• [*] کشویی پارامتر بهبود یافته است

1.2.8 (22/05/2017)

• [+] RTL پشتیبانی می کند

1.2.7 (25/04/2017)

• [+] روکش اضافه شده برای طراحی -2

1.2.6 (07/11/2016)

• [+] "برگه چگونه کار می کند" اضافه شد
• [-] برگه طراحی حرفه ای حذف شد

1.2.5 (20/10/2016)

• تمام طرح ها را به روز کرده و اشکال را برطرف کنید
• مسئله نمایش تصویر ثابت بر روی تلفن همراه
• تصاویر پیکان را جایگزین کنید

1.2.4

• اسلایدهای کشویی به روز شده آخرین نسخه
• صفحه طراحی افزونه به روز شد.

1.2.3

• برخی از مسائل مربوط به CSS را برطرف کرد.

1.2.2

• برخی از مسائل مربوط به CSS را برطرف کرد.
• حل مسئله تعارض جی کوئری چند کشویی حل شد.

1.2.1

• رفع برخی از اشکالات
• نسخه حرفه ای با 16 طرح اضافه شده است