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

5 اسلایدر برای مقایسه تصاویر
اگر به صورت حرفه ایی مشغول طراحی وبسایت هستید احتمالا برایتان پیش آمده تا در بعضی بخش ها احتیاج به مقایسه تصاویر با یکدیگر داشته باشید ، عکس‌هایی‌ که قبل و بعد از یک کالا یا عکس خاص را به کاربرانتان نشان دهد. در این مطلب قصد داریم به شما چند کتابخانه جاوا اسکریپت معرفی‌ کنیم که توسط آنها به راحتی‌ میتوانید از اسلایدرهای مقایسه ایی در جهت مقایسه تصاویر در وبسایت های خودتان استفاده کنید.
دوره های آموزشی روز دنیا
دیگر نیازی به دانلود نیست، آنلاین ببینید ...
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
دانلود بازی اندروید
اندروید سیتی | بررسی و دانلود آخرین های اندروید
خودتان را اینجا معرفی کنید

مشاهده می‌کنید که همین ترفند ساده تاثیر بسیار زیادی روی بهبود تجربهٔ کاربری گذاشته است.

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
یکشنبه ۰۴ بهمن ۱۳۹۴ ۱۲:۳۹
تشکر بابت معرفی این ابزار