{"id":1037,"date":"2018-07-29T11:58:09","date_gmt":"2018-07-29T04:58:09","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1037"},"modified":"2018-07-29T11:58:09","modified_gmt":"2018-07-29T04:58:09","slug":"membuat-slider-dengan-css","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/","title":{"rendered":"Membuat Slider dengan CSS"},"content":{"rendered":"<p>halo teman-teman, apa kabarnya \ud83d\ude42<br \/>\nUntuk tulisan kali ini, kita akan mencoba membuat efek slider dengan hanya menggunakan CSS. Ternyata kita bisa membuat sebuah slider dengan menggunakan CSS. Tentunya hal ini akan membuat lebih simple dan mudah, jika dibandingkan dengan menggunakan Plugin jQuery atau murni JavaScript.<br \/>\n<!--more--><\/p>\n<p>Buat file <code>index.html<\/code><\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text\/css'&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"&gt;\r\n\t&lt;title&gt;&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div class=\"slider\"&gt;\r\n\t\t&lt;figure&gt;\r\n\t\t\t&lt;div class=\"slide\"&gt;\r\n\t\t\t\t&lt;img src=\"images\/slide_one.jpg\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;div class=\"slide\"&gt;\r\n\t\t\t\t&lt;img src=\"images\/slide_two.jpg\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;div class=\"slide\"&gt;\r\n\t\t\t\t&lt;img src=\"images\/slide_three.jpg\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;div class=\"slide\"&gt;\r\n\t\t\t\t&lt;img src=\"images\/slide_four.jpg\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;div class=\"slide\"&gt;\r\n\t\t\t\t&lt;img src=\"images\/slide_five.jpg\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/figure&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Teman-teman harus perhatikan, disana sebelumnya sudah kita siapkan source untuk gambarnya, yang coba kita tempatkan di dalam folder <code>images<\/code>.<\/p>\n<p>Lanjutkan dengan membuat file<code> style.css<\/code> dengan membuat sebuah folder dengan nama css.<\/p>\n<pre class=\"lang:default decode:true \" >*{\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tlist-style: none;\r\n\ttext-decoration: none;\r\n}\r\n\r\n.slider{\r\n\toverflow: hidden;\r\n\theight: 350px;\r\n}\r\n\r\n.slider figure div{\r\n\twidth: 20%;\r\n\tfloat: left;\r\n}\r\n\r\n.slider figure img{\r\n\twidth: 100%;\r\n\tfloat: left;\r\n}\r\n\r\n.slider figure{\r\n\tposition: relative;\r\n\twidth: 500%;\r\n\tmargin: 0;\r\n\tleft: 0;\r\n\tanimation: 20s slidy infinite;\r\n}\r\n\r\n@keyframes slidy{\r\n\t0%{\r\n\t\tleft: 0%\r\n\t}\r\n\r\n\t10%{\r\n\t\tleft: 0%;\r\n\t}\r\n\r\n\t12%{\r\n\t\tleft: -100%;\r\n\t}\r\n\r\n\t22%{\r\n\t\tleft: -100%;\r\n\t}\r\n\r\n\t24%{\r\n\t\tleft: -200%;\r\n\t}\r\n\r\n\t34%{\r\n\t\tleft: -200%;\r\n\t}\r\n\r\n\t36%{\r\n\t\tleft: -300%;\r\n\t}\r\n\r\n\t46%{\r\n\t\tleft: -300%;\r\n\t}\r\n\r\n\t48%{\r\n\t\tleft: -400%;\r\n\t}\r\n\r\n\t58%{\r\n\t\tleft: -400%;\r\n\t}\r\n\r\n\t60%{\r\n\t\tleft: -300%;\r\n\t}\r\n\r\n\t70%{\r\n\t\tleft: -300%;\r\n\t}\r\n\r\n\t72%{\r\n\t\tleft: -200%;\r\n\t}\r\n\r\n\t82%{\r\n\t\tleft: -200%;\r\n\t}\r\n\r\n\t84%{\r\n\t\tleft: -100%;\r\n\t}\r\n\r\n\t94%{\r\n\t\tleft: -100%;\r\n\t}\r\n\r\n\t96%{\r\n\t\tleft: 0%;\r\n\t}\r\n\r\n\t100%{\r\n\t\tleft: 0%;\r\n\t}\r\n}<\/pre>\n<p>Untuk hasilnya akan terlihat seperti berikut:<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/hg1d6z24\/5\/embedded\/html,css,result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>halo teman-teman, apa kabarnya \ud83d\ude42 Untuk tulisan kali ini, kita akan mencoba membuat efek slider dengan hanya menggunakan CSS. Ternyata kita bisa membuat sebuah slider dengan menggunakan CSS. Tentunya hal ini akan membuat lebih simple dan mudah, jika dibandingkan dengan menggunakan Plugin jQuery atau murni JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":1039,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[22,461,459,460],"class_list":["post-1037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css3","tag-simple-slider","tag-slider","tag-slider-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat Slider dengan CSS - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Slider dengan CSS - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"halo teman-teman, apa kabarnya \ud83d\ude42 Untuk tulisan kali ini, kita akan mencoba membuat efek slider dengan hanya menggunakan CSS. Ternyata kita bisa membuat sebuah slider dengan menggunakan CSS. Tentunya hal ini akan membuat lebih simple dan mudah, jika dibandingkan dengan menggunakan Plugin jQuery atau murni JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-29T04:58:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg?fit=2500%2C1208&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"2500\" \/>\n\t<meta property=\"og:image:height\" content=\"1208\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Membuat Slider dengan CSS\",\"datePublished\":\"2018-07-29T04:58:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/\"},\"wordCount\":86,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/slider-01.jpg\",\"keywords\":[\"css3\",\"simple slider\",\"slider\",\"slider css\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/\",\"name\":\"Membuat Slider dengan CSS - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/slider-01.jpg\",\"datePublished\":\"2018-07-29T04:58:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/slider-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/slider-01.jpg\",\"width\":2500,\"height\":1208,\"caption\":\"Slider With CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/membuat-slider-dengan-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Slider dengan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Slider dengan CSS - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/","og_locale":"en_GB","og_type":"article","og_title":"Membuat Slider dengan CSS - YELLOWWEB.ID","og_description":"halo teman-teman, apa kabarnya \ud83d\ude42 Untuk tulisan kali ini, kita akan mencoba membuat efek slider dengan hanya menggunakan CSS. Ternyata kita bisa membuat sebuah slider dengan menggunakan CSS. Tentunya hal ini akan membuat lebih simple dan mudah, jika dibandingkan dengan menggunakan Plugin jQuery atau murni JavaScript.","og_url":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-07-29T04:58:09+00:00","og_image":[{"width":2500,"height":1208,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg?fit=2500%2C1208&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Membuat Slider dengan CSS","datePublished":"2018-07-29T04:58:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/"},"wordCount":86,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg","keywords":["css3","simple slider","slider","slider css"],"articleSection":["CSS"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/","url":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/","name":"Membuat Slider dengan CSS - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg","datePublished":"2018-07-29T04:58:09+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/07\/slider-01.jpg","width":2500,"height":1208,"caption":"Slider With CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/membuat-slider-dengan-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Slider dengan CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1037"}],"version-history":[{"count":3,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions"}],"predecessor-version":[{"id":1041,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions\/1041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1039"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}