دوستان سلام. امروز ما صحبت خواهیم کرد jQuery تطبیقی slueers که به تزئین شما کمک می کند صفحه فرود، اطلاعات رقابتی را به طور صحیح ساخت و به طور خلاصه آن را ارسال کنید.
هنگامی که من یک نظرسنجی را صرف کردم شبکه های اجتماعی و خواسته بود تا برخی از اسکریپت کشویی ایستاده را ارائه دهد که از خودتان استفاده می کنید. موفقیت ویژه ای را نمره نداد، اما من توصیه کردم ابزار بزرگکه امروز برای اولین بار آمده است. برای چه - خیلی ممنونم شاید بعد از این مقاله، کسی حتی اسکریپت بهتر را توصیه می کند.
اسکریپت های برتر پیاده سازی کشویی در سایت
از آنجا که تمام اسکریپت های ارائه شده زیر پلاگین جی کوئری هستند، آنها به راحتی در هر دو سایت HTML معمولی و هر CMS و بسیاری از آنها جاسازی می شوند.
چرخ فلک جغد 2.
به نظر من، جغد چرخ فلک 2 بهترین لغزنده جی کوئری از رایگان است. تنظیمات جرم، دسترسی به API و امکان سفارشی سازی کامل. همه این ها با نگاه اول او عاشق شدند. این کاملا بر روی گوشی های هوشمند و تبلت ها واکنش نشان می دهد، از Swip (OM) و خیلی بیشتر پشتیبانی می کند.
لغزنده صاف
در رتبه دوم، در حال حاضر، من می توانم لغزنده صاف را قرار دهم. یک گزینه نسبتا جالب من برای مدتی استفاده کردم. برای وظایف، صفحه فرود من کاملا راضی بودم. نظرات، آرم های مارک های مارک ها و شرکا را با این همه این لغزنده با یک انفجار انجام دهید. ممکن است از روش ها و رویدادها استفاده کنید، همچنین یک نوار لغزنده را در چند مکان در صفحه نمایش دهید.
SUDO SLIDER.
در میان چیزهای دیگر، لغزنده با کشیدن عناصر روی صفحه نمایش لمسی پشتیبانی می کند که بدون شک از بازدیدکنندگان به سایت شما با استفاده از یک گوشی هوشمند یا رایانه لوحی لذت می برد.
بنابراین، نوار لغزنده نام دارد slick.js. برای اتصال نوار لغزنده در سایت، کد را وارد کنید سر. سایت شما خطوط زیر:
این همه! لغزنده آماده کار است. در حال حاضر همه چیز شما باقی می ماند این است که آن را به موارد لازم متصل کنید. ما HTML را نوشتیم:
و یک نوار لغزنده را به آن وصل کنید (این کد بهتر است در بخش سر قرار گیرد):
پس از چنین دستکاری های ساده، شما لغزنده صاف شروع به کار با تنظیمات پیش فرض
بجای محتوا 1, محتوا 2 و دیگران شما می توانید هر گونه محتوای - تصاویر، قفل، پاراگراف، و غیره. به عنوان مثال، روتاتور کالا را می توان برای فروشگاه آنلاین انجام داد:
پلاستیک جاروب
جارو چوب
شما می توانید تعداد نامحدودی از عناصر را به یک روتاتور اضافه کنید.
همچنین، نوار لغزنده پشتیبانی از انواع تنظیمات - تعداد آیتم های نمایش داده شده، تعداد عناصر پیمایش، نوار لغزنده عمودی یا افقی، سرعت پیمایش و غیره.
شما همچنین می توانید تعداد موارد نمایش داده شده را برای مجوز های مختلف نمایش پیکربندی کنید:
$ (سند) .Ready (function () ($ ($ ("Slider Product)). SLICK ((پاسخگو: [(نقطه توقف: 1024، // برای نمایش تا 1024 پیکسل و تنظیمات بیشتر: (SLIDESTOSHOW: 3، // شماره عناصر نمایش داده شده 3 Slidstoscroll: 3، // تعداد موارد پیمایش در زمان 3 نقطه: True // امتیازات صفحه نمایش (توسط تعداد عناصر)))، (نقطه توقف: 600، // برای نمایش کمتر از 600px تنظیمات: ( Slidestoshow: 2، // تعداد عناصر نمایش داده شده 2 Slidstoscroll: 2 // تعداد موارد پیمایش در زمان 2)))، (نقطه توقف: 480، // برای نمایش کمتر از تنظیمات 480 پیکسل: (Slidestoshow: 1، // شماره عناصر پیمایش در زمان های 1 slidestoscroll: 1 // عناصر پیمایش شماره در زمان 1))))))؛))؛))
با بیشتر تنظیمات دقیق شما می توانید در
صاف - یک راه حل جامع برای ایجاد یک عملکرد چرخ فلک، در تظاهرات مختلف آن. نسخه ی نمایشی و گزینه های معمول، و منابع را می توان مشاهده / دانلود کرد.
آواز بیش از حد
در پیکربندی اولیه، Slick دارای چند اسکریپت، چند سبک است، فونت خود. من از نسخه کوتاه استفاده می کنم:
- slick.min.js (به حداقل رساندن)
- sLICK.CSS (+ شما می توانید سبک های تمیز را تمیز کنید)
- slick-theme.css (+ شما می توانید سبک های تمیز را تمیز کنید)
سبک ها، در صورت تمایل، می توانند به یک ترکیب شوند.
لینک های فونت Slick من در یک fontawesome راحت تر جایگزین می کنم
چرخ فلک اصلی
عملکرد اصلی چرخ فلک مجموعه div class \u003d "چندین مورد" را تنظیم می کند. div class \u003d "چرخ فلک" فقط برای تنظیم دندانهای چرخ فلک مورد نیاز است.
اسکریپت ابتدایی اسکریپت
$ (سند) .ready (function () ($ multi-items). Slick ((/ / infinite: true، // scroll در Autoplay دایره ای: درست است، slidestoshow: 3، slidestoscroll: 3))؛) )
Slick-Slider (عرض: 100٪؛ شناور: چپ؛) .slick-Slide (مکان نما: اشاره گر؛) Multiple-items .slick-slide (حاشیه: 0 15px؛) .carusel (Padding: 0 3٪؛ شناور: چپ؛ عرض: 100٪؛ اندازه جعبه: Border-Box؛) / * WooCommerce * / .carousel .woocommerce ul.products li.product (حاشیه: 1EM 0 1.992EM 0؛ عرض: 100٪؛)
چرخ فلک Woocommerce
- >
نسخه اصلاح شده
کمی از خروج کالاها برای چرخ فلک ساده شده است (نه یک راه حل جهانی، در نسخه های مختلف طرح بندی ها را می توان به روش های مختلف نمایش داد):
هنگام بوت شدن اسکریپت، چرخ فلک در طول طرح رخ می دهد. سبک های اصلی را ایجاد کنید که چرخ فلک را در طرح فعلی نگه می دارد:
چندین مورد (صفحه نمایش: Flex! مهم؛ Flex-Wrap: بسته بندی؛ حاشیه پایین: 25px؛) .Multiple Items IMG (-Moz-Backface-Visibility: قابل مشاهده؛ -WebKit-Backface-Visible: قابل مشاهده؛ قابل مشاهده بودن : قابل مشاهده؛) .slick-list (حاشیه: 0 -1px 0 0! مهم؛ Padding: 0 1 پیکسل 0 0! مهم؛ عرض: 100٪؛) .slick-track (مرز: Solid # E9eeec؛ عرض مرزی: 0 0 1 پیکسل صفحه نمایش: Flex! مهم؛ Padding-bott: .1rem؛) .carousel. Product (Border: Solid # E9eaec؛ Border-Width: 1px 1px 1px 0؛ سابقه و هدف: #fff؛ پد: NONE؛ TEXT-ALIGN: CENTER؛ موقعیت: نسبی؛ حاشیه پایین: -.1rem؛ ارتفاع: خودکار؛) MULTIPLE-ITEMS\u003e. محصولات محصول (عرض: 25٪؛)
خواص پشتی برای تصاویر نشان داده شده است، زیرا اگر پنهان را ترک کنید، هنگام چرخش، آنها برچسب ها را پنهان می کنند.
سازگاری چرخ فلک
اسکریپت را می توان تحت قطعنامه های صفحه نمایش های مختلف پیکربندی کرد. برای انجام این کار، در تنظیمات پارامترهای پاسخگو را تجویز می کنیم
پاسخگو: [(نقطه توقف: 1280، تنظیمات: (SLIDESTOSHOW: 4، SLIDESTOSCRALL: 4،))، (نقطه توقف: 1024، تنظیمات: (SLIDESTOSHOW: 3، SLIDESTOSCRALL: 3،))، (نقطه توقف: 800، تنظیمات: (SLIDESTOSHOW : 2، slidestoscroll: 2))، (نقطه توقف: 480، تنظیمات: (slidestoshow: 1، slidestoscroll: 1))]
هر دو را با یک وضوح خاص غیر فعال کنید - تنظیمات: "Unslick"
لغزنده صاف
اخیرا، نوار لغزنده اصلی نیز بر اساس نرم افزاری است. یک مشکل کوچک وجود دارد - هنگام بارگیری یک صفحه برای برخی از کسری از ثانیه، تمام اسلایدها نمایش داده می شوند، و سپس برابر می شوند. من این را تغییر دادم:
ما همه چیز را به جز یک اسلاید نامرئی انجام می دهیم:
Slick-Track\u003e Div: Nth-Child (2) IMG (نمایش: بلوک! مهم؛) # Index-Slider IMG (نمایش: هیچکدام)
و هنگام بارگیری صفحه، بقیه را روشن کنید:
جی کوئری (سند) .ready (jQuery ("# \u200b\u200bindex-slider img"). CSS ("نمایش"، "بلوک")؛))؛
آپلود اسلایدها
Slick یکی دیگر است ویژگی مفید lazyload (). شما فقط باید ملک را به اسکریپت اضافه کنید. lazyload: 'Ondemand'. و خروجی تصویر را تغییر دهید:
یا هنوز هم می توانید ساده کنید:
شناسه)، "کامل")؛ \u003e\u003e
و به طوری که اسلایدها بر خلاف آن بارگذاری می شوند، ابتدا باید ملک را تجویز کنند. lazyload: 'Progressive'
بارگذاری کارکنان از تصاویر کاملا درست نیست، من توصیه می کنم در یک بسته نرم افزاری با lazyload استفاده کنید.
نسخه موبایل نوار لغزنده
شما می توانید در Mob بزرگ شوید. نسخه های ارتفاع نسخه، در حالی که لبه های برش از تصاویر، اما تصویر خواهد شد بیشتر:
صفحه media صفحه media و (حداکثر دستگاه عرض: 480 پیکسل) (# فهرست لغزنده، .hotel-hotel-photos (ارتفاع: 200px؛) .slick-list، .slick-track (ارتفاع: 100٪؛) # index-slider img ، .hotel-photos img (ارتفاع: 100٪؛ شیء مناسب: پوشش؛))
object-fit: پوشش؛ - املاک کلاس CSS 3، پشتیبانی شده توسط اکثر مرورگرها
گالری Slick.
به تازگی، یکی از این سایت ها به استفاده جالب از Slick به شکل یک گالری توجه کرد. این ویژگی این است که تصاویر گالری به لبه های صفحه نمایش می رسند (سایت VERST صفحه نمایش کامل است).
برای پیاده سازی لازم است که یک نوار لغزنده (# فهرست لغزنده) را در ظرف (.s2) قرار دهید و سبک های زیر را تجویز کنید:
S2 (سرریز: پنهان؛ صفحه نمایش: بلوک؛) # فهرست لغزنده (حداکثر عرض: 1000 پیکسل؛ حاشیه: 0 خودکار؛) .S2 .S2 .SLICK-LIST (Overflow: Visible؛) # فهرست لغزنده. فهرست لغزنده. لغزنده IMG ( حداکثر عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛)
یا حتی ساده تر:
برای ایجاد چنین گالری به اندازه کافی برای ثبت نام 2 سبک:
# Index-Slider (حداکثر عرض: 1280 پیکسل؛ حاشیه: 0 خودکار؛) # فهرست کشویی. لغزنده لیست (سرریز: قابل مشاهده؛)
اسکریپت لغزنده ما در آخرین درس درس دانلود کردیم
$ bower i slick.js
همچنین، آن را می توان در Google یافت - اولین پیوند بر روی درخواست Slick http://kenwheeler.github.io/slick/
مزایای لغزنده:
- پشتیبانی از رویدادهای لمسی - شما می توانید از تلفن مشاهده کنید، دروغ گفتن با انگشت خود را- پشتیبانی از پاسخگو - شما می توانید مقدار دیگری از اسلایدها را بسته به اندازه صفحه نمایش تنظیم کنید: بر روی صفحه نمایش بزرگ، مشاهده 4 اسلاید در محیط 2-3، بر روی گوشی های یک به یک
تمرین خوب - اتصال اسکریپت از پوشه Bower_Components
سپس، هنگام به روز رسانی اسکریپت، برنامه Bower مجبور نیست شماره نسخه را در کد بازنویسی کند، زیرا Bower می دهد اسامی دائمی اسکریپت هایی که در هنگام ارتقاء تغییر نمی کنند.
همانطور که برای سبک هایی که در پوشه Slick قرار دارند: Slick.css، Slick.less، Slick.Theme.Less بهتر است که آنها را به پوشه با CSS کپی کنید و از آنجا متصل شوید. اگر آنها را در محل قرار دهید، و در سبک های لغزنده تغییرات را تغییر دهید، سپس هنگام به روز رسانی اسکریپت، تمام این تغییرات از بین می رود.
بر خلاف لغزنده های دیگر، فریم ها در لیست قرار نمی گیرند، اما در بلوک ها:
بدون پارامترها تماس بگیرید
هنگامی که افزونه بدون پارامتر نامیده می شود، ما یک گزینه ساده با یک اسلاید بر روی صفحه و فلش های ناوبری دریافت می کنیم.$ (".single-item"). SLICK ()؛
نمایش چندین اسلاید
در مثال، ما پارامترهای "لغزنده Slick Slider" را نصب کردیم، صفحه نمایش نقاط ناوبری را روشن کرد، نشان دهنده تعداد اسلایدهای نمایش داده شده و پیمایش بود.$ ("Multiple-Items"). صاف ((
بی نهایت: درست است
// Slider Cocked - پس از آخرین اسلاید اول می رود نقطه: درست است
// امتیاز زیر یک نوار لغزنده نشان دادن یک اسلاید فعال
SlideStoShow: 3،
// تعداد اسلایدها که روی صفحه نمایش داده می شوند Slidestoscroll: 1.
// تعداد اسلایدها که یک بار به نوبه خود
});
حالت مرکزی
در حالت مرکزی، اسلاید فعال در مرکز نصب شده است.$ ("Center"). صاف ((
CenterMode: درست است
SlideStoShow: 3،
});
اسلاید مرکزی دارای کلاس "Slick-Centre" کلاس است که به این معنی است که می توان آن را به طور جداگانه انجام داد.
تطبیق پذیری
در نوار لغزنده، شما می توانید خروجی انطباقی یک تعداد مشخصی از اسلایدها را بسته به مقدار عرض صفحه نمایش پیکربندی کنید. به عنوان مثال، شما نیاز دارید، با عرض صفحه نمایش کمتر از 600 پیکسل، تنها 2 اسلاید نمایش داده شد، و آنها یک به یک را تغییر دادند. راه حل این کار به نظر می رسد$("Suncycle"). Slick ((Infinite: False، Speed: 350، // تعیین میزان چرخش SlideStoShow: 4، // تعداد اسلایدها برای نمایش Slidestoscroll: 2، // چند اسلاید در یک زمان پیچیده خواهد شد پاسخگو: [(نقطه توقف: 600، // گزارش ها در چه عرض صفحه ای که باید تنظیمات را داشته باشید، گزارش دهید تنظیمات: (SLIDESTOSHOW: 2، SLIDESTOSCRALL: 1، Infinite: true،)))))))))
سوئیچ صاف
در حالت استاندارد، لغزنده یک جایگزین تیز اسلایدها را انجام می دهد. اما عملکرد نرم افزاری یک حالت جایگزینی متوسط \u200b\u200bرا فراهم می کند. برای انجام این کار، شما باید به ویژگی داده های تنبل، که در آن مسیر تصویر تجویز شده است، استفاده کنید. ویژگی باید به بسته بندی اختصاص داده شود، بلکه تگ تصویر است. این از استفاده از کد JS اجتناب خواهد کرد. جایگزین این تیم خواهد بودLazyload: "Ondemand"
ویژگی باید ثبت شود
< img data- lazy = " images/slaid.jpg" >
سوئیچ صاف بدون حرکت
ویژگی این لغزنده این است که تنها یک اسلاید بر روی صفحه نمایش وجود دارد، که هنگام تغییر به تدریج به سمت بعدی حرکت می کند. اثر بر اساس اصل افزایش صاف شفافیت است. به عبارت دیگر، یک بخش زمان مشخصی انتخاب شده است، در طی آن شفافیت اولین اسلاید از 0٪ تا 100٪ متفاوت است، به دلیل اینکه اسلاید بعدی قابل مشاهده است. اسکریپت چنین کشویی به نظر می رسد$(".fade"). Slick ((Infinite: True، Speed: 400، محو شدن: درست، CSSEASE: "خطی"))؛
Slick امروز، چند منظوره ترین و آسان برای استفاده است. طیف گسترده ای از تنظیمات لغزنده مجموعه ای از راه حل های بزرگ را برای پیاده سازی لغزنده ها پوشش می دهد، که احتمالا مهمترین مزیت این لغزنده است.تنظیم لغزنده صاف
- صعود پذیری - مقدار اولیه این پارامتر به عنوان درست تنظیم شده است، مسئول اتصال دکمه های ناوبری برای لغزنده است - این فلش ها به جلو و عقب، و همچنین دکمه ها در قالب نقاط است.
- تطبیقی - این فقط به یک لغزنده تک اعمال می شود که ارتفاع کانتینر اصلی را تغییر می دهد بسته به ارتفاع نوار لغزنده. در شرایط اولیه، راه اندازی متصل نیست.
- صورت خودکار - تنظیم لغزش اسلاید را در حالت اتوماتیک، بدون مداخله کاربر تنظیم می کند. مقدار استاندارد این تنظیم با اشتباه مطابقت دارد.
- autoplayspeed - این پارامتر کمکی برای پخش خودکار است و یک دوره زمانی را تعیین می کند، پس از آن که چرخش اسلاید اتوماتیک اجرا می شود. در ابتدا، آن را به 3000 میلی ثانیه نوشته شده است.
- فلش - فلش را به نوار لغزنده به جلو و عقب متصل می کند. با استفاده از جدول سبک های خارجی، می توانید موقعیت و ظاهر این فلش را تغییر دهید.
- asnavfor - لینک ناوبری بین دو لغزنده را از طریق شناسه یا کلاس تنظیم می کند. در شرایط اولیه، پارامتر مربوط به مقدار صفر است.
- prevarrow - به شما اجازه می دهد تا ظاهر فلش ناوبری استاندارد را تغییر دهید، که اسلاید قبلی را آسان می کند.
- بعدا - شبیه به ویژگی های پارامتر قبلی، اما مسئول فلش است که اسلاید را به جلو تغییر می دهد.
- centerMode - رفع اسلاید فعلی در مرکز کانتینر اصلی، در ابتدا پارامتر خاموش است.
- مرکز - با حالت صفحه نمایش مرکزی اسلاید فعلی (پارامتر قبلی)، ضمیمه داخلی را برای این اسلاید تنظیم می کند که به صورت بصری به شما امکان می دهد اسلاید فعلی را افزایش دهید.
- cssease - مسئول انیمیشن تغییر تصاویر، می تواند آن را صاف یا واضح تر کند. ارزش استاندارد "سهولت" را می گیرد.
- سفارشی سازی - به شما اجازه می دهد تا قالب خود را برای مشاهده نوار لغزنده وارد کنید.
- نقاط - امتیازات را متصل می کند، به طور پیش فرض در حالت خاموش است.
- draggable - امکان تبدیل اسلایدها را با گیره ماوس متصل کنید. به این ترتیب، اگر شما نشانگر ماوس را به نوار لغزنده برسانید، آن را گیپ کنید و به سمت حرکت کنید، سپس اسلاید به یک بعدی تغییر خواهد کرد.
- محو شدن - هنگامی که سوئیچینگ یک اثر متحرک را ایجاد می کند، یک اثر متحرک ایجاد می کند.
- تمرکز بر روی - عنصر مشخص شده نوار لغزنده را متمرکز می کند.
- کاهش - به شما اجازه می دهد تا هنگام تغییر تصاویر یک حالت انیمیشن خاص را تنظیم کنید.
- لبه - سوئیچ اسلاید را بر روی آخرین عنصر غیرفعال می کند. این کار تنها در صورتی که نوار لغزنده حل نشده باشد کار می کند.
- بي نهايت. - خروس نمایش اسلایدها. این به این معنی است که هنگام تغییر آخرین تصویر، نمایش اسلاید برای اولین بار آغاز خواهد شد.
- اولیه - تصویری را مشخص می کند که نشان می دهد نمایش اسلاید آغاز خواهد شد. به طور پیش فرض، نوار لغزنده راه اندازی اولین تصویر را به ترتیب انتخاب می کند.
- لزیلا - به شما اجازه می دهد تا حالت بارگذاری اسلایدهای زیر را ایجاد کنید. فقط 2 مقادیر برای پیکربندی در دسترس هستند: "Ondemand" و "Progressive"، و دومی مقدار پیش فرض است.
- pauseonhover - هنگامی که مکان نما ماوس را روی بدن لغزنده قرار می دهید، حرکت اسلاید اسلایدها را متوقف می کند. این کار تنها در صورتی که سوئیچینگ خودکار اسلاید تعریف شود، کار می کند.
- pauseondotshover - هنگام حرکت دادن مکان نما ماوس به نقطه سوئیچ، حرکت اسلاید اسلایدها را متوقف می کند. این کار تنها در صورتی که سوئیچینگ خودکار اسلاید تعریف شود، کار می کند.
- پاسخ به. - باعث واکنش به تغییرات در عرض پنجره مرورگر می شود. سه ارزش برای استفاده در دسترس هستند: "پنجره"، "لغزنده" یا "دقیقه".
- پاسخگو - به شما امکان می دهد تنظیمات لغزنده را برای عرض صفحه تنظیم کنید. این از تنظیمات قبلی متفاوت است، زیرا محدودیت عرض با مقدار دقیق در پیکسل تعیین می شود. برای طرح بندی تطبیقی \u200b\u200bبرای دستگاه های تلفن همراه استفاده می شود.
- slideStoShow. - به شما اجازه می دهد تعداد عکس های نمایش داده شده در منطقه قابل مشاهده را تنظیم کنید. در ابتدا 1 اسلاید نشان داده شده است، اما این مقدار می تواند متنوع باشد.
- slidestoscroll - گزارش لغزنده چقدر شما نیاز به تغییر تصاویر در هنگام تغییر.
- سرعت. - رفع سرعت هایی که اسلایدها تغییر می کنند، رفع می شود.
- متغیر width - تطبیق عرض ظروف اسلاید را زیر عرض هر تصویر نمایش داده شده.
من مکمل هستم
1. مخزن را اینجا دانلود کنید https://github.com/kenwheeler/slick
2. در فایل index.html قبل از باز کردن
قبل از بسته شدن ما اسکریپت ها را وصل می کنیم
این لغزنده نیاز به فونت دارد. پوشه فونت از پوشه لغزنده باید در پوشه CSS پروژه قرار گیرد.
و در پوشه کشویی شما نیاز به پیدا کردن نقاشی Ajax-loader.gif و در فایل Slick-theme.css برای ثبت نام راه به آن
3. در حال حاضر تقسیم کشویی یک کلاس اختصاص داده شده است، به عنوان مثال، چندین مورد
و در فایل script.js ما کد را می نویسیم
$ (سند) .ready (تابع () (
$ ("چند مورد"). صاف ((
AutoPlay: FALSE،
Autoplayspeed: 6000،
فلش: درست است
بی نهایت: درست است
نقطه: درست است
CenterMode: درست است
SlideStoShow: 3،
Slidestoscroll: 1.
});
});
4. لغزنده در حال حاضر کار می کند. اما فلش ها قابل مشاهده نیستند، زیرا آنها خارج از نوار لغزنده هستند و من عرض لغزنده را در کل صفحه نمایش دارم. فلش ما در حال جستجو در فایل slick-theme.css است .CSS فایل را تغییر دهید، به طوری که فلش در داخل نوار لغزنده باقی می ماند، و نه در خارج.
5. خوب در حال حاضر، در ایده من، لغزنده مرکزی اسلاید باید از طرف متفاوت باشد.
نوشتن کنید که به اندازه کافی ثبت نام کنید
$ (". وسط"). صاف ((
CenterMode: درست است
// مرکز اسلاید فعلی
CenterPadding: "50px"،
// کمی اسلاید فعلی را افزایش دهید
SlideStoShow: 3.
// نمایش 3 اسلاید برای مشاهده
});
برای افزایش اندازه نوار لغزنده مرکزی. در واقع، این روش کار نمی کند
سبک اسلاید مرکزی را افزایش داد
.slick-center (
پس زمینه رنگ: # 8CC63F؛
تبدیل: مقیاس (1.3)؛
}
نمایش نوار لغزنده تصویر صاف و چرخ فلک با استفاده از کوتاه با دسته بندی. به طور کامل پاسخگو، کش رفتن فعال، کشیدن ماوس دسکتاپ و حلقه بی نهایت. به طور کامل با ARROW کلید های ناوبری ناوبری، نقاط، فلش و غیره قابل دسترسی است
این یک نوع پست سفارشی و طبقه بندی برای ایجاد یک نوار لغزنده، با گزینه های Allost نامحدود و پشتیبانی از لغزنده های چندگانه در هر صفحه استفاده می کند. شما همچنین می توانید نوار لغزنده تصویر را در هدر وب سایت خود نمایش دهید.
ما 5 طرح برای لغزنده و 1 طراحی برای چرخ فلک اضافه کرده ایم. شما می توانید تمام طرح های موجود در وب سایت نسخه ی نمایشی ما را پیدا کنید. فقط کوتاه طراحی طراحی را که دوست دارید و استفاده کنید کپی کنید.
اصلاحیه های مجله
1.8 (08، اوت 2019)
- [*] به روز رسانی لینک های نسخه ی نمایشی
- [*] برخی از مسائل کوچک کوچک را ثابت کرد.
- [*] متن به روز شده در زیر تصویر مورد نظر IE اضافه کردن تصویر لغزنده.
1.7.1 (31، مه 2019)
- [+] اضافه شده پارامتر کوتاه کوتاه IE IMAGE_FIT \u003d »درست است. پارامتر Image_Fit برای مشخص کردن چگونگی تغییر تصویر باید تغییر اندازه داده شود. به طور پیش فرض ارزش "درست" است. گزینه ها درست یا غلط هستند توجه: توجه: Image_Fit \u003d "TRUE" کار بهتر اگر SliderReight داده شود. اگر image_fit \u003d »false»، بدون نیاز به استفاده از پارامتر SliderReight.
- [*] پارامتر Image_Fit با هر دو کد کوتاه کار می کند.
- [+] اضافه شده پارامتر کوتاه کوتاه IE IMAGE_SIZE \u003d "FULL" برای کوتاه (به طور پیش فرض "کامل"، مقادیر تصویر بند انگشتی، متوسط، mediM_large، بزرگ، کامل)
- [-] پیش فرض ارتفاع 400 از پارامتر SliderReight حذف شده است.
- [-] حذف Object-Fit CSS Property از IMG تحت CSS اگر Image_Fit \u003d »FALSE».
1.6.2 (12، فوریه 2019)
- [*] تغییر جزئی در جریان انتخاب.
1.6.1 (26، دسامبر 2018)
- [*] به روز رسانی به روز رسانی جریان.
1.6 (06، 2018 دسامبر)
- [*] تست شده با وردپرس 5.0 و گوتنبرگ.
- [*] مسائل ارتفاع لغزنده ثابت با برخی از طرح ها.
- [*] امنیت بهتر را با ESC_URL و ESC_HTML دریافت کرد.
- [*] برخی از مسائل CSS را ثابت کرد.
1.5.1 (05، ژوئن 2018)
- [*] برخی از دستورالعمل های پلاگین وردپرس را دنبال کنید.
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 با پارامتر کوتاه MargarWidth \u003d »درست» در طرح پاسخگو
- [*] اگر شما از هر پلاگین کش استفاده می کنید، لطفا پس از به روز رسانی پلاگین، حافظه پنهان خود را پاک کنید
1.3.2 (23/09/2017)
- [*] مشکل طراحی 6 با پارامتر کوتاه MargarWidth \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 کار کند
- [*] حالت مرکز و متغیر WIDTH بهبود یافته بهتر به عنوان بازخورد USRES
- [*] طلسم پارامتر بهبود یافته است.
1.2.8 (22/05/2017)
- [+] RTL پشتیبانی می شود
1.2.7 (25/04/2017)
- [+] پوشش اضافه شده برای طراحی 2
1.2.6 (07/11/2016)
- [+] اضافه شده "چگونه Tab Work"
- [-] حذف طراح طراحی طرفدار
1.2.5 (20/10/2016)
- به روز رسانی تمام طرح ها و رفع اشکال
- مشکل نمایش تصویر ثابت در تلفن همراه
- تصاویر arrow جایگزین شده است
1.2.4
- به روز شده Slider JS به آخرین نسخه.
- به روز شده صفحه طراحی پلاگین.
1.2.3
- برخی از مسائل CSS را ثابت کرد.
1.2.2
- برخی از مسائل CSS را ثابت کرد.
- حل مسئله چندگانه لغزنده لغزنده.
1.2.1
- ثابت برخی از اشکال
- نسخه Pro اضافه شده با 16 طرح
