5 اسلایدر برای مقایسه تصاویر

افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
هاست ایمیل
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
پرینتر استوک
خرید پرینتر استوک و دست دوم با بهترین قیمت
خرید پرینتر استوک و دست دوم با بهترین قیمت
دوره آموزش رویت در مشهد
با یادگیری رویت در آکادمی هنرجویان شهریار به یک طراح معماری در مشهد تبدیل شوید.
با یادگیری رویت در آکادمی هنرجویان شهریار به یک طراح معماری در مشهد تبدیل شوید.
خرید ورق گالوانیزه رنگی
خرید ورق گالوانیزه با بهترین قیمت و کیفیت
خرید ورق گالوانیزه با بهترین قیمت و کیفیت
خرید فوری تتر
خرید و فروش تتر بدون احراز هویت
خرید و فروش تتر بدون احراز هویت
خرید آی پی ثابت
ارزان ترین و معتبرترین سایت خرید آی پی ثابت
خودتان را اینجا معرفی کنید
ارزان ترین و معتبرترین سایت خرید آی پی ثابت
مشاهده میکنید که همین ترفند ساده تاثیر بسیار زیادی روی بهبود تجربهٔ کاربری گذاشته است.
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();
});
نظرات و سوالات کاربران