Free Estimation Order Now

Owl carousel responsive single item slider

by: xhtmlteamPosted on:

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:

view source
001* {
002    margin: 0;
003    padding: 0;
004}
005 
006html, 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 {
007    margin: 0;
008    padding: 0;
009    border: 0;
010    font-size: 100%;
011    font: inherit;
012}
013 
014/* render html5 elements as block */
015article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
016    display: block;
017}
018 
019html {
020    font-size: 100%;
021    -webkit-text-size-adjust: 100%;
022    -ms-text-size-adjust: 100%;
023}
024 
025body {
026    font-family: "Open Sans", Arial, Helvetica, sans-serif;
027    font-size:18px;
028    color:#3b3b3b;
029    line-height:26px;
030    background:#ffffff;
031}
032 
033h1, h2 {
034    font-family: "Open Sans", Arial, Helvetica, sans-serif;
035    color: #333854;
036    font-size:26px;
037    line-height:1.4em;
038    padding: 0 0 20px 0;
039    margin: 0;
040    font-weight:800;
041    font-style: normal;
042    letter-spacing:0;
043}
044 
045h1 {font-family: 'Playfair Display', serif; font-weight:400}
046 
047@import url("font-awesome.css") all;
048.owl-carousel .owl-wrapper:after {
049    content: ".";
050    display: block;
051    clear: both;
052    visibility: hidden;
053    line-height: 0;
054    height: 0;
055}
056 
057/* display none until init */
058.owl-carousel {
059    display: none;
060    position: relative;
061    width: 100%;
062    -ms-touch-action: pan-y;
063}
064 
065.owl-carousel .owl-wrapper {
066    display: none;
067    position: relative;
068    -webkit-transform: translate3d(0px, 0px, 0px);
069}
070 
071.owl-carousel .owl-wrapper-outer {
072    overflow: hidden;
073    position: relative;
074    width: 100%;
075}
076 
077.owl-carousel .owl-wrapper-outer.autoHeight {
078    -webkit-transition: height 500ms ease-in-out;
079    -moz-transition: height 500ms ease-in-out;
080    -ms-transition: height 500ms ease-in-out;
081    -o-transition: height 500ms ease-in-out;
082    transition: height 500ms ease-in-out;
083}
084 
085.owl-carousel .owl-item {
086    float: left;
087}
088 
089.owl-controls .owl-page,
090.owl-controls .owl-buttons div {
091    cursor: pointer;
092}
093 
094/* mouse grab icon */
095.grabbing {
096    cursor:url(grabbing.png) 8 8, move;
097}
098 
099.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
100    -webkit-backface-visibility: hidden;
101    -moz-backface-visibility:    hidden;
102    -ms-backface-visibility:     hidden;
103    -webkit-transform: translate3d(0, 0, 0);
104    -moz-transform: translate3d(0, 0, 0);
105    -ms-transform: translate3d(0, 0, 0);
106}
107 
108.owl-origin {
109    -webkit-perspective: 1200px;
110    -webkit-perspective-origin-x : 50%;
111    -webkit-perspective-origin-y : 50%;
112    -moz-perspective : 1200px;
113    -moz-perspective-origin-x : 50%;
114    -moz-perspective-origin-y : 50%;
115    perspective : 1200px;
116}
117 
118.owl-fade-out {
119    z-index: 10;
120    -webkit-animation: fadeOut .7s both ease;
121    -moz-animation: fadeOut .7s both ease;
122    animation: fadeOut .7s both ease;
123}
124 
125.owl-fade-in {
126    -webkit-animation: fadeIn .7s both ease;
127    -moz-animation: fadeIn .7s both ease;
128    animation: fadeIn .7s both ease;
129}
130 
131.owl-backSlide-out {
132    -webkit-animation: backSlideOut 1s both ease;
133    -moz-animation: backSlideOut 1s both ease;
134    animation: backSlideOut 1s both ease;
135}
136 
137.owl-backSlide-in {
138    -webkit-animation: backSlideIn 1s both ease;
139    -moz-animation: backSlideIn 1s both ease;
140    animation: backSlideIn 1s both ease;
141}
142 
143.owl-goDown-out {
144    -webkit-animation: scaleToFade .7s ease both;
145    -moz-animation: scaleToFade .7s ease both;
146    animation: scaleToFade .7s ease both;
147}
148 
149.owl-goDown-in {
150    -webkit-animation: goDown .6s ease both;
151    -moz-animation: goDown .6s ease both;
152    animation: goDown .6s ease both;
153}
154 
155.owl-fadeUp-in {
156    -webkit-animation: scaleUpFrom .5s ease both;
157    -moz-animation: scaleUpFrom .5s ease both;
158    animation: scaleUpFrom .5s ease both;
159}
160 
161.owl-fadeUp-out {
162    -webkit-animation: scaleUpTo .5s ease both;
163    -moz-animation: scaleUpTo .5s ease both;
164    animation: scaleUpTo .5s ease both;
165}
166 
167.owl-controls {
168    width: 100%;
169    float: left;
170    text-align: center;
171    -webkit-user-select: none;
172    -khtml-user-select: none;
173    -moz-user-select: none;
174    -ms-user-select: none;
175    user-select: none;
176    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
177    margin:0;
178}
179 
180.owl-controls .owl-buttons div {
181    display: none;
182}
183 
184.owl-controls .owl-page {
185    width: auto;
186    float: none;
187    display: block;
188    margin: 0;
189    display: inline-block;
190    zoom: 1;
191    *display: inline;
192}
193 
194.owl-controls .owl-page span {
195    display: block;
196    width: 18px;
197    height: 6px;
198    background: #ccc;
199    border: none;
200    margin: 0 3px;
201    padding: 0;
202    text-indent: -9999px;
203    border-radius:4px;
204}
205 
206.owl-controls .owl-page:hover span {
207    background:#3f56f5;
208    color: #FFFFFF;
209}
210 
211.owl-controls .owl-page.active span {
212    filter: Alpha(Opacity=100);
213    /*IE7 fix*/
214    opacity: 1;
215    background: #3f56f5;
216    box-shadow: none;
217    color: #FFFFFF;
218}
219 
220 
221.navigation {
222    width: 100%;
223    float: left;
224}
225 
226.navigation a {
227    line-height:.5em;
228    z-index: 10;
229    cursor: pointer;
230    text-indent:-99999px;
231    position: absolute;
232    top:50%;
233    margin:-45px 0 0 0;
234}
235 
236.navigation a:hover {
237    text-decoration:none;
238}
239 
240.navigation a:before {
241    font: normal normal bold 14px/2 FontAwesome;
242    font-family:"FontAwesome";
243    font-size:44px;
244    color:#3f56f5;
245    display:block;
246    text-indent:0;
247    position: absolute;
248    top:0;
249    z-index: 10;
250    cursor: pointer;
251    opacity:1;
252}
253 
254.navigation a.previous {
255    left:20px;
256}
257 
258.navigation a.previous:before {
259    content:"\f104";
260    left:0;
261}
262 
263.navigation a.next {
264    right:20px;
265}
266 
267.navigation a.next:before {
268    content:"\f105";
269    right:0;
270}
271 
272 
273.container {
274    width:100%;
275    max-width:1000px;
276    padding:0 40px;
277    margin:0 auto;
278}
279 
280.slider-main {
281    width:100%;
282    float:left;
283    position:relative;
284    text-align:center;
285    margin:40px 0 0 0;
286}
287 
288.slider-main h2 {
289    font-size:24px;
290    padding-bottom:20px;
291    font-weight:800;
292    color:#FFFFFF
293}
294 
295.slider-main p {
296    font-size:17px;
297    line-height:1.4em;
298    color:#FFFFFF
299}
300 
301.slider-bg {
302    width:100%;
303    float:left;
304    text-align:center;
305    position:relativer;
306}
307 
308.slider-bg ul {
309    width:100%;
310    float:left;
311    list-style:none;
312    margin:0;
313    padding:0;
314}
315 
316.slider-bg ul li {
317    width:100%;
318    margin:0;
319    padding:0;
320}
321 
322.slider-bg .box {
323    width:90%;
324    background:#3f56f5;
325    padding:25px 35px;
326    margin:10% 5%;
327    border-radius:2px;
328}

 

HTML:

view source
01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <!-- downloaded from xhtmlteam.com -->
05    <meta charset="utf-8">
06    <meta http-equiv="X-UA-Compatible" content="IE=edge">
07    <meta name="viewport" content="width=device-width, initial-scale=1">
08    <title>OWL Demo Slider</title>
09    <link href="css/styles.css" rel="stylesheet">
10    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
11    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900" rel="stylesheet">
12    <link rel="shortcut icon" href="favicon.png">
13    <link rel="shortcut icon" href="favicon.ico">
14 
15</head>
16<body>
17 
18<div class="slider-main">
19<div class="container">
20 
21    <h1>Owl Carousel <strong>Responsive Single Item Slider</strong></h1>
22 
23    <div class="slider-bg">
24    <ul id="owl-slide" class="owl-carousel">
25     
26    <li class="item">
27    <div class="box">
28    <h2><strong>Slide 1</strong></h2>
29    <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>
30    </div>
31    </li>
32     
33    <li class="item">
34    <div class="box">
35    <h2><strong>Slide 2</strong></h2>
36    <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>
37    </div>
38    </li>
39     
40    <li class="item">
41    <div class="box">
42    <h2><strong>Slide 3</strong></h2>
43    <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>
44    </div>
45    </li>
46    </ul>
47     
48    <div class="navigation">
49    <a class="previous prevcustom">Previous</a>
50    <a class="next nextcustom">Next</a>
51    </div>
52    </div>
53 
54</div>
55</div>
56 
57<script src="js/jquery.min.js"></script>
58<script src="js/owl.carousel.js"></script>
59<script>
60    $(document).ready(function() {
61    var owl = $("#owl-slide");
62    owl.owlCarousel({
63    navigation : true,
64    autoPlay : false,
65    slideSpeed : 300,
66    paginationSpeed : 400,
67    singleItem : false,
68    items : 1,
69    itemsDesktop : [1260,1],
70    itemsDesktopSmall : [1024,1],
71    itemsTablet : [1023,1],
72    itemsTabletSmall : [767,1],
73    itemsMobile : [639,1],
74    loop : true
75    });
76 
77    // Custom Navigation Events
78    $(".nextcustom").click(function(){
79    owl.trigger('owl.next');
80    })
81    $(".prevcustom").click(function(){
82    owl.trigger('owl.prev');
83    })
84    });
85</script>
86 
87</body>
88</html>

 

View Demo
Download Source

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *

Focus on the design; we’ll handle the coding

Create a Top-Notch Website with Our Skilled Developers

Submit Your Order