Deslizador de la tarjeta de la moda con la lengüeta-como navegación

Vista prévia

Descripción

Un deslizador de la tarjeta de moda con una pestaña de navegación que permite al usuario deslizarse entre las tarjetas haciendo clic en las pestañas. Construido con JavaScript, CSS/CSS3 y SVG clip-path.

Funcionamiento

La estructura HTML del control deslizante de la tarjeta.

<div class="slider">

<div class="card">


<div class="card__contents">



<div class="card__title">Card 1</div>



<div class="card__body">




<p>Card 1 Content</p>



</div>



<div class="card__next">next →</div>


</div>


<div class="card__shadow">



<div class="card__shadow-inner"></div>


</div>


<div class="card__index">1</div>

</div>

<div class="card">


<div class="card__contents">



<div class="card__title">Card 2</div>



<div class="card__body">




<p>Card 2 Content</p>



</div>



<div class="card__next">next →</div>


</div>


<div class="card__shadow">



<div class="card__shadow-inner"></div>


</div>


<div class="card__index">2</div>

</div>

<div class="card">


<div class="card__contents">



<div class="card__title">Card 3</div>



<div class="card__body">




<p>Card 3 Content</p>



</div>



<div class="card__next">next →</div>


</div>


<div class="card__shadow">



<div class="card__shadow-inner"></div>


</div>


<div class="card__index">3</div>

</div>

<div class="card">


<div class="card__contents">



<div class="card__title">Card 4</div>



<div class="card__body">




<p>Card 4 Content</p>



</div>



<div class="card__next">next →</div>


</div>


<div class="card__shadow">



<div class="card__shadow-inner"></div>


</div>


<div class="card__index">4</div>

</div>

<div class="card">


<div class="card__contents">



<div class="card__title">Card 5</div>



<div class="card__body">




<p>Card 5 Content</p>



</div>


</div>


<div class="card__shadow">



<div class="card__shadow-inner"></div>


</div>


<div class="card__index">5</div>

</div>
</div>

Las reglas de CSS/CSS3 necesarias para el control deslizante de la tarjeta.

.phone {

background: white;

height: 100%;

max-width: 360px;

overflow: hidden;

position: relative;

width: 100%;
}

.card {

height: 100%;

position: absolute;

text-align: center;

transition: transform 300ms;

width: 100%;
}

.card:nth-child(2) { transform: translateX(100%); }

.card:nth-child(3) { transform: translateX(100%); }

.card:nth-child(4) { transform: translateX(100%); }

.card:nth-child(5) { transform: translateX(100%); }

.card__contents {

align-items: center;

display: flex;

flex-direction: column;

height: 100%;

position: absolute;

top: 0;

width: 100%;
}

.card:nth-child(1) .card__contents { background: #fff; }

.card:nth-child(2) .card__contents {

background: #C9F9E1;

-webkit-clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%);

clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%);
}

.card:nth-child(3) .card__contents {

background: #F9C9C7;

-webkit-clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%);

clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%);
}

.card:nth-child(4) .card__contents {

background: #F9F0C7;

-webkit-clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%);

clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%);
}

.card:nth-child(5) .card__contents {

background: #E6C9F9;

-webkit-clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%);

clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%);
}

.card__title {

font-weight: 800;

font-size: 2em;

margin-top: 20px;
}

.card__body {

margin-top: 20px;

max-width: 200px;
}

.card__input {

background: transparent;

border: 0;

border-bottom: 2px solid black;

font-size: 1em;

outline: none !important;
}

.card__input:focus { border-width: 4px; }

.card__radio {

margin-right: 10px;

vertical-align: baseline;
}

.card__check { margin-right: 10px; }

.card__next {

-webkit-tap-highlight-color: transparent;

bottom: 20px;

cursor: pointer;

margin-top: 50px;

position: absolute;

right: 20px;

user-select: none;
}

.card__shadow {

overflow: hidden;

pointer-events: none;

position: absolute;

top: 0;

width: 10%;
}

.card__shadow-inner {

box-shadow: inset 0 0 6px rgba(50,50,50,.12);

height: calc(100% + 15px);

left: -15px;

position: relative;

top: -15px;

width: calc(100% + 15px);
}

.card:nth-child(1) .card__shadow { height: 0; }

.card:nth-child(2) .card__shadow { height: 20%; }

.card:nth-child(3) .card__shadow { height: 40%; }

.card:nth-child(4) .card__shadow { height: 60%; }

.card:nth-child(5) .card__shadow { height: 80%; }

.card__index {

align-items: center;

cursor: pointer;

display: flex;

height: 20%;

justify-content: center;

position: absolute;

text-align: center;

width: 10%;

z-index: 1;
}

.card:nth-child(1) .card__index { top: 0; }

.card:nth-child(2) .card__index { top: 20%; }

.card:nth-child(3) .card__index { top: 40%; }

.card:nth-child(4) .card__index { top: 60%; }

.card:nth-child(5) .card__index { top: 80%; }

El JavaScript para activar el deslizador de la tarjeta.

const cards = document.querySelectorAll('.card'),



nexts = document.querySelectorAll('.card__next'),



ixs = document.querySelectorAll('.card__index');

nexts.forEach((next, i) => {

next.addEventListener('click', function() {


cards[i + 1].style.transform = 'none';

});
});

ixs.forEach((index, i) => {

index.addEventListener('click', () => {


for (let j = ixs.length - 1; j > i; j--) {



cards[j].style.transform = 'translateX(100%)';


}


console.log(i);

})
});