Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                	<div class="container">
	<div class="mhn-slide owl-carousel">
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?paper">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Paper</h4>
					<p>Paper is a thin material produced by pressing together moist fibres of cellulose pulp derived from wood, rags or grasses, and drying them into flexible sheets.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?fire">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Fire</h4>
					<p>Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?nature">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Nature</h4>
					<p>Nature, in the broadest sense, is the natural, physical, or material world or universe. "Nature" can refer to the phenomena of the physical world, and also to life in general.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?video">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Video</h4>
					<p>Video is an electronic medium for the recording, copying, playback, broadcasting, and display of moving visual media.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?hiking">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Hiking</h4>
					<p>Hiking is the preferred term, in Canada and the United States, for a long, vigorous walk, usually on trails (footpaths), in the countryside, while the word walking is used for shorter, particularly urban walks.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?future">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Future</h4>
					<p>The future is the time after the present. Future or The Future may also refer to: Futures contract, a standardized financial contract; Future (programming) · Future tense, in grammar. Contents.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?music">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Music</h4>
					<p>Music is an art form and cultural activity whose medium is sound organized in time. The common elements of music are pitch rhythm dynamics (loudness and softness), and the sonic qualities of timbre and texture (which are sometimes termed the "color" of a musical sound).</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?money">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Money</h4>
					<p>Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts in a particular country or socio-economic context.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?happiness">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Happiness</h4>
					<p>In psychology, happiness is a mental or emotional state of well-being which can be defined by, among others, positive or pleasant emotions ranging from contentment to intense joy.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?nepal">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Nepal</h4>
					<p>Nepal is a landlocked central Himalayan country in South Asia. Nepal is divided into 7 states and 77 districts and 744 local units including 4 metropolises, 13 sub-metropolises, 246 municipal councils and 481 villages.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?love">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Love</h4>
					<p>Love encompasses a variety of different emotional and mental states, typically strongly and positively experienced, ranging from the deepest interpersonal affection to the simplest pleasure.</p>
				</div>
			</div>
		</div>
		<div class="mhn-item">
			<div class="mhn-inner">
				<img src="https://source.unsplash.com/600x400/?sports">
				<div class="mhn-img"><div class="loader-circle"><div class="loader-stroke-left"></div><div class="loader-stroke-right"></div></div></div>
				<div class="mhn-text">
					<h4>Sports</h4>
					<p>A sport is commonly defined as an athletic activity or skill and involves a degree of competition, such as tennis or basketball. Some games and many kinds of racing are called sports.</p>
				</div>
			</div>
		</div>
	</div>
</div>
              
            
!

CSS

              
                body{font-family:Roboto,'Open Sans',sans-serif}
@-webkit-keyframes L_circle_rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes L_circle_rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes L_stroke_rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes L_stroke_rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes L_stroke_left_grow{0%,100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}}@keyframes L_stroke_left_grow{0%,100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}}@-webkit-keyframes L_stroke_right_grow{0%,100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}50%{-webkit-transform:rotate(140deg);transform:rotate(140deg)}}@keyframes L_stroke_right_grow{0%,100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}50%{-webkit-transform:rotate(140deg);transform:rotate(140deg)}}.loader-circle{top:50%;left:50%;z-index:1;color:#444;margin-top:-1em;margin-left:-1em;position:absolute;-webkit-animation:L_circle_rotate 1.568s linear infinite both;animation:L_circle_rotate 1.568s linear infinite both}.loader-circle .loader-stroke-left:before,.loader-circle .loader-stroke-right:before,.loader-circle:before{content:'';display:block;border-style:solid;border-width:.21429em;border-color:currentColor}.loader-circle,.loader-circle .loader-stroke-left,.loader-circle .loader-stroke-left:before,.loader-circle .loader-stroke-right,.loader-circle .loader-stroke-right:before,.loader-circle:before{width:2em;height:2em;border-radius:50%;box-sizing:border-box}.loader-circle .loader-stroke-left:before,.loader-circle .loader-stroke-right{position:absolute;clip:rect(0 2em 2em 1em)}.loader-circle .loader-stroke-left,.loader-circle .loader-stroke-right:before{position:absolute;clip:rect(0 1em 2em 0)}.loader-circle:before{position:absolute;clip:rect(0 1.05em 1em .95em)}.loader-circle .loader-stroke-left,.loader-circle .loader-stroke-right,.loader-circle:before{-webkit-animation:L_stroke_rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:L_stroke_rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.loader-circle .loader-stroke-right:before{-webkit-animation:L_stroke_right_grow 1333ms cubic-bezier(.4,0,.2,1) infinite both;animation:L_stroke_right_grow 1333ms cubic-bezier(.4,0,.2,1) infinite both}.loader-circle .loader-stroke-left:before{-webkit-animation:L_stroke_left_grow 1333ms cubic-bezier(.4,0,.2,1) infinite both;animation:L_stroke_left_grow 1333ms cubic-bezier(.4,0,.2,1) infinite both}
.mhn-slide .mhn-item{width:100%;padding:10px}
.mhn-slide .mhn-inner{width:100%;height:100%;box-shadow:0 2px 10px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.26);border-radius:3px}
.mhn-slide .mhn-item img{display:none}
.mhn-slide .mhn-img{min-height:200px;overflow:hidden;height:100%;width:100%;color:white;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=) #eee no-repeat center/cover;position:relative}
.mhn-slide .mhn-text{text-align:center;padding:0 10px}
.mhn-slide .mhn-text h4{font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.mhn-slide .mhn-text p{max-height:4.5em;overflow:hidden}
.mhn-slide .owl-stage-outer{z-index:1}
.mhn-slide .owl-nav{color:#333;position:absolute;top:0;left:0;right:0;bottom:0}
.mhn-slide .owl-nav svg{color:currentColor}
.mhn-slide .owl-nav .disabled{display:none}
.mhn-slide .owl-prev,
.mhn-slide .owl-next{
	top:110px;
	z-index:2;
	width:40px;
	height:40px;
	padding:8px;
	margin-top:-20px;
	position:absolute;
	border-radius:50%;
	background-color:#fff;
	box-shadow:0 4px 4px rgba(0,0,0,.3),0 0 4px rgba(0,0,0,.2)
}
.mhn-slide .owl-prev{left:-10px}
.mhn-slide .owl-next{right:-10px}
              
            
!

JS

              
                $(function(){
	$('.mhn-slide').owlCarousel({
		nav:true,
		//loop:true,
		slideBy:'page',
		rewind:false,
		responsive:{
			0:{items:1},
			480:{items:2},
			600:{items:3},
			1000:{items:4}
		},
		smartSpeed:70,
		onInitialized:function(e){
			$(e.target).find('img').each(function(){
				if(this.complete){
					$(this).closest('.mhn-inner').find('.loader-circle').hide();
					$(this).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');
				}else{
					$(this).bind('load',function(e){
						$(e.target).closest('.mhn-inner').find('.loader-circle').hide();
						$(e.target).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');
					});
				}
			});
		},
		navText:['<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>','<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>']
	});
});
              
            
!
999px

Console