JavaScript (jQuery)
$(function(){
$('.slider-item').eq(0).addClass('active');
var total = $('.slider-item').length;
var current = 0;
$('#moveRight').on('click', function(){
var next=current;
current= current+1;
setSlide(next, current);
});
$('#moveLeft').on('click', function(){
var prev=current;
current = current- 1;
setSlide(prev, current);
});
function setSlide(prev, next){
var slide= current;
if(next>total-1){
slide=0;
current=0;
}
if(next<0){
slide=total - 1;
current=total - 1;
}
$('.slider-item').eq(prev).removeClass('active');
$('.slider-item').eq(slide).addClass('active');
setTimeout(function(){
},800);
}
});
Html
<div class="slider-section">
<div class="slider main">
<div class="slider__nav">
<span id="moveLeft" class="slider__arrow">
<svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
</svg>
</span>
<span id="moveRight" class="slider__arrow">
<svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>
</span>
</div> <?php
$args = array('posts_per_page' => 3,);
$recent = new WP_Query($args);
while( $recent -> have_posts()) : $recent -> the_post();
?> <div class="slider-item slider-item--1">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="slider-item__image"><?php the_post_thumbnail( 'post_thumbnail' ); ?></div>
<div class="slider-item__info">
<div class="slider-item__container">
<h2 class="slider-item__subtitle"><?php the_category() ?> </h2>
<h1 class="slider-item__title"><?php the_title() ?></h1>
<p class="slider-item__description"><?php the_excerpt() ?></p>
</div>
</div>
</a>
</div> <?php endwhile; ?>
</div>
</div>
CSS
.slider-section {
margin: 0;
padding: 0;
width: 100%;
height: 550px;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}
.slider.main {
overflow: visible;
}
.slider {
width: 100%;
height: 100%;
display: flex;
max-width: 890px;
max-height: 540px;
overflow: visible;
position: absolute;
background: #fff;
}
.slider-item {
visibility: visible;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: flex-end;
-webkit-align-items: center;
-webkit-justify-content: flex-end;
position: relative;
/* background-color: #fff; */
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: absolute;
z-index: 0;
/* transition: 1s all ease-out; */
}
.slider-item__info {
height: auto;
display: flex;
justify-content: center;
flex-direction: column;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-flex-direction: column;
right: -50px;
margin: auto;
padding: 10px 40px;
width: 40%;
position: absolute;
background: #fff;
z-index: 1;
box-shadow: 0 0 10px 0 #dbdbdb;
visibility: hidden;
}
.slider-item__image {
width: 100%;
height: 100%;
align-self: flex-end;
flex-basis: 100%;
-webkit-align-self: flex-end;
-webkit-flex-basis: 100%;
position: relative;
/* transform: translateX(100%); */
/* transition: 1s all ease-in-out; */
}
.slider-item__subtitle {
letter-spacing: 3px;
font-size: 10px;
text-transform: uppercase;
margin: 0;
color: #7E7E7E;
font-weight: 700;
/* transform: translateY(25%); */
opacity: 0;
visibility: hidden;
/* transition: 1s all ease-in-out; */
}
.slider-item__title {
margin: 15px 0 0 0;
font-size: 44px;
line-height: 45px;
letter-spacing: 3px;
font-weight: 700;
color: #2C2C2C;
transform: translateY(25%);
opacity: 0;
visibility: hidden;
transition: 1s all ease-in-out;
}
.slider-item__description {
/* transform: translateY(25%); */
opacity: 0;
visibility: hidden;
transition: 1s all ease-out;
margin-top: 35px;
font-size: 13px;
color: #7e7e7e;
line-height: 22px;
margin-bottom: 35px;
}
.slider__nav {
position: absolute;
right: 10px;
z-index: 2;
background-color: #fff;
bottom: 10px;
}
.slider__icon {
display: inline-block;
vertical-align: middle;
width: 16px;
fill: #5d5d5d;
}
.slider__arrow {
cursor: pointer;
display: inline-block;
padding: 11px 15px;
position: relative;
}
.slider__arrow:nth-child(1):after {
content: '';
right: -3px;
position: absolute;
width: 1px;
background-color: #b0b0b0;
height: 14px;
top: 50%;
margin-top: -7px;
}
.active {
z-index: 1;
display: flex;
visibility: visible;
}
.active .slider-item__subtitle,
.active .slider-item__title,
.active .slider-item__description,
.active .slider-item__btn {
transform: translateY(0);
opacity: 1;
transition: 1s all ease-in-out;
visibility: visible;
}
.active .slider-item__image {
transition: 1s all ease-in-out;
transform: translateX(0);
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
z-index: 1;
}
.active .slider-item__info {
transition: 1s all ease-in-out;
transform: translateX(0);
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: forwards;
visibility: hidden;
z-index: 1;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
visibility: hidden;
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
visibility: hidden;
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@media (max-width: 425px) {
.slider.main {
padding: 0;
margin: 0;
}
.slider-item {
flex-direction: column;
}
.slider-item__info {
position: initial;
padding: 1rem;
width: 100%;
height: 100%;
border: 1px solid #bbb;
box-shadow: 1px 1px 1px 1px #bbb;
}
.slider-item__image img {
width: 100vw;
height: 225px;
}
}
@media (min-width: 768px) {
.slider.main {
width: 85%;
}
.slider-item__image img {
width: 100vw;
max-height: 550px;
}
}