Special Offer: Convert 2 Pages (HTML, WordPress, or Email) for $99 Start Now

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:

* {
	margin: 0;
	padding: 0;
}

html, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

/* render html5 elements as block */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#3b3b3b; 
	line-height:26px;
	background:#ffffff; 
}

h1, h2 {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #333854;
	font-size:26px;
	line-height:1.4em;
	padding: 0 0 20px 0;
	margin: 0;
	font-weight:800;
	font-style: normal;
	letter-spacing:0;
}

h1 {font-family: 'Playfair Display', serif; font-weight:400}

@import url("font-awesome.css") all;
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* display none until init */
.owl-carousel {
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
	float: left;
}

.owl-controls .owl-page, 
.owl-controls .owl-buttons div {
	cursor: pointer;
}

/* mouse grab icon */
.grabbing {
	cursor:url(grabbing.png) 8 8, move;
}

.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
}

.owl-origin {
	-webkit-perspective: 1200px;
	-webkit-perspective-origin-x : 50%;
	-webkit-perspective-origin-y : 50%;
	-moz-perspective : 1200px;
	-moz-perspective-origin-x : 50%;
	-moz-perspective-origin-y : 50%;
	perspective : 1200px;
}

.owl-fade-out {
	z-index: 10;
	-webkit-animation: fadeOut .7s both ease;
	-moz-animation: fadeOut .7s both ease;
	animation: fadeOut .7s both ease;
}

.owl-fade-in {
	-webkit-animation: fadeIn .7s both ease;
	-moz-animation: fadeIn .7s both ease;
	animation: fadeIn .7s both ease;
}

.owl-backSlide-out {
	-webkit-animation: backSlideOut 1s both ease;
	-moz-animation: backSlideOut 1s both ease;
	animation: backSlideOut 1s both ease;
}

.owl-backSlide-in {
	-webkit-animation: backSlideIn 1s both ease;
	-moz-animation: backSlideIn 1s both ease;
	animation: backSlideIn 1s both ease;
}

.owl-goDown-out {
	-webkit-animation: scaleToFade .7s ease both;
	-moz-animation: scaleToFade .7s ease both;
	animation: scaleToFade .7s ease both;
}

.owl-goDown-in {
	-webkit-animation: goDown .6s ease both;
	-moz-animation: goDown .6s ease both;
	animation: goDown .6s ease both;
}

.owl-fadeUp-in {
	-webkit-animation: scaleUpFrom .5s ease both;
	-moz-animation: scaleUpFrom .5s ease both;
	animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
	-webkit-animation: scaleUpTo .5s ease both;
	-moz-animation: scaleUpTo .5s ease both;
	animation: scaleUpTo .5s ease both;
}

.owl-controls {
	width: 100%;
	float: left;
	text-align: center;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	margin:0; 
}

.owl-controls .owl-buttons div {
	display: none;
}

.owl-controls .owl-page {
	width: auto;
	float: none;
	display: block;
	margin: 0;
	display: inline-block;
	zoom: 1;
	*display: inline;
}

.owl-controls .owl-page span {
	display: block;
	width: 18px;
	height: 6px;
	background: #ccc;
	border: none;
	margin: 0 3px;
	padding: 0;
	text-indent: -9999px;
	border-radius:4px;
}

.owl-controls .owl-page:hover span {
	background:#3f56f5;
	color: #FFFFFF;
}

.owl-controls .owl-page.active span {
	filter: Alpha(Opacity=100);
	/*IE7 fix*/
	opacity: 1;
	background: #3f56f5;
	box-shadow: none;
	color: #FFFFFF;
}


.navigation {
	width: 100%;
	float: left;
}

.navigation a {
	line-height:.5em;
	z-index: 10;
	cursor: pointer;
	text-indent:-99999px;
	position: absolute;
	top:50%;
	margin:-45px 0 0 0;
}

.navigation a:hover {
	text-decoration:none;
}

.navigation a:before {
	font: normal normal bold 14px/2 FontAwesome;
	font-family:"FontAwesome";
	font-size:44px;
	color:#3f56f5;
	display:block;
	text-indent:0;
	position: absolute;
	top:0;
	z-index: 10;
	cursor: pointer;
	opacity:1;
}

.navigation a.previous {
	left:20px;
}

.navigation a.previous:before {
	content:"\f104";
	left:0;
}

.navigation a.next {
	right:20px;
}

.navigation a.next:before {
	content:"\f105";
	right:0;
}


.container {
	width:100%;
	max-width:1000px;
	padding:0 40px;
	margin:0 auto;
}

.slider-main {
	width:100%;
	float:left;
	position:relative;
	text-align:center;
	margin:40px 0 0 0;
}

.slider-main h2 {
	font-size:24px;
	padding-bottom:20px;
	font-weight:800;
	color:#FFFFFF
}

.slider-main p {
	font-size:17px;
	line-height:1.4em;
	color:#FFFFFF
}

.slider-bg {
	width:100%;
	float:left;
	text-align:center;
	position:relativer;
}

.slider-bg ul {
	width:100%;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}

.slider-bg ul li {
	width:100%;
	margin:0;
	padding:0;
}

.slider-bg .box {
	width:90%;
	background:#3f56f5;
	padding:25px 35px;
	margin:10% 5%;
	border-radius:2px;
}

 

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- downloaded from xhtmlteam.com -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OWL Demo Slider</title>
    <link href="css/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.png">
    <link rel="shortcut icon" href="favicon.ico">

</head>
<body>

<div class="slider-main">
<div class="container">

	<h1>Owl Carousel <strong>Responsive Single Item Slider</strong></h1>

    <div class="slider-bg">
    <ul id="owl-slide" class="owl-carousel">
    
    <li class="item">
    <div class="box">
    <h2><strong>Slide 1</strong></h2>
    <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>
    </div>
    </li>
    
    <li class="item">
    <div class="box">
    <h2><strong>Slide 2</strong></h2>
    <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>
    </div>
    </li>
    
    <li class="item">
    <div class="box">
    <h2><strong>Slide 3</strong></h2>
    <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>
    </div>
    </li>
    </ul>
    
    <div class="navigation">
    <a class="previous prevcustom">Previous</a>
    <a class="next nextcustom">Next</a>
    </div>
    </div>

</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script>
	$(document).ready(function() {
	var owl = $("#owl-slide");
	owl.owlCarousel({
	navigation : true,
	autoPlay : false,
	slideSpeed : 300,
	paginationSpeed : 400,
	singleItem : false,
	items : 1,
	itemsDesktop : [1260,1],
	itemsDesktopSmall : [1024,1],
	itemsTablet : [1023,1],
	itemsTabletSmall : [767,1],
	itemsMobile : [639,1],
	loop : true
	});

	// Custom Navigation Events
	$(".nextcustom").click(function(){
	owl.trigger('owl.next');
	})
	$(".prevcustom").click(function(){
	owl.trigger('owl.prev');
	})
	}); 
</script>	

</body>
</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