آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با پلاگین ResponsiveSlides.js در Javascript

دوره های مرتبط با این مقاله

آموزش کار با پلاگین ResponsiveSlides.js در Javascript

ResponsiveSlides.js یک افزونه کوچک جی کوئری است که با استفاده از عناصر داخل یک عنصر ، یک اسلاید شو ایجاد میکند. ResponsiveSLides.js با طیف گسترده ای از مرورگرها از جمله نسخه های IE از IE6 و بالاتر کار می کند.


آموزش کار با ResponseSlider.JS در JavaScript

امکانات ResponsiveSlides.js در Javascript

  • کاملاً پاسخگو
  • با حجم 1 کیلوبایت
  • انتقال CSS3 با بازگشت برنامه جاوا اسکریپت
  • نشانه گذاری ساده با استفاده از ul
  • تنظیمات برای مدت زمان انتقال و گذشت زمان
  • نمایش اسلایدهای چندگانه پشتیبانی می شود
  • محو خودکار و دستی
  • در همه مرورگرهای مهم دسک تاپ و موبایل کار می کند
  • زیرنویس ها و سایر عناصر html در داخل اسلایدها پشتیبانی می شوند
  • صفحه بندی جداگانه و کنترل های بعدی / قبلی
  • امکان انتخاب مکان کنترل
  • امکان تصادفی کردن ترتیب اسلایدها
  • امکان استفاده از نشانه گذاری های سفارشی برای صفحه بندی
  • در حالی که در حال نمایش اسلایدها و / یا کنترل ها هستید ، می توانید مکث کنید
  • گزینه های برگشتی قبل و بعد از بازگشت

جهت استفاده از این افزونه نیاز است ابتدا فایلهای css,js این افزونه را همراه با جیکوئری در پروژه قرار داد.


< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >< /script >
< script src="responsiveslides.min.js" >< /script >

در قسمت HTML نیز لیست نامرتب استفاده میکنیم.

< ul class="rslides" >
  < li >< img src="1.jpg" alt="" >< /li >
  < li >< img src="2.jpg" alt="" >< /li >
  < li >< img src="3.jpg" alt="" >< /li >
< /ul >

جهت سبک دهی سفارشی به عناصر قطعه کد CSS زیر را به پروژه اضافه میکنیم.


.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

و در نهایت افزونه را درون یک اسکریپت روی عنصر مدنظر اعمال میکنیم.

< script >
  $ (function() {
    $ (".rslides").responsiveSlides();
  });
< /script >

جهت سفارشی کردن اسلاید شو میتوان از گزینهای این این افزونه اضافه کرد.

$ (".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

دو متد after و before ، بعد و قبل از حرکت هر اسلاید فراخوانی میشوند.
این افزونه را میتوانید ازلینک زیر دانلود کنید.


https://github.com/viljamis/ResponsiveSlides.js
  • 227
  •    304
  • تاریخ ارسال :   1398/09/21

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش کار با پلاگین ResponsiveSlides.js در Javascript
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .