{"id":41893,"date":"2023-11-24T16:00:49","date_gmt":"2023-11-24T07:00:49","guid":{"rendered":"https:\/\/vitalify.jp\/blog\/?p=41893"},"modified":"2023-11-24T21:39:21","modified_gmt":"2023-11-24T12:39:21","slug":"splide","status":"publish","type":"post","link":"https:\/\/vitalify.jp\/blog\/2023\/11\/splide.html","title":{"rendered":"\u6700\u8fd1\u8a71\u984c\u306b\u306a\u3063\u3066\u3044\u305f\u30b9\u30e9\u30a4\u30c0\u30fc\u30e9\u30a4\u30d6\u30e9\u30ea\u300cSplide\u300d\u3092\u89e6\u3063\u3066\u307f\u305f"},"content":{"rendered":"

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

<\/p>\n

\u3053\u3093\u306b\u3061\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u539f\u7530\u3067\u3059\u3002<\/p>\n

\u6700\u8fd1\u8a71\u984c\u306b\u306a\u3063\u3066\u3044\u305f\u30b9\u30e9\u30a4\u30c0\u30fc\u30e9\u30a4\u30d6\u30e9\u30ea\u300cSplide<\/a>\u300d\u3092\u89e6\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

Splide<\/a>\u3068\u306f<\/h2>\n

\u30fbSplide\u306f\u753b\u50cf\u306a\u3069\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u30e9\u30a4\u30d6\u30e9\u30ea\u306e1\u3064<\/p>\n

\u30fb\u307b\u304b\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u4f9d\u5b58\u3057\u306a\u3044\uff08\u975ejQuery\uff09<\/p>\n

\u30fb\u958b\u767a\u8005\u304c\u65e5\u672c\u4eba<\/p>\n

\u521d\u671f\u8a2d\u5b9a\uff08\u307e\u305a\u306f\u52d5\u304b\u3057\u3066\u307f\u308b\uff09<\/h2>\n

\u30fbHTML\u306e\u8a18\u8ff0<\/p>\n

\u2460Splide\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u8aad\u307f\u8fbc\u307f<\/p>\n

CDN<\/a>\u304b\u3089\u4f7f\u7528\u3067\u304d\u307e\u3059<\/p>\n

<!-- Splide -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@splidejs\/splide@4.1.4\/dist\/js\/splide.min.js\"><\/script><\/pre>\n
\u2461CSS\u8aad\u307f\u8fbc\u307f<\/p>\n
<!-- Splide\u306eCSS\u8aad\u307f\u8fbc\u3080 -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@splidejs\/splide@4.1.4\/dist\/css\/splide.min.css\" \/><\/pre>\n
\u2462HTML\u306e\u96db\u5f62<\/p>\n
<section class=\"splide\" aria-label=\"Splide\u306e\u57fa\u672c\u7684\u306aHTML\">\r\n  <div class=\"splide__track\">\r\n    <div class=\"splide__list\">\r\n      <div class=\"splide__slide\">\r\n        <img src=\"img\/spring.png\" alt=\"\" \/>\r\n      <\/div>\r\n      <div class=\"splide__slide\">\r\n        <img src=\"img\/summer.png\" alt=\"\" \/>\r\n      <\/div>\r\n      <div class=\"splide__slide\">\r\n        <img src=\"img\/fall.png\" alt=\"\" \/>\r\n      <\/div>\r\n      <div class=\"splide__slide\">\r\n        <img src=\".\/img\/winter.png\" alt=\"\" \/>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section><\/pre>\n
\u2460\u301c\u2462\u307e\u3067\u3092\u307e\u3068\u3081\u305fHTML\u5168\u4f53\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>Document<\/title>\r\n    <!-- Splide\u306eCSS\u8aad\u307f\u8fbc\u3080 -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@splidejs\/splide@4.1.4\/dist\/css\/splide.min.css\" \/>\r\n<link rel=\"stylesheet\" href=\"css\/style.css\" \/>  \r\n<\/head>\r\n  <body>\r\n    <section class=\"splide\" aria-label=\"Splide\u306e\u57fa\u672c\u7684\u306aHTML\">\r\n      <div class=\"splide__track\">\r\n        <div class=\"splide__list\">\r\n          <div class=\"splide__slide\">\r\n            <img src=\"img\/spring.png\" alt=\"\" \/>\r\n          <\/div>\r\n          <div class=\"splide__slide\">\r\n            <img src=\"img\/summer.png\" alt=\"\" \/>\r\n          <\/div>\r\n          <div class=\"splide__slide\">\r\n            <img src=\"img\/fall.png\" alt=\"\" \/>\r\n          <\/div>\r\n          <div class=\"splide__slide\">\r\n            <img src=\".\/img\/winter.png\" alt=\"\" \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Splide\u3000\u8aad\u307f\u8fbc\u3080 -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@splidejs\/splide@4.1.4\/dist\/js\/splide.min.js\"><\/script>\r\n    <script src=\".\/js\/main.js\"><\/script>\r\n  <\/body\r\n<\/html>\r\n\r\n<\/pre>\n
\u30fbCSS\u306e\u8a2d\u5b9a<\/p>\n
\u6b21\u306b\u898b\u305f\u76ee\u306e\u90e8\u5206\u3092\u6574\u3048\u307e\u3059\u3002\uff08\u3053\u3053\u306f\u304a\u597d\u307f\u3067\uff09<\/p>\n
.splide{\r\n  max-width: 500px;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.splide__slide img {\r\n  height: 500px;\r\n  width: auto;\r\n}\r\n.splide__slide  {\r\ntext-align: center;\r\n}\r\n\r\n<\/pre>\n
\u30fbJavascript\u306e\u8a2d\u5b9a<\/p>\n
\u305d\u3057\u3066Javascript\u30d5\u30a1\u30a4\u30eb\u3067Splide\u306e\u521d\u671f\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u3002<\/p>\n
\/\/\u521d\u671f\u8a2d\u5b9a\r\nnew Splide(\".splide\").mount();\r\n\r\n<\/pre>\n
\u3053\u308c\u3060\u3051\u306e\u8a18\u8ff0\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u3067\u304d\u307e\u3057\u305f\uff01\uff08\u4e0b\u8a18\u306f\u753b\u50cf\u3067\u3059\uff09<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\u6b21\u306b\u5b9f\u88c5\u3067\u4f7f\u3044\u305d\u3046\u306a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u30eb\u30fc\u30d7\u3042\u308a<\/h2>\n
\u521d\u671f\u8a2d\u5b9a\u3060\u3068\u6700\u5f8c\u306e\u30b9\u30e9\u30a4\u30c9\u306b\u306a\u3063\u305f\u3089\u6b62\u307e\u308b\u306e\u3067\u3001\u30b9\u30e9\u30a4\u30c9\u3057\u7d9a\u3051\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u5834\u5408\u306f’loop’\u306e\u8a2d\u5b9a\u3092\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
new Splide(\".splide\", {\r\n  type: \"loop\",\r\n}).mount();\r\n\r\n<\/pre>\n
 <\/p>\n
\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb<\/h2>\n
\u81ea\u52d5\u30b9\u30e9\u30a4\u30c9\u306e\u8a2d\u5b9a\u3082\u3067\u304d\u307e\u3059\uff01<\/p>\n
\u305f\u3060\u3057\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb\u306f\u300c\u62e1\u5f35\u6a5f\u80fd\u300d\u306e\u8ffd\u52a0\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n
\u5177\u4f53\u7684\u306b\u306f<\/p>\n
\u30fbHTML\u306b\u8ffd\u52a0\u306e\u8a18\u8ff0<\/p>\n
\u30fbJavascript\u306emount(window.splide.Extensions)\u306e\u8a18\u8ff0<\/p>\n
\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u306f\u4ed6\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u9055\u3044\u5c11\u3057\u624b\u9593\u3067\u3059\u306d….<\/p>\n
 <\/p>\n
\u30fbHTML\u306e\u8ffd\u52a0<\/p>\n
<!-- Splide\u3000\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb\u8ffd\u52a0 -->\r\n   <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@splidejs\/splide-extension-auto-scroll@0.5.3\/dist\/js\/splide-extension-auto-scroll.min.js\"><\/script>\r\n\r\n<\/pre>\n
\u30fbJavascript\u306e\u7de8\u96c6<\/p>\n
\/\/\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb\r\nnew Splide(\".splide\", {\r\n  type: \"loop\",\r\n  drag: \"free\",\r\n  autoScroll: {\r\n    speed: 1,\r\n  },\r\n}).mount(window.splide.Extensions);\r\n\r\n<\/pre>\n
 <\/p>\n
\u753b\u9762\u5e45\u306b\u5fdc\u3058\u3066\u30b9\u30e9\u30a4\u30c9\u753b\u50cf\u679a\u6570\u3092\u5909\u3048\u308b<\/h2>\n
\u305f\u3060\u3057\u6700\u5927\u304b\u3089\u6700\u5c0f\u306e\u9806\u5e8f\u3067\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
new Splide(\".splide\", {\r\n  perPage: 4,\r\n  breakpoints: {\r\n    640: {\r\n      perPage: 2,\r\n    },\r\n  }\r\n}).mount();\r\n\r\n<\/pre>\n
\"\"<\/a>\"\"<\/a><\/p>\n
 <\/p>\n
\u611f\u60f3<\/h2>\n
\u30fb\u65e5\u672c\u4eba\u304c\u958b\u767a\u8005\u3068\u3044\u3046\u3053\u3068\u3082\u3042\u308a\u3001\u3068\u306b\u304b\u304f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u8aad\u307f\u3084\u3059\u3044\u3002<\/p>\n
\u30fb\u516c\u5f0f\u30da\u30fc\u30b8\u306b\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3082\u3042\u308a\u53c2\u8003\u306b\u306a\u308b\u3002<\/p>\n
\u30fb\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u4f7f\u3046\u306b\u306f\u8ffd\u52a0\u306e\u8a18\u8ff0\u304c\u5fc5\u8981\u306a\u306e\u304c\u5c11\u3057\u624b\u9593\u3002<\/p>\n
\u30fb\u4ed6\u306e\u30b5\u30a4\u30c8\u3067\u306e\u8a18\u4e8b\u304c\u5c11\u306a\u3044\u3002<\/p>\n
\u30fb\u4ed6\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\uff08slick,Swiper\uff09\u3068\u30b3\u30fc\u30c9\u304c\u4f3c\u3066\u3066\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u3002<\/p>\n
\u4eca\u5f8c\u4f7f\u3046\u6a5f\u4f1a\u304c\u5897\u3048\u3066\u3044\u304f\u304b\u3082\u3057\u308c\u306a\u3044\u3067\u3059\u306d\uff01<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\n            
<\/div><\/fb:like><\/div>\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>