Created
July 8, 2020 09:18
-
-
Save dinushchathurya/ddfb45ec58c28cbb0b789b2f74846d52 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<!------ Include the above in your HEAD tag ----------> | |
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> | |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> | |
<!------ Include the above in your HEAD tag ----------> | |
<!DOCTYPE html><html class=''> | |
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shamim539/pen/OxPXdv?depth=everything&order=popularity&page=13&q=vue+js&show_forks=false" /> | |
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> | |
<style class="cp-pen-styles">#carousel3d .carousel-3d-slide { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
text-align: center; | |
background-color: #fff; | |
padding: 10px; | |
-webkit-transition: all .4s; | |
transition: all .4s; | |
} | |
#carousel3d .carousel-3d-slide.current { | |
background-color: #333; | |
color: #fff; | |
} | |
#carousel3d .carousel-3d-slide.current span { | |
font-size: 20px; | |
font-weight: 500; | |
} | |
</style></head><body> | |
<div id="carousel3d"> | |
<carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000"> | |
<slide :index="0"> | |
<span class="title">Web Development</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="1"> | |
<span class="title">Web Design</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="2"> | |
<span class="title">You know</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="3"> | |
<span class="title">You know</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="4"> | |
<span class="title">You know</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="5"> | |
<span class="title">You know</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
<slide :index="6"> | |
<span class="title">You know</span> | |
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a> | |
</slide> | |
</carousel-3d> | |
</div> | |
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js'></script><script src='https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js'></script> | |
<script >new Vue({ | |
el: '#carousel3d', | |
data: { | |
slides: 7 | |
}, | |
components: { | |
'carousel-3d': Carousel3d.Carousel3d, | |
'slide': Carousel3d.Slide | |
} | |
}) | |
//# sourceURL=pen.js | |
</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment