{"id":1176,"date":"2019-09-26T13:31:09","date_gmt":"2019-09-26T06:31:09","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1176"},"modified":"2019-09-26T13:31:09","modified_gmt":"2019-09-26T06:31:09","slug":"carousel-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/carousel-jquery-plugin\/","title":{"rendered":"Carousel jQuery Plugin"},"content":{"rendered":"

Membuat testimoni dengan menerapkan efek slider bisa dilakukan dengan cukup mudah, salah satunya dengan menerapkan plugin jQuery. Dengan menggunakan plugin tertentu disini akan diperlihatkan langkah demi langkah apa saja yang harus dipersiapkan, untuk menjalankan plugin tersebut.
\n<\/p>\n

Tentunya persiapkan dahulu plugin yang sesuai, disini akan digunakan plugin jQuery dengan nama Owl Carousel<\/a> karena untuk instalasi plugin tersebut tidak terlalu rumit.<\/p>\n

Buat file index.html, untuk skripnya bisa dilihat sebagai berikut:<\/p>\n

<div class=\"wrapper\">\r\n\t\t<div class=\"testimonial-carousel section-padding owl-carousel\">\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div><\/pre>\n
kemudian dilanjutkan dengan pembuatan skrip aktivasi jquerynya, skripnya terlihat sebagai berikut:<\/p>\n
<script type=\"text\/javascript\">\r\n\t\t$('.testimonial-carousel').owlCarousel({\r\n\t\t    loop:true,\r\n\t\t    margin:20,\r\n\t\t    autoplay: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:2\r\n\t\t        },\r\n\t\t        1000:{\r\n\t\t            items:3\r\n\t\t        }\r\n\t\t    }\r\n\t\t})\r\n\t<\/script><\/pre>\n
perlu kita ketahui disini akan ditambahkan tambahan skrip CSS untuk memodifikasi tampilan, skripnya dapat dilihat dibawah berikut:<\/p>\n
body{\r\n\tbackground-color: #009fdc;\r\n\tfont-family: poppins;\r\n}\r\n\r\n.wrapper{\r\n\twidth: 1170px;\r\n\tmargin: 0 auto;\r\n}\r\n\r\n.section-padding{\r\n\tpadding: 60px 0;\r\n}\r\n\r\n.testimonial-carousel{\r\n\tmargin: 5% auto 0;\r\n}\r\n\r\n.img-area{\r\n\twidth: 100px;\r\n\theight: 100px;\r\n\tdisplay: block;\r\n\toverflow: hidden;\r\n\tborder-radius: 50%;\r\n\tmargin: 0 auto;\r\n\tbackground-color: red;\r\n}\r\n\r\n.img-area img{\r\n\theight: 100px;\r\n\twidth: 100px;\r\n}\r\n\r\n\r\n.single-testi{\r\n\tbackground: #ffffff;\r\n\tpadding: 10%;\r\n\ttext-align: center;\r\n\tborder-radius: 100px 0 100px 0;\r\n}\r\n\r\n.img-text h2{\r\n\ttext-transform: uppercase;\r\n\tmargin: 20px 0 -15px;\r\n}\r\n\r\n.img-text i{\r\n\tcolor: #ff5257;\r\n}\r\n\r\nhr{\r\n\tcolor: #ff5257;\r\n}\r\n\r\n.owl-dots{\r\n\ttext-align: center;\r\n}\r\n\r\nbutton.owl-dot{\r\n\tdisplay: inline-block;\r\n\theight: 15px !important;\r\n\twidth: 15px !important;\r\n\tbackground: #fff;\r\n\topacity: 0.8;\r\n\tborder-radius: 50%;\r\n\tmargin: 50px 5px 0;\r\n}\r\n\r\n.owl-carousel button.owl-dot{\r\n\tbackground-color: #fff;\r\n}\r\n\r\n.owl-dot.active{\r\n\tbackground-color: #ff5257 !important;\r\n}\r\n\r\n@media only screen and (min-width: 375px) and (max-width: 767px){\r\n\t.wrapper{\r\n\t\twidth: 100%;\r\n\t}\r\n}<\/pre>\n
Yang diperlukan dalam penerapan plugin jQuery Owl Carousel tersebut diantaranya adalah, sebagai berikut:
\n1. file index.html
\n2. file css, untuk kustomisasi tampilan
\n3. file jQuery, sebagai aktivasi<\/p>\n
secara keseluruhan, jika digabung skripnya akan terlihat seperti berikut dibawah ini:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Owl Caraousel<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.10.2\/css\/all.css\">\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.carousel.css\">\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.theme.default.css\">\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"style\/custom.css\">\r\n<\/head>\r\n<body>\r\n\r\n\t<div class=\"wrapper\">\r\n\t\t<div class=\"testimonial-carousel section-padding owl-carousel\">\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"single-testi\">\r\n\t\t\t\t<div class=\"img-area\">\r\n\t\t\t\t\t<img src=\"https:\/\/source.unsplash.com\/daily\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"img-text\">\r\n\t\t\t\t\t<h2>John Doe<\/h2>\r\n\t\t\t\t\t<h3>Software Designer<\/h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t\t<i class=\"fas fa-star\"><\/i>\r\n\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<hr>\r\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/owl.carousel.js\"><\/script>\r\n\t<script type=\"text\/javascript\">\r\n\t\t$('.testimonial-carousel').owlCarousel({\r\n\t\t    loop:true,\r\n\t\t    margin:20,\r\n\t\t    autoplay: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:2\r\n\t\t        },\r\n\t\t        1000:{\r\n\t\t            items:3\r\n\t\t        }\r\n\t\t    }\r\n\t\t})\r\n\t<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
sumber:
\n1. https:\/\/owlcarousel2.github.io\/OwlCarousel2\/demos\/basic.html<\/a>
\n2. https:\/\/jquery.com\/<\/a>
\n3. https:\/\/www.youtube.com\/watch?v=INpoM8l-2Xw<\/a>
\ncatatan: sebagai alternatif file dapat digunakan secara langsung dengan menerapkan fitur CDN<\/em><\/p>\n
DEMO:<\/p>\n