{"id":104,"date":"2020-01-22T15:58:24","date_gmt":"2020-01-22T06:58:24","guid":{"rendered":"https:\/\/storefront.oksdev.tk\/qna\/?p=104"},"modified":"2020-05-11T21:47:47","modified_gmt":"2020-05-11T12:47:47","slug":"%eb%a1%a4%eb%a7%81-%eb%b2%a0%eb%84%88-%ec%b6%94%ea%b0%80-%eb%b0%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/storefront.oksdev.tk\/qna\/jquery\/%eb%a1%a4%eb%a7%81-%eb%b2%a0%eb%84%88-%ec%b6%94%ea%b0%80-%eb%b0%a9%eb%b2%95\/","title":{"rendered":"\ub864\ub9c1 \ubca0\ub108 \ucd94\uac00 \ubc29\ubc95"},"content":{"rendered":"

\ud0d1 \ubc14 \uc601\uc5ed\uc5d0 \ub864\ub9c1\uc774 \ub418\ub294 \ubca0\ub108\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc740 \ubb34\uc5c7\uc77c\uae4c\uc694?<\/p><\/blockquote>\n

 <\/p>\n

\n

[ \ubc29\ubc95 ]<\/p>\n

\uc138\ub85c \uc2a4\ud06c\ub864\uc774 \uac00\ub2a5\ud55c jQuery plugin -> Slick Slider<\/a> \ub97c \uc774\uc6a9 \ubca0\ub108 \ucee8\ud150\uce20\ub97c \uc2a4\ud06c\ub864 \ub418\ub3c4\ub85d \ud558\uae30.<\/p>\n

(\u203b Slick Slider\ub294 \uc5ec\ub7ec \ud14c\ub9c8\uc5d0\uc11c \uce90\ub7ec\uc824\uc774\ub098 \uc2ac\ub77c\uc774\ub4dc \ub418\ub294 \uad6c\uc870\uc5d0 \uc0ac\uc6a9\ud558\uace0 \uc788\uc74c)<\/p>\n

 <\/p>\n

[ \uacfc\uc815 ]<\/p>\n

1. \ub864\ub9c1\uc774 \ub418\ub294 html \uc5d8\ub9ac\uba3c\ud2b8\ub4e4 \ucd94\uac00<\/p>\n

<div class=\"slick-roll\">\r\n    <div>your content 1<\/div>\r\n    <div>your content 2<\/div>\r\n    <div>your content 3<\/div>\r\n<\/div><\/pre>\n
 <\/p>\n
2. html \uad6c\uc870\ub97c slider \uae30\ub2a5\uc774 \ucd94\uac00\ub41c \uad6c\uc870\ub85c \ubcc0\uacbd (slick slider\uac00 \uc791\ub3d9)<\/p>\n
(\u203b \ud604 \ud14c\ub9c8\uc5d0\ub294 \ud50c\ub7ec\uadf8\uc778\uc774 \ub0b4\uc7a5\ub3fc\uc788\uc9c0 \uc54a\uc544\uc11c, \ud50c\ub7ec\uadf8\uc778\uc744 \ud14c\ub9c8\uc5d0 \ucd94\uac00\ud558\uc5ec \uc801\uc6a9)<\/p>\n
\/**\r\n * Slick Slider plugin js, css \ud30c\uc77c \uc5f0\uacb0 \r\n *\/\r\nadd_action('wp_enqueue_scripts', 'slick_slider_enqueue'); \r\nfunction slick_slider_enqueue() {    \r\n    \/\/ \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0 \ud30c\uc77c \uc704\uce58 \ub9d0\ud574\uc8fc\uae30\r\n    wp_register_style( 'slick_css', get_stylesheet_directory_uri() . '\/_custom_addons\/slickslider\/slick.css', array(), '1.8.1');  \r\n  wp_register_style( 'slick_theme_css', get_stylesheet_directory_uri() . '\/_custom_addons\/slickslider\/slick-theme.css', array(), '1.8.1');  \r\n    wp_register_script( 'slick_script', get_stylesheet_directory_uri() . '\/_custom_addons\/slickslider\/slick.min.js', array('jquery'), '1.8.1', true);  \/\/ true = \ud478\ud130\uc5d0\uc11c \uc801\uc6a9\r\n    \/\/ \uc2e4\uc81c \uc0ac\uc6a9 \uc5ec\ubd80 \uacb0\uc815   \r\n    if (is_single(104)) {\r\n    wp_enqueue_style( 'slick_css' );    \r\n    wp_enqueue_style( 'slick_theme_css' ); \r\n    wp_enqueue_script( 'slick_script' );\r\n  }\r\n}\r\n\r\n\/**\r\n * Add scripts to wp_footer()\r\n *\/\r\nfunction custom_slickslider_script() {  \r\n    if (is_single(104)) {      ?>   \r\n        <script type=\"text\/javascript\">        \r\n            (function($) {             \t\t\t\t\r\n        $(document).ready(function(){\r\n          $('.slick-roll').slick({\r\n          vertical: true,\r\n          slidesToShow: 1,\r\n          slidesToScroll: 1,\r\n          autoplay: true,\r\n          arrows: false, \r\n          swipe:false,\r\n          pauseOnHover:false,\r\n          });\r\n        });\t\t\t\t\r\n            })( jQuery );                 \r\n        <\/script>\r\n<?php        \r\n    }    \r\n}\r\nadd_action( 'wp_footer', 'custom_slickslider_script', 99 );\r\n\r\n\r\n\/**\r\n * Add style to wp_head()\r\n *\/\r\nadd_action( 'wp_head', function () { \r\n  if (is_single(104)) {      ?>   \r\n    <style>\r\n      .slick-vertical .slick-slide { text-align:center; padding:10px; }\r\n      .slick-vertical .slick-slide:nth-child(3n) { background: red; }\t\r\n      .slick-vertical .slick-slide:nth-child(3n+1) { background: yellow; }\r\n      .slick-vertical .slick-slide:nth-child(3n+2) { background: blue; }\r\n    <\/style>\r\n<?php } } );<\/pre>\n
 <\/p>\n
[ \uc801\uc6a9 \ubaa8\uc2b5 ]<\/p>\n
\n
your content 1<\/div>\n
your content 2<\/div>\n
your content 3<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\ud0d1 \ubc14 \uc601\uc5ed\uc5d0 \ub864\ub9c1\uc774 \ub418\ub294 \ubca0\ub108\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc740 \ubb34\uc5c7\uc77c\uae4c\uc694? <\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":1,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":107,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/posts\/104\/revisions\/107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/storefront.oksdev.tk\/qna\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}