Concept carousel with some basic functions such as auto play. See: Chrome, Safari and firefox (bug)
A Pen by Marco Barría on CodePen.
| { | |
| "permissions": { | |
| "allow": [ | |
| "Bash(dir:*)", | |
| "Bash(pnpm --filter @org/ui add:*)", | |
| "Bash(pnpm --filter @org/lib add:*)", | |
| "Bash(pnpm lint:*)", | |
| "Bash(pnpm add:*)", | |
| "Bash(pnpm --filter app-admin add -D eslint-config-prettier)", | |
| "Bash(pnpm --filter app-public add -D eslint-config-prettier)", |
| <div class="carousel"> | |
| <div class="carousel__control"> | |
| </div> | |
| <div class="carousel__stage"> | |
| <div class="spinner spinner--left"> | |
| <div class="spinner__face js-active" data-bg="#27323c"> | |
| <div class="content" data-type="iceland"> | |
| <div class="content__left"> | |
| <h1>ICELAND<br><span>EUROPE</span></h1> | |
| </div> |
| <div class="slider-wrap"> | |
| <div id="card-slider" class="slider"> | |
| <div class="slider-item"> | |
| <div class="animation-card_image"> | |
| <img src="https://uznayvse.ru/images/stories2016/uzn_1460039478.jpg" alt=""> | |
| </div> | |
| <div class="animation-card_content"> | |
| <h4 class="animation-card_content_title title-2">Charlize Theron 1</h4> | |
| <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p> | |
| <p class="animation-card_content_city">New York, NY</p> |
Concept carousel with some basic functions such as auto play. See: Chrome, Safari and firefox (bug)
A Pen by Marco Barría on CodePen.
That's quite a title, eh?
I did it all over again, and I liked this one a lot more than the other one (http://codepen.io/edmundojr/pen/eNPJVW).
What do you think?
A Pen by Edmundo Santos on CodePen.
| <div class="console">Console</div> | |
| <div class="video-thumbs-frame"> | |
| <ul class="video-thumbs position-1" current-thumb="1" start-x="" dragging="false"> | |
| <li class="video-thumb thumb-1 active" index="1" youtube="https://www.youtube.com/embed/9KkKyHUw4f4?autoplay=1&showinfo=0"> | |
| <div class="video-thumb-wrapper"> | |
| <div class="video-thumb-overlay"><img class="video-play-icon" src="http://katehummer.com/drewmachak/img/icons/play-alt.svg"></div> | |
| <div class="video-info-container"> | |
| <article class="video-thumb-title">I'm Your President </article> | |
| <article class="video-thumb-subtitle"> Drew Machak</article> |
| <section> | |
| <div class="customer-feedback"> | |
| <div class="container text-center"> | |
| <div class="row"> | |
| <div class="col-sm-offset-2 col-sm-8"> | |
| <div> | |
| <h2 class="section-title">What Clients Say</h2> | |
| </div> | |
| </div><!-- /End col --> | |
| </div><!-- /End row --> |
Just trying out the CSSTransitionGroup add-on!
A Pen by Andy Pagès on CodePen.