\u70b9\u51fb\u4e0b\u8f7d<\/a><\/p>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
html \u7ed3\u6784<\/p>\n\n\n\n
<div class=\"big_img\">\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n<\/div>\n\n<div class=\"sml_img\">\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n <div class=\"item\">\n <img src=\"\">\n <\/div>\n<\/div>\n\n<\/code><\/pre>\n\n\n\njs\u4ee3\u7801<\/p>\n\n\n\n
$('.big_img').slick({\n\t\t\tslidesToShow: 1,\n\t\t\tslidesToScroll: 1,\n\t\t\tarrows: false,\n\t\t\tfade: true,\n\t\t\tpullDrag:false,\n\t\t\tfreeDrag:false,\n\t\t\ttouchDrag:false,\n\t\t\tmouseDrag: false,\n\t\t\tasNavFor: '.sml_img'\n\t\t});\n\t\t$('.sml_img').slick({\n\t\t\tslidesToShow: 4,\n\t\t\tslidesToScroll: 1,\n\t\t\tasNavFor: '.big_img',\n\t\t\tdots: false,\n\t\t\tcenterPadding: '0',\n\t\t\tcenterMode: true,\n\t\t\tresponsive: [\n\t\t\t\t{\n breakpoint: 1400,\n settings: {\n slidesToShow: 11,\n }\n },\n {\n breakpoint: 1200,\n settings: {\n slidesToShow: 9,\n }\n },\n {\n breakpoint: 992,\n settings: {\n slidesToShow: 7,\n }\n },\n {\n breakpoint: 768,\n settings: {\n slidesToShow: 5,\n }\n },\n {\n breakpoint: 300,\n settings: {\n slidesToShow: 5,\n }\n }\n\t\t\t],\n\t\t\tfocusOnSelect: true\n\t\t});<\/code><\/pre>\n\n\n\n\u53c2\u6570<\/p>\n\n\n\n
<\/colgroup>| accessibility<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u542f\u7528Tab\u952e\u548c\u7bad\u5934\u952e\u5bfc\u822a<\/td><\/tr> |
| autoplay<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u81ea\u52a8\u64ad\u653e<\/td><\/tr> |
| autoplaySpeed<\/td> | \u6574\u6570<\/td> | 3000<\/td> | \u81ea\u52a8\u64ad\u653e\u95f4\u9694<\/td><\/tr> |
| centerMode<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u4e2d\u5fc3\u6a21\u5f0f<\/td><\/tr> |
| centerPadding<\/td> | \u5b57\u7b26\u4e32<\/td> | \u201950px\u2019<\/td> | \u4e2d\u5fc3\u6a21\u5f0f\u5de6\u53f3\u5185\u8fb9\u8ddd<\/td><\/tr> |
| cssEase<\/td> | \u5b57\u7b26\u4e32<\/td> | \u2018ease\u2019<\/td> | CSS3 \u52a8\u753b<\/td><\/tr> |
| customPaging<\/td> | function<\/td> | n\/a<\/td> | \u81ea\u5b9a\u4e49\u5206\u9875<\/td><\/tr> |
| dots<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u6307\u793a\u70b9<\/td><\/tr> |
| draggable<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u542f\u7528\u684c\u9762\u62d6\u52a8<\/td><\/tr> |
| easing<\/td> | \u5b57\u7b26\u4e32<\/td> | \u2018linear\u2019<\/td> | animate() fallback easing<\/td><\/tr> |
| fade<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u6de1\u5165\u6de1\u51fa<\/td><\/tr> |
| arrows<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u5de6\u53f3\u7bad\u5934<\/td><\/tr> |
| infinite<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u5faa\u73af\u64ad\u653e<\/td><\/tr> |
| lazyLoad<\/td> | \u5b57\u7b26\u4e32<\/td> | \u2018ondemand\u2019<\/td> | \u5ef6\u8fdf\u52a0\u8f7d\uff0c\u53ef\u9009 ondemand \u548c progressive<\/td><\/tr> |
| onBeforeChange(this, index)<\/td> | method<\/td> | null<\/td> | \u5f00\u59cb\u5207\u6362\u524d\u7684\u56de\u8c03\u51fd\u6570<\/td><\/tr> |
| onAfterChange(this, index)<\/td> | method<\/td> | null<\/td> | \u5207\u6362\u540e\u7684\u56de\u8c03\u51fd\u6570<\/td><\/tr> |
| onInit(this)<\/td> | method<\/td> | null<\/td> | \u7b2c\u4e00\u6b21\u521d\u59cb\u5316\u540e\u7684\u56de\u8c03\u51fd\u6570<\/td><\/tr> |
| onReInit(this)<\/td> | method<\/td> | null<\/td> | \u518d\u6b21\u521d\u59cb\u5316\u540e\u7684\u56de\u8c03\u51fd\u6570<\/td><\/tr> |
| pauseOnHover<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u9f20\u6807\u60ac\u505c\u6682\u505c\u81ea\u52a8\u64ad\u653e<\/td><\/tr> |
| responsive<\/td> | object<\/td> | null<\/td> | \u65ad\u70b9\u89e6\u53d1\u8bbe\u7f6e<\/td><\/tr> |
| slide<\/td> | \u5b57\u7b26\u4e32<\/td> | \u2018div\u2019<\/td> | \u6ed1\u52a8\u5143\u7d20\u67e5\u8be2<\/td><\/tr> |
| slidesToShow<\/td> | \u6574\u6570<\/td> | 1<\/td> | \u5e7b\u706f\u7247\u6bcf\u5c4f\u663e\u793a\u4e2a\u6570<\/td><\/tr> |
| slidesToScroll<\/td> | \u6574\u6570<\/td> | 1<\/td> | \u5e7b\u706f\u7247\u6bcf\u6b21\u6ed1\u52a8\u4e2a\u6570<\/td><\/tr> |
| speed<\/td> | \u6574\u6570<\/td> | 300<\/td> | \u6ed1\u52a8\u65f6\u95f4<\/td><\/tr> |
| swipe<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u79fb\u52a8\u8bbe\u5907\u6ed1\u52a8\u4e8b\u4ef6<\/td><\/tr> |
| touchMove<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u89e6\u6478\u6ed1\u52a8<\/td><\/tr> |
| touchThreshold<\/td> | \u6574\u6570<\/td> | 5<\/td> | \u6ed1\u52a8\u5207\u6362\u9608\u503c\uff0c\u5373\u6ed1\u52a8\u591a\u5c11\u50cf\u7d20\u540e\u5207\u6362<\/td><\/tr> |
| useCSS<\/td> | \u5e03\u5c14\u503c<\/td> | true<\/td> | \u4f7f\u7528 CSS3 \u8fc7\u5ea6<\/td><\/tr>\n\t |
| vertical<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u5782\u76f4\u65b9\u5411<\/td><\/tr>\n\t |
| verticalSwiping<\/td> | \u5e03\u5c14\u503c<\/td> | false<\/td> | \u662f\u5426\u5f00\u542f\u5782\u76f4\u6ed1\u52a8\u5207\u6362<\/td><\/tr>\n<\/tbody><\/table>\n\n\n\n \u65b9\u6cd5<\/p>\n\n\n\n <\/colgroup>| slick()<\/td> | options : object<\/td> | \u521d\u59cb\u5316 slick<\/td><\/tr> | | unslick()<\/td> |
<\/td> | \u9500\u6bc1 slick<\/td><\/tr> | | slickNext()<\/td> |
<\/td> | \u5207\u6362\u4e0b\u4e00\u5f20<\/td><\/tr> | | slickPrev()<\/td> |
<\/td> | \u5207\u6362\u4e0a\u4e00\u5f20<\/td><\/tr> | | slickPause()<\/td> |
<\/td> | \u6682\u505c\u81ea\u52a8\u64ad\u653e<\/td><\/tr> | | slickPlay()<\/td> |
<\/td> | \u5f00\u59cb\u81ea\u52a8\u64ad\u653e<\/td><\/tr> | | slickGoTo()<\/td> | index : int<\/td> | \u5207\u6362\u5230\u7b2c x \u5f20<\/td><\/tr> | | slickCurrentSlide()<\/td> |
<\/td> | \u8fd4\u56de\u5f53\u524d\u5e7b\u706f\u7247\u7d22\u5f15<\/td><\/tr> | | slickAdd()<\/td> | element : html or DOM object, index: int, addBefore: bool<\/td> | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String<\/td><\/tr> | | slideRemove()<\/td> | index: int, removeBefore: bool<\/td> | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.<\/td><\/tr> | | slickFilter()<\/td> | filter : selector or function<\/td> | Filters slides using jQuery .filter syntax<\/td><\/tr> | | slickUnfilter()<\/td> |
<\/td> | Removes applied filter<\/td><\/tr> | | slickSetOption(option,value,refresh)<\/td> | option : string(option name), value : depends on option, refresh : \u5e03\u5c14\u503c<\/td> | Sets an option live. Set refresh to true if it is an option that changes the display<\/td><\/tr><\/tbody><\/table>\n\n\n\n \u56de\u8c03<\/p>\n\n\n\n \n\n\/\/ On swipe event\n$('.your-element').on('swipe', function(event, slick, direction){\n console.log(direction);\n \/\/ left\n});\n\/\/ On edge hit\n$('.your-element').on('edge', function(event, slick, direction){\n console.log('edge was hit')\n});\n\/\/ On before slide change\n$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){\n console.log(nextSlide);\n});\n\n\n\u65b9\u6cd5\n\u901a\u8fc71.4\u7248\u4e2d\u7684slick\u65b9\u6cd5\u672c\u8eab\u5728slick\u5b9e\u4f8b\u4e0a\u8c03\u7528\u65b9\u6cd5\uff0c\u8bf7\u53c2\u89c1\u4e0b\u6587\uff1a\n\n\/\/ Add a slide\n$('.your-element').slick('slickAdd',\"<div><\/div>\");\n\/\/ Get the current slide\nvar currentSlide = $('.your-element').slick('slickCurrentSlide');\n\u8fd9\u79cd\u65b0\u7684\u8bed\u6cd5\u8fd8\u5141\u8bb8\u60a8\u8c03\u7528\u4efb\u4f55\u5185\u90e8\u7684slick\u65b9\u6cd5\uff1a\n\n\/\/ Manually refresh positioning of slick\n$('.your-element').slick('setPosition');\n\u9500\u6bc1\u7ed3\u6784\n$(\".ind_box1_r_scroll\").slick('unslick');<\/code><\/pre>\n\n\n\n| Event<\/th> | Params<\/th> | Description<\/th><\/tr><\/thead> |
|---|
| afterChange<\/td> | event, slick, currentSlide<\/td> | After slide change callback<\/td><\/tr> | | beforeChange<\/td> | event, slick, currentSlide, nextSlide<\/td> | Before slide change callback<\/td><\/tr> | | breakpoint<\/td> | event, slick, breakpoint<\/td> | Fires after a breakpoint is hit<\/td><\/tr> | | destroy<\/td> | event, slick<\/td> | When slider is destroyed, or unslicked.<\/td><\/tr> | | edge<\/td> | event, slick, direction<\/td> | Fires when an edge is overscrolled in non-infinite mode.<\/td><\/tr> | | init<\/td> | event, slick<\/td> | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.<\/td><\/tr> | | reInit<\/td> | event, slick<\/td> | Every time Slick (re-)initializes callback<\/td><\/tr> | | setPosition<\/td> | event, slick<\/td> | Every time Slick recalculates position<\/td><\/tr> | | swipe<\/td> | event, slick, direction<\/td> | Fires after swipe\/drag<\/td><\/tr> | | lazyLoaded<\/td> | event, slick, image, imageSource<\/td> | Fires after image loads lazily<\/td><\/tr> | | lazyLoadError<\/td> | event, slick, image, imageSource<\/td> | Fires after image fails to load<\/td><\/tr><\/tbody><\/table>\n |
| |