Skip to content

Instantly share code, notes, and snippets.

@Nav-Appaiya

Nav-Appaiya/index.html

Created August 28, 2023 23:13
Show Gist options
  • Save Nav-Appaiya/82d5a0e5fe5c07a7f77100db3e05931a to your computer and use it in GitHub Desktop.
Save Nav-Appaiya/82d5a0e5fe5c07a7f77100db3e05931a to your computer and use it in GitHub Desktop.
Download ZIP
Owl Carousel - YouTube Style
Raw
index.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>
Raw
script.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>']
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
Raw
style.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}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment