{"id":101,"date":"2017-11-06T15:02:21","date_gmt":"2017-11-06T15:02:21","guid":{"rendered":"https:\/\/xhtmlteam.com\/blog\/?p=101"},"modified":"2026-04-27T15:49:48","modified_gmt":"2026-04-27T15:49:48","slug":"owl-carousel-responsive-single-item-slider","status":"publish","type":"post","link":"https:\/\/www.xhtmlteam.com\/blog\/owl-carousel-responsive-single-item-slider\/","title":{"rendered":"Owl carousel responsive single item slider"},"content":{"rendered":"

Free download fully functional, easy to editable, responsive, mobile touch-friendly single item content carousel\/ slider for your responsive websites.<\/p>\n

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

How to use Owl carousel?<\/p>\n

CSS:<\/p>\n

* {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tborder: 0;\r\n\tfont-size: 100%;\r\n\tfont: inherit;\r\n}\r\n\r\n\/* render html5 elements as block *\/\r\narticle, aside, details, figcaption, figure, footer, header, hgroup, nav, section {\r\n\tdisplay: block;\r\n}\r\n\r\nhtml {\r\n\tfont-size: 100%;\r\n\t-webkit-text-size-adjust: 100%;\r\n\t-ms-text-size-adjust: 100%;\r\n}\r\n\r\nbody {\r\n\tfont-family: \"Open Sans\", Arial, Helvetica, sans-serif;\r\n\tfont-size:18px;\r\n\tcolor:#3b3b3b; \r\n\tline-height:26px;\r\n\tbackground:#ffffff; \r\n}\r\n\r\nh1, h2 {\r\n\tfont-family: \"Open Sans\", Arial, Helvetica, sans-serif;\r\n\tcolor: #333854;\r\n\tfont-size:26px;\r\n\tline-height:1.4em;\r\n\tpadding: 0 0 20px 0;\r\n\tmargin: 0;\r\n\tfont-weight:800;\r\n\tfont-style: normal;\r\n\tletter-spacing:0;\r\n}\r\n\r\nh1 {font-family: 'Playfair Display', serif; font-weight:400}\r\n\r\n@import url(\"font-awesome.css\") all;\r\n.owl-carousel .owl-wrapper:after {\r\n\tcontent: \".\";\r\n\tdisplay: block;\r\n\tclear: both;\r\n\tvisibility: hidden;\r\n\tline-height: 0;\r\n\theight: 0;\r\n}\r\n\r\n\/* display none until init *\/\r\n.owl-carousel {\r\n\tdisplay: none;\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\t-ms-touch-action: pan-y;\r\n}\r\n\r\n.owl-carousel .owl-wrapper {\r\n\tdisplay: none;\r\n\tposition: relative;\r\n\t-webkit-transform: translate3d(0px, 0px, 0px);\r\n}\r\n\r\n.owl-carousel .owl-wrapper-outer {\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n\twidth: 100%;\r\n}\r\n\r\n.owl-carousel .owl-wrapper-outer.autoHeight {\r\n\t-webkit-transition: height 500ms ease-in-out;\r\n\t-moz-transition: height 500ms ease-in-out;\r\n\t-ms-transition: height 500ms ease-in-out;\r\n\t-o-transition: height 500ms ease-in-out;\r\n\ttransition: height 500ms ease-in-out;\r\n}\r\n\r\n.owl-carousel .owl-item {\r\n\tfloat: left;\r\n}\r\n\r\n.owl-controls .owl-page, \r\n.owl-controls .owl-buttons div {\r\n\tcursor: pointer;\r\n}\r\n\r\n\/* mouse grab icon *\/\r\n.grabbing {\r\n\tcursor:url(grabbing.png) 8 8, move;\r\n}\r\n\r\n.owl-carousel .owl-wrapper, .owl-carousel .owl-item {\r\n\t-webkit-backface-visibility: hidden;\r\n\t-moz-backface-visibility:    hidden;\r\n\t-ms-backface-visibility:     hidden;\r\n\t-webkit-transform: translate3d(0, 0, 0);\r\n\t-moz-transform: translate3d(0, 0, 0);\r\n\t-ms-transform: translate3d(0, 0, 0);\r\n}\r\n\r\n.owl-origin {\r\n\t-webkit-perspective: 1200px;\r\n\t-webkit-perspective-origin-x : 50%;\r\n\t-webkit-perspective-origin-y : 50%;\r\n\t-moz-perspective : 1200px;\r\n\t-moz-perspective-origin-x : 50%;\r\n\t-moz-perspective-origin-y : 50%;\r\n\tperspective : 1200px;\r\n}\r\n\r\n.owl-fade-out {\r\n\tz-index: 10;\r\n\t-webkit-animation: fadeOut .7s both ease;\r\n\t-moz-animation: fadeOut .7s both ease;\r\n\tanimation: fadeOut .7s both ease;\r\n}\r\n\r\n.owl-fade-in {\r\n\t-webkit-animation: fadeIn .7s both ease;\r\n\t-moz-animation: fadeIn .7s both ease;\r\n\tanimation: fadeIn .7s both ease;\r\n}\r\n\r\n.owl-backSlide-out {\r\n\t-webkit-animation: backSlideOut 1s both ease;\r\n\t-moz-animation: backSlideOut 1s both ease;\r\n\tanimation: backSlideOut 1s both ease;\r\n}\r\n\r\n.owl-backSlide-in {\r\n\t-webkit-animation: backSlideIn 1s both ease;\r\n\t-moz-animation: backSlideIn 1s both ease;\r\n\tanimation: backSlideIn 1s both ease;\r\n}\r\n\r\n.owl-goDown-out {\r\n\t-webkit-animation: scaleToFade .7s ease both;\r\n\t-moz-animation: scaleToFade .7s ease both;\r\n\tanimation: scaleToFade .7s ease both;\r\n}\r\n\r\n.owl-goDown-in {\r\n\t-webkit-animation: goDown .6s ease both;\r\n\t-moz-animation: goDown .6s ease both;\r\n\tanimation: goDown .6s ease both;\r\n}\r\n\r\n.owl-fadeUp-in {\r\n\t-webkit-animation: scaleUpFrom .5s ease both;\r\n\t-moz-animation: scaleUpFrom .5s ease both;\r\n\tanimation: scaleUpFrom .5s ease both;\r\n}\r\n\r\n.owl-fadeUp-out {\r\n\t-webkit-animation: scaleUpTo .5s ease both;\r\n\t-moz-animation: scaleUpTo .5s ease both;\r\n\tanimation: scaleUpTo .5s ease both;\r\n}\r\n\r\n.owl-controls {\r\n\twidth: 100%;\r\n\tfloat: left;\r\n\ttext-align: center;\r\n\t-webkit-user-select: none;\r\n\t-khtml-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n\tmargin:0; \r\n}\r\n\r\n.owl-controls .owl-buttons div {\r\n\tdisplay: none;\r\n}\r\n\r\n.owl-controls .owl-page {\r\n\twidth: auto;\r\n\tfloat: none;\r\n\tdisplay: block;\r\n\tmargin: 0;\r\n\tdisplay: inline-block;\r\n\tzoom: 1;\r\n\t*display: inline;\r\n}\r\n\r\n.owl-controls .owl-page span {\r\n\tdisplay: block;\r\n\twidth: 18px;\r\n\theight: 6px;\r\n\tbackground: #ccc;\r\n\tborder: none;\r\n\tmargin: 0 3px;\r\n\tpadding: 0;\r\n\ttext-indent: -9999px;\r\n\tborder-radius:4px;\r\n}\r\n\r\n.owl-controls .owl-page:hover span {\r\n\tbackground:#3f56f5;\r\n\tcolor: #FFFFFF;\r\n}\r\n\r\n.owl-controls .owl-page.active span {\r\n\tfilter: Alpha(Opacity=100);\r\n\t\/*IE7 fix*\/\r\n\topacity: 1;\r\n\tbackground: #3f56f5;\r\n\tbox-shadow: none;\r\n\tcolor: #FFFFFF;\r\n}\r\n\r\n\r\n.navigation {\r\n\twidth: 100%;\r\n\tfloat: left;\r\n}\r\n\r\n.navigation a {\r\n\tline-height:.5em;\r\n\tz-index: 10;\r\n\tcursor: pointer;\r\n\ttext-indent:-99999px;\r\n\tposition: absolute;\r\n\ttop:50%;\r\n\tmargin:-45px 0 0 0;\r\n}\r\n\r\n.navigation a:hover {\r\n\ttext-decoration:none;\r\n}\r\n\r\n.navigation a:before {\r\n\tfont: normal normal bold 14px\/2 FontAwesome;\r\n\tfont-family:\"FontAwesome\";\r\n\tfont-size:44px;\r\n\tcolor:#3f56f5;\r\n\tdisplay:block;\r\n\ttext-indent:0;\r\n\tposition: absolute;\r\n\ttop:0;\r\n\tz-index: 10;\r\n\tcursor: pointer;\r\n\topacity:1;\r\n}\r\n\r\n.navigation a.previous {\r\n\tleft:20px;\r\n}\r\n\r\n.navigation a.previous:before {\r\n\tcontent:\"\\f104\";\r\n\tleft:0;\r\n}\r\n\r\n.navigation a.next {\r\n\tright:20px;\r\n}\r\n\r\n.navigation a.next:before {\r\n\tcontent:\"\\f105\";\r\n\tright:0;\r\n}\r\n\r\n\r\n.container {\r\n\twidth:100%;\r\n\tmax-width:1000px;\r\n\tpadding:0 40px;\r\n\tmargin:0 auto;\r\n}\r\n\r\n.slider-main {\r\n\twidth:100%;\r\n\tfloat:left;\r\n\tposition:relative;\r\n\ttext-align:center;\r\n\tmargin:40px 0 0 0;\r\n}\r\n\r\n.slider-main h2 {\r\n\tfont-size:24px;\r\n\tpadding-bottom:20px;\r\n\tfont-weight:800;\r\n\tcolor:#FFFFFF\r\n}\r\n\r\n.slider-main p {\r\n\tfont-size:17px;\r\n\tline-height:1.4em;\r\n\tcolor:#FFFFFF\r\n}\r\n\r\n.slider-bg {\r\n\twidth:100%;\r\n\tfloat:left;\r\n\ttext-align:center;\r\n\tposition:relativer;\r\n}\r\n\r\n.slider-bg ul {\r\n\twidth:100%;\r\n\tfloat:left;\r\n\tlist-style:none;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n\r\n.slider-bg ul li {\r\n\twidth:100%;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n\r\n.slider-bg .box {\r\n\twidth:90%;\r\n\tbackground:#3f56f5;\r\n\tpadding:25px 35px;\r\n\tmargin:10% 5%;\r\n\tborder-radius:2px;\r\n}\r\n\r\n<\/pre>\n
 <\/p>\n
HTML:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <!-- downloaded from xhtmlteam.com -->\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>OWL Demo Slider<\/title>\r\n    <link href=\"css\/styles.css\" rel=\"stylesheet\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,600,800\" rel=\"stylesheet\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Playfair+Display:400,400i,700,900\" rel=\"stylesheet\">\r\n    <link rel=\"shortcut icon\" href=\"favicon.png\">\r\n    <link rel=\"shortcut icon\" href=\"favicon.ico\">\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"slider-main\">\r\n<div class=\"container\">\r\n\r\n\t<h1>Owl Carousel <strong>Responsive Single Item Slider<\/strong><\/h1>\r\n\r\n    <div class=\"slider-bg\">\r\n    <ul id=\"owl-slide\" class=\"owl-carousel\">\r\n    \r\n    <li class=\"item\">\r\n    <div class=\"box\">\r\n    <h2><strong>Slide 1<\/strong><\/h2>\r\n    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the galley of type and scrambled it to make a type specimen book.<\/p>\r\n    <\/div>\r\n    <\/li>\r\n    \r\n    <li class=\"item\">\r\n    <div class=\"box\">\r\n    <h2><strong>Slide 2<\/strong><\/h2>\r\n    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the galley of type and scrambled it to make a type specimen book.<\/p>\r\n    <\/div>\r\n    <\/li>\r\n    \r\n    <li class=\"item\">\r\n    <div class=\"box\">\r\n    <h2><strong>Slide 3<\/strong><\/h2>\r\n    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the galley of type and scrambled it to make a type specimen book.<\/p>\r\n    <\/div>\r\n    <\/li>\r\n    <\/ul>\r\n    \r\n    <div class=\"navigation\">\r\n    <a class=\"previous prevcustom\">Previous<\/a>\r\n    <a class=\"next nextcustom\">Next<\/a>\r\n    <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n<script src=\"js\/jquery.min.js\"><\/script>\r\n<script src=\"js\/owl.carousel.js\"><\/script>\r\n<script>\r\n\t$(document).ready(function() {\r\n\tvar owl = $(\"#owl-slide\");\r\n\towl.owlCarousel({\r\n\tnavigation : true,\r\n\tautoPlay : false,\r\n\tslideSpeed : 300,\r\n\tpaginationSpeed : 400,\r\n\tsingleItem : false,\r\n\titems : 1,\r\n\titemsDesktop : [1260,1],\r\n\titemsDesktopSmall : [1024,1],\r\n\titemsTablet : [1023,1],\r\n\titemsTabletSmall : [767,1],\r\n\titemsMobile : [639,1],\r\n\tloop : true\r\n\t});\r\n\r\n\t\/\/ Custom Navigation Events\r\n\t$(\".nextcustom\").click(function(){\r\n\towl.trigger('owl.next');\r\n\t})\r\n\t$(\".prevcustom\").click(function(){\r\n\towl.trigger('owl.prev');\r\n\t})\r\n\t}); \r\n<\/script>\t\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
View Demo<\/strong><\/a>
\nDownload Source<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Free download fully functional, easy to editable, responsive, mobile touch-friendly single item content carousel\/ slider for your responsive websites. How to use Owl carousel? CSS: * { margin: 0; padding:… Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":299,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[38],"tags":[39],"class_list":["post-101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-demo","tag-owl-slider"],"acf":[],"aioseo_notices":[],"views":17503,"_links":{"self":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":0,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/media\/299"}],"wp:attachment":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}