{"id":1070,"date":"2018-11-02T12:23:15","date_gmt":"2018-11-02T05:23:15","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1070"},"modified":"2018-11-02T12:23:15","modified_gmt":"2018-11-02T05:23:15","slug":"owl-carousel-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/owl-carousel-jquery\/","title":{"rendered":"Owl Carousel (jQuery)"},"content":{"rendered":"

Carousel slider yang satu ini cukup sering kita lihat pada sebuah halaman web. Karena tampilan slidernya yang sangat menarik, dan intuitif membuat pengunjung web seolah secara langsung dapat berinteraksi. Penggunanaanya pun cukup mudah bagi teman-teman yang ingin menggunakan efek slider ini. Disini untuk membuat efek tersebut, menggunakan plugin Owl Carousel<\/a>. Langsung saja ke tutorialnya.
\n<\/p>\n

Yang perlu teman-teman siapkan antara lain:
\n1. Library jQuery<\/a>
\n2. Plugin Owl Carousel<\/a><\/p>\n

Buatlah file dengan nama index.html<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Owl Carousel | Kursus Web YELLOWWEB<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"owl-carousel\/assets\/owl.carousel.css\">\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"owl-carousel\/assets\/owl.theme.default.css\">\r\n\t\r\n\t<style type=\"text\/css\">\r\n\t\t@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto');\r\n\t\t\r\n\t\tbody{\r\n    \t\tfont-family: 'Roboto', sans-serif;\r\n\t\t}\t\r\n\t\r\n\t\th4{\r\n\t\t\tbackground: #3498db;\r\n\t\t\tpadding: 1rem;\r\n\t\t\theight: 10rem;\r\n\t\t}\r\n\t<\/style>\r\n\r\n\t<script type=\"text\/javascript\" src=\"js\/jquery-3.3.1.min.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"owl-carousel\/owl.carousel.js\"><\/script>\r\n\t\r\n<\/head>\r\n<body>\r\n\t<h3>Owl Carousel<\/h3>\r\n\r\n\t<!-- Set up your HTML -->\r\n\t<div class=\"owl-carousel owl-theme\">\r\n\t    <div class=\"item\"><h4>1<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>2<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>3<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>4<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>5<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>6<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>7<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>8<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>9<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>10<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>11<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>12<\/h4><\/div>\r\n\t<\/div>\r\n\r\n\t\r\n\t\r\n\t<script type=\"text\/javascript\">\r\n\t\t$('.owl-carousel').owlCarousel({\r\n\t\t    loop:true,\r\n\t\t    margin:10,\r\n\t\t    nav:true,\r\n\t\t    autoplay:true,\r\n\t\t    autoplayTimeout:3000,\r\n\t\t    autoplayHoverPause:true,\r\n\t\t    responsive:{\r\n\t\t        0:{\r\n\t\t            items:1\r\n\t\t        },\r\n\t\t        600:{\r\n\t\t            items:3\r\n\t\t        },\r\n\t\t        1000:{\r\n\t\t            items:5\r\n\t\t        }\r\n\t\t    }\r\n\t\t})\r\n\r\n\t<\/script>\r\n\t\r\n\t<p>Seputar artikel terbaru dapat dikunjungi di <a href=\"https:\/\/www.yellowweb.id\/blog\" target=\"_blank\">Blog YELLOWWEB<\/p>\r\n\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Baik kita coba telaah perbagian ya,<\/p>\n
<head>\r\n\t<title>Owl Carousel | Kursus Web YELLOWWEB<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"owl-carousel\/assets\/owl.carousel.css\">\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"owl-carousel\/assets\/owl.theme.default.css\">\r\n\t\r\n\t<style type=\"text\/css\">\r\n\t\t@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto');\r\n\t\t\r\n\t\tbody{\r\n    \t\tfont-family: 'Roboto', sans-serif;\r\n\t\t}\t\r\n\t\r\n\t\th4{\r\n\t\t\tbackground: #3498db;\r\n\t\t\tpadding: 1rem;\r\n\t\t\theight: 10rem;\r\n\t\t}\r\n\t<\/style>\r\n\r\n\t<script type=\"text\/javascript\" src=\"js\/jquery-3.3.1.min.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"owl-carousel\/owl.carousel.js\"><\/script>\r\n\t\r\n<\/head><\/pre>\n
Pada bagian tag html head diatas disana, kita coba letakkan file css untuk pluginnya dan jangan lupa sedikit embededd css untuk mempercantik tampilan.
\nKemudian jangan lupa untuk memanggil library utama jQuery dan plugin Owl Carousel. Untuk aktivasi plugin ini kita letakkan pada bagian tag html body.<\/p>\n
<script type=\"text\/javascript\">\r\n\t\t$('.owl-carousel').owlCarousel({\r\n\t\t    loop:true,\r\n\t\t    margin:10,\r\n\t\t    nav:true,\r\n\t\t    autoplay:true,\r\n\t\t    autoplayTimeout:3000,\r\n\t\t    autoplayHoverPause:true,\r\n\t\t    responsive:{\r\n\t\t        0:{\r\n\t\t            items:1\r\n\t\t        },\r\n\t\t        600:{\r\n\t\t            items:3\r\n\t\t        },\r\n\t\t        1000:{\r\n\t\t            items:5\r\n\t\t        }\r\n\t\t    }\r\n\t\t})\r\n\r\n\t<\/script><\/pre>\n
Potongan skrip kode diatas adalah aktivasi dari plugin Owl Carousel, untuk menjalankan slider yang terdapat pada bagian body, seperti berikut:<\/p>\n
<h3>Owl Carousel<\/h3>\r\n\r\n\t<!-- Set up your HTML -->\r\n\t<div class=\"owl-carousel owl-theme\">\r\n\t    <div class=\"item\"><h4>1<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>2<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>3<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>4<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>5<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>6<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>7<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>8<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>9<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>10<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>11<\/h4><\/div>\r\n\t    <div class=\"item\"><h4>12<\/h4><\/div>\r\n\t<\/div><\/pre>\n
Bagian body disana terdapat element div, disana bisa kita memodifikasi sesuai dengan kebutuhan misalnya dengan menambahkan video atau gambar.<\/p>\n
Mudah bukan, tidak lupa juga teman-teman bisa melihat hasil jadinya dibawah ini, sampai berjumpa pada artikel berikutnya ya \ud83d\ude42<\/p>\n