阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.lightSlider 中文API文档

      插件 jQuery.lightSlider 中文API文档 https://github.com/sachinchoolur/lightslider license travis bower npm

      jQuery lightSlider

      Demo

      JQuery lightSlider demo

      Description

      JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation

      Main Features

      • Fully responsive - will adapt to any device.
      • Separate settings per breakpoint.
      • Gallery mode to create an image slideshow with thumbnails
      • Supports swipe and mouseDrag
      • Add or remove slides dynamically.
      • Small file size, fully themed, simple to implement.
      • CSS transitions with jQuery fallback.
      • Full callback API and public methods.
      • Auto play and infinite loop to create a content carousel.
      • Keyboard, arrows and dots navigation.
      • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
      • Slide and Fade Effects.
      • Auto width, Vertical Slide, Adaptiveheight, Rtl support…
      • Multiple instances on one page.
      • Slide anything (youtube, vimeo , google map …)

      How to use lightSlider?

      Bower

      You can Install lightslider using the Bower package manager.

      $ bower install lightslider
      

      npm

      You can also find lightslider on npm.

      $ npm install lightslider
      

      The code

      add the Following code to the <head> of your document.

      <link type="text/css" rel="stylesheet" href="css/lightslider.css" />
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="js/lightslider.js"></script>
          // Do not include both lightslider.js and lightslider.min.js
      

      HTML Structure

      <ul id="light-slider">
          <li>
              <h3>First Slide</h3>
              <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
          </li>
          <li>
              <h3>Second Slide</h3>
              <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
          </li>
          ...
      </ul>
      

      Call lightSlider!

      <script type="text/javascript">
          $(document).ready(function() {
              $("#light-slider").lightSlider();
          });
      </script>
      

      Play with settings

      <script type="text/javascript">
          $(document).ready(function() {
              $("#light-slider").lightSlider({
                  item: 3,
                  autoWidth: false,
                  slideMove: 1, // slidemove will be 1 if loop is true
                  slideMargin: 10,
      
                  addClass: '',
                  mode: "slide",
                  useCSS: true,
                  cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
                  easing: 'linear', //'for jquery animation',////
      
                  speed: 400, //ms'
                  auto: false,
                  pauseOnHover: false,
                  loop: false,
                  slideEndAnimation: true,
                  pause: 2000,
      
                  keyPress: false,
                  controls: true,
                  prevHtml: '',
                  nextHtml: '',
      
                  rtl:false,
                  adaptiveHeight:false,
      
                  vertical:false,
                  verticalHeight:500,
                  vThumbWidth:100,
      
                  thumbItem:10,
                  pager: true,
                  gallery: false,
                  galleryMargin: 5,
                  thumbMargin: 5,
                  currentPagerPosition: 'middle',
      
                  enableTouch:true,
                  enableDrag:true,
                  freeMove:true,
                  swipeThreshold: 40,
      
                  responsive : [],
      
                  onBeforeStart: function (el) {},
                  onSliderLoad: function (el) {},
                  onBeforeSlide: function (el) {},
                  onAfterSlide: function (el) {},
                  onBeforeNextSlide: function (el) {},
                  onBeforePrevSlide: function (el) {}
              });
          });
      </script>
      

      Public methods

      <script type="text/javascript">
          $(document).ready(function() {
              var slider = $("#light-slider").lightSlider();
              slider.goToSlide(3);
              slider.goToPrevSlide();
              slider.goToNextSlide();
              slider.getCurrentSlideCount();
              slider.refresh();
              slider.play();
              slider.pause();
              slider.destroy();
          });
      </script>
      

      Report an Issue

      If you think you might have found a bug or if you have a feature suggestion please use github issue tracker. Also please try to add a jsfiddle that demonstrates your problem

      If you need any help with implementing lightslider in your project or if have you any personal support requests i requset you to please use stackoverflow instead of github issue tracker

      If you like lightSlider support me by staring this repository or tweet about this project. @sachinchoolur

      guidelines for contributors

      MIT © Sachin

      目录
      目录