{"id":2355,"date":"2016-04-25T08:30:00","date_gmt":"2016-04-24T23:30:00","guid":{"rendered":"http:\/\/agn.jp\/blog\/?p=2355"},"modified":"2016-04-25T09:25:26","modified_gmt":"2016-04-25T00:25:26","slug":"slick-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%ae%e4%b8%ad%e5%a4%ae%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92","status":"publish","type":"post","link":"http:\/\/agn.jp\/blog\/?p=2355","title":{"rendered":"Slick.js\u3092\u4f7f\u3063\u3066\u30ab\u30eb\u30fc\u30bb\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u4e2d\u592e\u306e\u753b\u50cf\u3092\u5927\u304d\u304f\u3059\u308b\u3010\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30c7\u30b6\u30a4\u30f3\u3067\u3082OK\u3011"},"content":{"rendered":"

\u4ee5\u524d\u66f8\u3044\u305fslick<\/a>\u306e\u8a18\u4e8b\u304c\u6bd4\u8f03\u7684\u306b\u8aad\u3093\u3067\u3044\u305f\u3060\u3051\u3066\u3044\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u8abf\u5b50\u306b\u4e57\u3063\u3066\u3082\u3046\u4e00\u3064\u66f8\u304d\u307e\u3059\u3002<\/p>\n

\u524d\u56de\u8a18\u4e8b
\n\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30c7\u30b6\u30a4\u30f3\u306b\u5bfe\u5fdc\uff01Slick.js\u3092\u4f7f\u3063\u3066\u30b9\u30e9\u30a4\u30c9\u306e \u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u4f4d\u7f6e\u3092\u5207\u308a\u66ff\u3048\u308b<\/a><\/p>\n

\"160423blog\"<\/a><\/p>\n

 <\/p>\n

\u73fe\u5728(2016\u5e744\u6708)\u5f0a\u793e\u3067\u306f\u6c42\u4eba\u3092\u52df\u96c6\u3057\u3066\u3044\u307e\u3057\u3066\u3001\u6c42\u4eba\u30da\u30fc\u30b8<\/a>\u3092\u4f5c\u3063\u305f\u6642\u306b\u4f7f\u3063\u305f\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002
\n\u2192\u3000\u3053\u306e\u500b\u6240(INTERVIEW)\u3067\u3059<\/a><\/p>\n

\u4eca\u56de\u306f\u30ab\u30eb\u30fc\u30bb\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u3001\u771f\u3093\u4e2d\u306e\u5199\u771f\u3060\u3051\u3061\u3087\u3063\u3068\u62e1\u5927\u3055\u305b\u3066\u898b\u305b\u308b\u3084\u3064\u3067\u3059\u3002
\n\u30ab\u30eb\u30fc\u30bb\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u305f\u304f\u3055\u3093\u5199\u771f\u304c\u3042\u308b\u305e\u3063\u3066\u3044\u3046\u306e\u3092\u793a\u3057\u3066\u304a\u3044\u3066\u3001\u305d\u306e\u4e2d\u3067\u30a6\u30a7\u30a4\u30c8\u3092\u4ed8\u3051\u3066\u3042\u3052\u308b\u3053\u3068\u3067\u76ee\u3092\u5f15\u3044\u3066\u3082\u3089\u3046\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u306d\u3002
\n\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb<\/a>\u306e\u4e2d\u306e\u30bb\u30f3\u30bf\u30fc\u30e2\u30fc\u30c9\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308b\u3084\u3064\u4f55\u3067\u3059\u304c\u3001\u666e\u901a\u306b\u30bb\u30f3\u30bf\u30fc\u30e2\u30fc\u30c9\u306b\u3059\u308b\u3060\u3051\u3060\u3068\u3053\u3046\u306a\u3089\u306a\u3044\u3057\u3001\u7279\u306b\u516c\u5f0f\u3067\u306f\u62e1\u5927\u3055\u305b\u308b\u65b9\u6cd5\u304c\u7d39\u4ecb\u3055\u308c\u3066\u3044\u306a\u3044\u3093\u3067\u3059\u3088\u306d\u3002\u203b\u898b\u3064\u3051\u3089\u308c\u3066\u3044\u306a\u3044\u3060\u3051\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u2026<\/p>\n

\u3068\u3044\u3046\u3053\u3068\u3067\u6c42\u4eba\u30da\u30fc\u30b8<\/a>\u306e\u3084\u3064\u3092\u3082\u3046\u5c11\u3057\u30b7\u30f3\u30d7\u30eb\u306b\u3057\u305f\u30c7\u30e2<\/a>\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u3010DEMO\u3011<\/a><\/p>\n

HTML<\/h2>\n
<div class="slider container">\n    <div class="slider-for">\n        <div class="slide-item"><img src="images\/160423\/01.jpg" alt=""><\/div>\n        <div class="slide-item"><img src="images\/160423\/02.jpg" alt=""><\/div>\n        <div class="slide-item"><img src="images\/160423\/03.jpg" alt=""><\/div>\n        <div class="slide-item"><img src="images\/160423\/04.jpg" alt=""><\/div>\n        <div class="slide-item"><img src="images\/160423\/05.jpg" alt=""><\/div>\n    <\/div> \n<\/div><\/pre>\n
.container\u306fmax-width\uff1a 960px;\u3067\u753b\u9762\u306e\u30bb\u30f3\u30bf\u30fc\u306b\u5bc4\u305b\u3066\u3044\u308b\u3001\u500b\u4eba\u7684\u306b\u4f7f\u3063\u3066\u3044\u308b\u30af\u30e9\u30b9\u306a\u306e\u3067\u7121\u8996\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n\u3042\u3068\u306f\u6bd4\u8f03\u7684\u666e\u901a\u3067\u3059\u3002<\/p>\n
Javascript<\/h2>\n
$(window).load(function(){\n    $('.slider-for').slick({\n        slidesToShow: 3,\n        slidesToScroll: 1,\n        dots: true,\n        centerMode: true,\n        infinite: true,\n        autoplay: true,\n        centerPadding: '100px',\n        arrows: false,\n        responsive: [                    \n            {\n                breakpoint: 480,\n                settings: {\n                    arrows: false,\n                    centerMode: true,\n                    centerPadding: '0px',\n                    slidesToShow: 1\n                }\n            }\n        ]\n    });\n\n    \/\/ \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u7528\n    $('.slick-dots').find('li').eq(0).addClass('slick-current');\n    \/\/ On before slide change\n    $('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){     \n        $('.slick-dots').find('li').removeClass('slick-current');\n        $('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');\n    });\n});<\/pre>\n
Javascript\u3067\u5927\u4e8b\u306a\u3068\u3053\u308d\u306f\u3001<\/p>\n