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

5 اسلایدر برای مقایسه تصاویر
اگر به صورت حرفه ایی مشغول طراحی وبسایت هستید احتمالا برایتان پیش آمده تا در بعضی بخش ها احتیاج به مقایسه تصاویر با یکدیگر داشته باشید ، عکس‌هایی‌ که قبل و بعد از یک کالا یا عکس خاص را به کاربرانتان نشان دهد. در این مطلب قصد داریم به شما چند کتابخانه جاوا اسکریپت معرفی‌ کنیم که توسط آنها به راحتی‌ میتوانید از اسلایدرهای مقایسه ایی در جهت مقایسه تصاویر در وبسایت های خودتان استفاده کنید.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 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  کار میکنید با آن مشکلی نخواهید داشت. wink
 

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 بیندازید و ساختار نوشتن کدهای جی کوئری را بررسی کنید .
 

فارغ‌التحصیل رشتهٔ فیزیک و علاقمند به دنیای وب، چند سالی‌ هست که وارد این حرفه شدم و هرروز در حال یادگیری مطلبی جدید!

نظرات و سوالات کاربران

ارسال پاسخ hassani
hassani
یکشنبه ۰۴ بهمن ۱۳۹۴ ۱۲:۳۹
تشکر بابت معرفی این ابزار