5 اسلایدر برای مقایسه تصاویر
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
مشاهده میکنید که همین ترفند ساده تاثیر بسیار زیادی روی بهبود تجربهٔ کاربری گذاشته است.
1-Twentytwenty
Twentytwenty یک ابزار ساده ی تصویریست که از JQuery و jquery.event.move استفاده میکند، نحوه ی استفاده از آن هم ساده است. کافیست 2 تصویر را در یک container قرار دهید و تابع ;()twentytwentyرا فراخوانی کنید.
<div id="container">
<img src="img-before.png">
<img src="img-after.png">
</div>
فراخوانی تابع:
$("#container").twentytwenty();
لازم به یاد آوریست که این پلاگین ریسپانسیو است و اگر با فریم ورک هایی نظیر foundation کار میکنید با آن مشکلی نخواهید داشت. 
2- Juxtapose
این پلاگین علاوه بر عکس های معمولی فرمت gif را هم پشتیبانی میکند و قابلیت اضافه کردن تاریخ و لیبل را هم به شما می دهد ، همچنین می توانید به صورت عمودی یا افقی نیز از این اسلایدر استفاده کنید.3-imgSlider
imgslider پلاگین کاربردی بعدیست که بعد از وارد کردن js و Css مورد نظر تنها کافیست عکس ها را در 2 <div> متفاوت قرار دهید، کلاس left برای عکس before و کلاس right برای عکس after استفاده می شود.
<div class="slider responsive">
<div class="left image">
<img src="before.jpg"/>
</div>
<div class="right image">
<img src="after.jpg"/>
</div>
</div>
فراخوانی :
$('.slider').slider();
4-Cocoen
مزیت اسلایدر cocoen نسبت به سایر اسلایدر ها را شاید بتوان استفاده از jQuery-Touch Event دانست، شیوه استفاده مشابه اسلایدر های قبلییست تنها با این تفاوت که باید این جی کوئری جدید را هم وارد صفحه html خود کنید.
<div class="cocoen">
<img src="img/before.jpg" alt="">
<img src="img/after.jpg" alt="">
</div>
فراخوانی :
$(document).ready(function(){
$('.cocoen').cocoen();
});
5-Image Comparison Slider
اگر تمایل دارید بدانید در پشت پرده ماجرا چه می گذرد کافیست نگاهی به cody house بیندازید و ساختار نوشتن کدهای جی کوئری را بررسی کنید .
آناهیتا معروفی
فارغ‌التحصیل رشتهٔ فیزیک و علاقمند به دنیای وب، چند سالی هست که وارد این حرفه شدم و هرروز در حال یادگیری مطلبی جدید!
نظرات و سوالات کاربران