چرخ فلک جغد - پلاگین جی کوئریبا پشتیبانی لمسی، که به شما امکان می دهد یک نوار لغزنده پاسخگو (تطبیقی) (چرخ فلک) ایجاد کنید.
بسیار راحت، ساده و پلاگین تطبیقیبرای ایجاد لغزنده، چرخ فلک و غیره
در این مقاله سعی می کنم نحوه عملکرد آن را توضیح دهم و به شما نشان دهم.

نصب پلاگین Owl Carousel
ابتدا باید آرشیو را با افزونه دانلود کنیم

در زیر نمونه ای از نصب یک افزونه در قالب DataLife Engine را نشان می دهم.

پس از دانلود آرشیو، آن را باز کرده و فایل ها را به صورت زیر توزیع کنید:
فایل owl.carousel.cssو owl.transitions.css در یک پوشه قرار دهید سبکبنابراین یا css
فایل owl.carousel.js در پوشه js قرار دهید

حالا باید این فایل ها را به هم متصل کنیم تا در قالب ما کار کنند.
باز کردن فایل main.tplقبل از خط وارد خطوط زیر:
پوشه cssبه چیزی که در آن هستید تغییر دهید cssسبک ها!
سپس در پایین قبل از خط این خط را وارد کنید:
خوب همین! ما با نصب تمام شده ایم.

حالا باید خود اسلایدر را وارد و پیکربندی کنیم.
من با یک مثال نشان خواهم داد تاپ نیوزآن ها نمایش اخبار محبوب از طریق چرخ فلک جغد ما.

صفحه مستندات همه گزینه‌ها، دموها و نحوه استفاده از پلاگین Owl Carousel را توضیح می‌دهد.
پیوند را دنبال کنید و هر نوار لغزنده ای را که دوست دارید انتخاب کنید.
برای ما تاپ نیوزمن اولین مورد را با نام انتخاب کردم تصاویر.در تب جاوا اسکریپت، این خطوط را کپی کنید:
$(document).ready(function() ($("#owl-demo").owlCarousel(( پخش خودکار: 3000، آیتم ها: 4، آیتم دسکتاپ: , آیتم دسکتاپ کوچک: )); ));و آنها را در فایل پیست کنید main.tplقبل از خط

سپس در تب CSS، خطوط را کپی کنید:
#owl-demo .item( margin: 3px; ) #owl-demo .item img (نمایش: بلوک؛ عرض: 100%؛ ارتفاع: خودکار؛ ) و آنها را در هر یک قرار دهید cssفایل یا فایل main.tplقبل از خط اما بعد از خط !
اکنون کد HTML خود را تجزیه می کنیم و به آن متصل می شویم تاپ نیوزدر پرونده main.tplبرچسب را در جای مناسب وارد کنید (تاپ نیوز)که به نوبه خود لیستی از اخبار محبوب را ارائه می دهد، ظاهرکه می تواند در یک فایل پیکربندی شود topenews.tpl،بیشتر در مورد آن در زیر .
کد تگ ما باید به شکل زیر باشد:

خوب، اکنون فقط باید خود خبر را تنظیم کنیم.
باز کردن فایل تیopnews.tplو در همان ابتدا وارد می شویم:

اگر از یکی از قالب های بوت استرپ من استفاده می کنید، می توانید از خطوط زیر در فایل به عنوان گزینه استفاده کنید. topnews.tpl:

اخبار در این فرم نمایش داده می شود

این افزونه را می توان تقریباً در همه جا استفاده کرد، درست مانند استفاده از برچسب (دسته سفارشی)
آنها همچنین می توانند جایگزین گالری استاندارد DLE شوند، من یک مقاله جداگانه در این مورد منتشر خواهم کرد. از سلامتی خود لذت ببرید ;)

با احترام ادمین دانلود توجه: به حداکثر دانلود رسیده است. فردا بیا =)

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

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

با استفاده از jQuery در ارتباط با HTML5 و CSS3، می توانید صفحات خود را با افکت های منحصر به فرد جذاب تر کنید و توجه بازدیدکنندگان را به ناحیه خاصی از سایت جلب کنید.

Slick - افزونه کشویی چرخ فلک مدرن

Slick یک افزونه رایگان جی کوئری است که توسعه دهندگان آن ادعا می کنند که راه حل آنها تمام نیازهای اسلایدر شما را برآورده می کند. نوار لغزنده پاسخگو - چرخ فلک می تواند در حالت "کاشی" برای دستگاه های تلفن همراه و در حالت "کشیدن و رها کردن" برای نسخه دسکتاپ کار کند.

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

حالت نمایشی | دانلود

Owl Carousel 2.0 - پلاگین جی کوئری برای دستگاه های لمسی

این افزونه دارای مجموعه وسیعی از امکانات است که هم برای مبتدیان و هم برای توسعه دهندگان با تجربه مناسب است. این نسخه ی به روز شدهنوار لغزنده - چرخ فلک. سلف او نیز همین نام را داشت.

این نوار لغزنده دارای چند پلاگین داخلی برای بهبود عملکرد کلی است. انیمیشن، پخش ویدیو، پخش خودکار اسلایدر، بارگذاری تنبل، تنظیم خودکارارتفاعات از ویژگی های اصلی Owl Carousel 2.0 هستند.

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

مثال ها | دانلود

پلاگین jQuery Silver Track

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

مثال ها | دانلود

AnoSlide - نوار لغزنده jQuery پاسخگو بسیار فشرده

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

مثال ها | دانلود

چرخ فلک جغد - اسلایدر جی کوئری - چرخ فلک

چرخ فلک جغد - لغزنده با پشتیبانی صفحه نمایش های لمسیو تکنولوژی کشیدنو رها کنید، به راحتی در کد HTML جاسازی می شود. این افزونه یکی از بهترین اسلایدرهایی است که به شما امکان می دهد چرخ فلک های زیبایی را بدون هیچ نشانه گذاری مخصوص تهیه کنید.

مثال ها | دانلود

گالری سه بعدی - چرخ فلک

از انتقال های سه بعدی بر اساس سبک های CSS و برخی کدهای جاوا اسکریپت استفاده می کند.

مثال ها | دانلود

چرخ فلک سه بعدی با استفاده از TweenMax.js و jQuery

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

مثال ها | دانلود

چرخ فلک با استفاده از بوت استرپ

نوار لغزنده چرخ فلک پاسخگو با استفاده از فناوری بوت استرپ درست برای وب سایت جدید شما.

مثال ها | دانلود

نوار لغزنده مبتنی بر بوت استرپ - چرخ فلک جعبه متحرک

بیشترین درخواست در وب سایت های نمونه کار و تجاری. نوع مشابهی از لغزنده - چرخ فلک اغلب در هر نوع سایتی یافت می شود.

مثال ها | دانلود

دایره لغزنده کوچک

این نوار لغزنده اندازه کوچک آماده کار بر روی دستگاه‌هایی با وضوح صفحه نمایش است. لغزنده می تواند هم در حالت دایره ای و هم در حالت چرخ و فلک کار کند. دایره کوچک به عنوان جایگزینی برای سایر لغزنده از این نوع ارائه شده است. دارای پشتیبانی داخلی سیستم های عامل IOS و اندروید.

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

مثال ها | دانلود

نوار لغزنده محتوای Thumbelina

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

مثال ها | دانلود

وای چرخ فلک کشویی

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

مثال ها | دانلود

نوار لغزنده محتوای جی کوئری پاسخگو bxSlider

اندازه پنجره مرورگر را تغییر دهید تا ببینید چگونه نوار لغزنده سازگار می شود. Bxslider دارای بیش از 50 گزینه سفارشی سازی است و ویژگی های خود را با جلوه های انتقال مختلف به نمایش می گذارد.

مثال ها | دانلود

jCarousel

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

مثال ها | دانلود

ScrollBox - پلاگین jQuery

Scrollbox یک پلاگین فشرده برای ایجاد یک نوار لغزنده - چرخ فلک یا خط در حال اجرا متن است. ویژگی های کلیدی عبارتند از افکت پیمایش عمودی و افقی با مکث در شناور ماوس.

مثال ها | دانلود

dbpasCarousel

یک نوار لغزنده چرخ و فلک ساده. اگر به یک پلاگین سریع نیاز دارید، این افزونه 100% مناسب است. تنها با ویژگی های اولیه مورد نیاز برای کارکردن نوار لغزنده همراه است.

مثال ها | دانلود

Flexisel: پلاگین لغزنده چرخ فلک پاسخگو JQuery

سازندگان Flexisel از پلاگین قدیمی jCarousel الهام گرفتند و یک کپی از آن ساختند که بر عملکرد صحیح نوار لغزنده در دستگاه های تلفن همراه و تبلت متمرکز شده است.

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

مثال ها | دانلود

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

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

مثال | دانلود

فلکس اسلایدر 2

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

مثال | دانلود

چرخ فلک شگفت انگیز

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

مثال ها | دانلود

/* این جایی است که چرخ فلک ما شروع می شود. چرخ فلک-wrapper نسبتاً موقعیت دارد، مورد-carousel مطلق است. . */ .carousel-wrapper( position:relative; /* کادرهایی که کاملاً در موقعیت قرار گرفته اند ارتفاع و عرض خود را از والد دریافت می کنند. ما آنها را به طور پیش فرض شفاف کردیم و سپس با کلیک بر روی .arrow-prev و.arrow-next محو می شوند. لینک بالشتک در سمت چپ و 50 پیکسل به سمت راست؟ به این ترتیب می‌توانیم پیوندهای خود را قرار دهیم! پهنای هر کدام 50 پیکسل خواهد بود. همچنین من از پیوندهای خالی استفاده می‌کنم. الگوی پس زمینهبه طوری که لینک ها شبیه فلش هستند. بررسی کنید که آیا تغییر کرده اید لینک URL هابا URL اصلی، بنابراین پیوندهای شما فقط مستطیل های شفاف نیستند. */ .arrow( position:absolute; top:0; display:block; عرض:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0)؛ پس زمینه:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* بیایید فلش چپ خود را برگردانیم. */ &.arrow-prev( left:0; ) /* و دومی به سمت راست از آنجایی که من از همان تصویر برای فلش استفاده می کنم، آن را 180 درجه می چرخانم */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * من واقعاً دوست دارم سرسره های چرخ فلک چگونه به نظر می رسند پس زمینه تیرهو اگر بلوک .carousel-item دارای کلاس "light" باشد، متن آن را به سفید تغییر می دهیم و به جای فلش های خاکستری از فلش های سفید استفاده می کنیم. دوباره بررسی کنید که آیا مسیر تصویر پیکان درست است */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* برای تغییر اندازه فلش ها در دستگاه هایی با اندازه صفحه کوچکتر، یک درخواست رسانه بنویسید.*/ @media(max-width:480px)(.arrow,&.light.arrow( background-size:10px; background-position:10px50 % ; ) ) ) /* اهداف پیوند را برای نمایش تنظیم کنید: هیچکدام. بنابراین، با هر کلیک بر روی فلش ها، از پرش مداوم مرورگر به بالای چرخ فلک خلاص می شویم. این ویژگی برای هر عنصری که شناسه آن با "target-item" شروع می شود اعمال می شود. */ ( display:none; ) /* در بالا، ما تمام اسلایدهای چرخ فلک خود را شفاف کردیم، به این معنی که وقتی چرخ فلک بارگیری می شود، به جای آن یک جعبه خالی بزرگ خواهیم داشت. بیایید مقدار شفافیت اسلاید اول را برای نمایش به 1 تغییر دهیم. همچنین z-index را روی 2 قرار می دهیم و آن را بالاتر از بقیه اسلایدها قرار می دهیم. */ .item-1( z-index:2; opacity:1; ) /* اما ما نمی خواهیم اسلاید اول همیشه کدورت داشته باشد: 1; در غیر این صورت، ما باید راه خود را از طریق این اسلاید طی کنیم، در حالی که بقیه در حال چرخش هستند. */ *:target~.item-1( opacity:0; ) /* .. اما اگر #target-item-1 در فوکوس است و می خواهیم اولین اسلاید را نشان دهیم، آن را با نماد ~ انتخاب کرده و مقدار opacity به 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* اگر سایر target-item-# در فوکوس هستند، آنها را با استفاده از انتخابگر ~ انتخاب کنید، آنها را محو کنید در، و آنها را با z-index در بالای صفحه قرار دهید: 3. در اینجا می توانید در صورت داشتن بیش از 3 دهانه، با شناسه مورد هدف اضافه کنید. می تواند 10 مورد را همزمان اضافه کند.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3(z-index:3; opacity:1; ) )

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

پس من پیشنهاد میکنم گزینه جایگزینیک چرخ فلک بسیار ساده جی کوئری.

می توان از آن به عنوان چرخ فلک تصویر، چرخ فلک خبری یا هر چرخ فلک محتوای دیگری استفاده کرد =)

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

به روز رسانی: 07/06/2014

چیزی شبیه به این خواهد بود:
DEMO دانلود

ساختار به شکل زیر خواهد بود:

بیایید سبک ها را شرح دهیم:

چرخ فلک ( حداکثر عرض: 1080 پیکسل؛ /* عرض کل بلوک */ حاشیه: 50 پیکسل خودکار؛ عرض: 100٪؛ ) محتوای خارج از منطقه اصلی */ موقعیت:نسبی؛ ) .carousel-item (عرض: 10000 پیکسل؛ / * پهنای بزرگتری را برای مجموعه آیتم تنظیم کنید */ موقعیت: نسبی؛ /* کادر را نسبت به ناحیه چرخ فلک اصلی قرار دهید */ ) .carousel -block ( شناور: سمت چپ؛ /* همه عناصر چرخ فلک را ردیف کنید */ عرض: 250px؛ /* پهنای هر عنصر را تنظیم کنید */ padding: 10px 10px 10px 0px؛ /* padding را طوری ایجاد کنید که عناصر ادغام نشوند */ .carousel -block img( display:block; ) /***** ********** BUTTONS ***********/ .دکمه-چرخ-چپ a، .دکمه-چرخ-راست a(عرض: 25 پیکسل؛ ارتفاع: 36 پیکسل؛ موقعیت: نسبی ؛ بالا: 80 پیکسل؛ مکان نما: نشانگر؛ متن-تزیین: هیچکدام؛ ) .دکمه-چرخ-چپ a( شناور: چپ؛ پس زمینه: url(../images/carousel- left.png); ) .دکمه- چرخ فلک- سمت راست a( شناور: درست؛ پس زمینه: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) ;)

و در نهایت، چگونه باید کار کند:

//با فلش سمت راست روی $(document) کلیک کنید.on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel بازگشت نادرست؛ ))؛ //کنترل پیکان سمت چپ روی $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel ) کلیک کنید. ؛ بازگشت نادرست؛ ))؛ تابع left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css(("سمت چپ":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-item" .animate((سمت چپ: "0px")، 200); ) تابع right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((سمت چپ: "-"+ block_width +"px"), 200, function()($(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() (//خط زیر را لغو نظر کنید برای فعال کردن چرخ فلک اسکرول خودکار auto_right(".carousel:first"); )) // خودکار تابع اسکرول پویا auto_right(carusel)( setInterval(function()( if (!$(carusel).is(.hover")) right_carusel(carusel); ), 3000) ) // نشانگر را روی چرخ فلک نشان داد $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // مکان نما را از چرخ فلک $(document).on("mouseleave", ".carousel", function()($(this).removeClass("show")))

بر این اساس، سایه را می توان حذف کرد. و برای استفاده از آن، فقط باید اندازه بلوک اصلی و بلوک‌های «پیمایش» تودرتو را در css جایگزین کنید. همچنین حلقه کردن این فرآیند بسیار آسان است تا به طور خودکار اسکرول شود (در این مورد، فقط فراخوانی تابع auto_right را لغو نظر کنید). یعنی از این گالری بی تکلف هر چیزی که نیاز دارید را می توانید در چارچوب کار درست کنید!

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

1. چرخ فلک جی کوئری "clickCarousel"

مسدود کردن با پیمایش اطلاعیه های خبری. فلش های چپ/راست برای حرکت در میان بلوک ها استفاده می شود. یک چرخ فلک در آرشیو به دو سبک روشن و تاریک وجود دارد.

1. jQuery carousel، افزونه carouFredSel

چرخ و فلک تصویر مرتب و تازه jQuery.

4. پلاگین jQuery: Elastislide Carousel

5. پلاگین "TinyCarousel"

اسلایدرهای محتوای عالی در قالب یک چرخ فلک تصویر با استفاده از jQuery. صفحه نمایشی نحوه اتصال این چرخ فلک را به سایت خود توضیح می دهد.

پلاگین "Slider Kit"، چرخ فلک سبک وزن با روش های مختلفطومار.

7. چرخ فلک جاوا اسکریپت

8. افزونه jQuery "Grid Navigation Effects"

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

9. چرخ فلک آسان

10. چرخ فلک بلوک صفحه بندی آسان

پلاگین جی کوئری "Easy Paginate". هر بلوک مستطیلی یک آیتم لیست لی معمولی است، و اگر بیش از سه مورد وجود داشته باشد، برای مشاهده همه آنها باید از یک پیمایش لغزنده مانند (با استفاده از فلش های جلو و عقب و استفاده از دکمه های پیمایش در پایین) استفاده کنید.

11. روتاتور عمودی "تیکر عمودی"

چرخش عمودی جی کوئری: پیمایش خودکار محتوا در صفحه. دکمه های ناوبری و همچنین امکان توقف چرخش و شروع مجدد آن ارائه شده است. وقتی نشانگر ماوس را حرکت می دهید، حرکت متوقف می شود. در سطح نشانه‌گذاری HTML، جعبه‌های قابل پیمایش با آیتم‌های لیست لی منظم نشان داده می‌شوند.

12. جاوا اسکریپت css منطقه قابل پیمایش

راه حل جاوا اسکریپت "TinyScroller" برای ایجاد یک منطقه قابل پیمایش در یک ظرف DIV.

13. jQuery Smooth Div Scroll Plugin

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

پیمایش بین اسلایدها با محتوا را می توان با استفاده از فلش ها یا با کلیک بر روی یک تصویر کوچک انجام داد. در زیر یک دکمه "نمایش" وجود دارد که به شما امکان می دهد تصاویر کوچک یا کوچک را پنهان یا نشان دهید توضیحات کاملاسلاید

15. چرخاننده محتوا "Circular Content Carousel"

17. پیشین

بلوکی با پیمایشی که وقتی ماوس را روی مکان‌نما می‌برید ظاهر می‌شود. می‌توانید با استفاده از نوار پیمایش و چرخ ماوس در محتوا پیمایش کنید.

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

19. اسلایدر عالی

نوار لغزنده به طور خودکار تولید می شود. اطلاعات با نام محصول، توضیحات، لینک و آدرس تصویر از فایل slider.db.txt گرفته شده است. فن آوری های مورد استفاده: CSS، PHP، jQuery.

20. چرخش را با استفاده از jQuery مسدود کنید

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

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

22. بلوک پویا "بررسی مشتریان"

چرخش خودکار محتوای بلوک فن آوری های مورد استفاده: PHP، XML، CSS، jQuery.

این افزونه موارد لیست (ul li) را به عناصر جی کوئریچرخ فلک ها

26. چرخ فلک جاوا اسکریپت "ImageFlow"

اسکرول کردن تصاویر با چرخ ماوس آسان است.

27. پیمایش محتوا

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

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

33. پیمایش محتوا، پلاگین Mootools "Scrollbar"

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