I builth another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when mouse hover and slide changes. Also all of them responsive.
A Pen by Muhammed Erdem on CodePen.
<div class="wrapper"> | |
<div class="background"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132206/news-slider/background.jpg" alt=""> | |
</div> | |
<div class="item-bg"></div> | |
<div class="news-slider"> | |
<div class="news-slider__wrp swiper-wrapper"> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">24</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-2.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">25</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-3.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">26</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-4.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">27</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-2.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">28</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-5.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
<div class="news-slider__item swiper-slide"> | |
<a href="#" class="news__item"> | |
<div class="news-date"> | |
<span class="news-date__title">29</span> | |
<span class="news-date__txt">May</span> | |
</div> | |
<div class="news__title"> | |
Lorem Ipsum Dolor Sit Amed | |
</div> | |
<p class="news__txt"> | |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
</p> | |
<div class="news__img"> | |
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-4.jpg" alt="news"> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="news-slider__ctr"> | |
<div class="news-slider__arrows"> | |
<button class="news-slider__arrow news-slider-prev"> | |
<span class="icon-font"> | |
<svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg> | |
</span> | |
</button> | |
<button class="news-slider__arrow news-slider-next"> | |
<span class="icon-font"> | |
<svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg> | |
</span> | |
</button> | |
</div> | |
<div class="news-slider__pagination"></div> | |
</div> | |
</div> | |
</div> | |
<svg hidden="hidden"> | |
<defs> | |
<symbol id="icon-arrow-left" viewBox="0 0 32 32"> | |
<title>arrow-left</title> | |
<path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path> | |
</symbol> | |
<symbol id="icon-arrow-right" viewBox="0 0 32 32"> | |
<title>arrow-right</title> | |
<path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path> | |
</symbol> | |
</defs> | |
</svg> |
I builth another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when mouse hover and slide changes. Also all of them responsive.
A Pen by Muhammed Erdem on CodePen.
var bg = document.querySelector('.item-bg'); | |
var items = document.querySelectorAll('.news__item'); | |
var item = document.querySelector('.news__item'); | |
function cLog(content) { | |
console.log(content) | |
} | |
if($(window).width() > 800) { | |
$(document).on("mouseover", ".news__item", function (_event, _element) { | |
var newsItem = document.querySelectorAll('.news__item'); | |
newsItem.forEach(function (element, index) { | |
element.addEventListener('mouseover', function () { | |
var x = this.getBoundingClientRect().left; | |
var y = this.getBoundingClientRect().top; | |
var width = this.getBoundingClientRect().width; | |
var height = this.getBoundingClientRect().height; | |
$('.item-bg').addClass('active'); | |
$('.news__item').removeClass('active'); | |
// $('.news__item').removeClass('active'); | |
bg.style.width = width + 'px'; | |
bg.style.height = height + 'px'; | |
bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
}); | |
element.addEventListener('mouseleave', function () { | |
$('.item-bg').removeClass('active'); | |
$('.news__item').removeClass('active'); | |
}); | |
}); | |
}); | |
} | |
var swiper = new Swiper('.news-slider', { | |
effect: 'coverflow', | |
grabCursor: true, | |
loop: true, | |
centeredSlides: true, | |
keyboard: true, | |
spaceBetween: 0, | |
slidesPerView: 'auto', | |
speed: 300, | |
coverflowEffect: { | |
rotate: 0, | |
stretch: 0, | |
depth: 0, | |
modifier: 3, | |
slideShadows: false | |
}, | |
breakpoints: { | |
480: { | |
spaceBetween: 0, | |
centeredSlides: true | |
} | |
}, | |
simulateTouch: true, | |
navigation: { | |
nextEl: '.news-slider-next', | |
prevEl: '.news-slider-prev' | |
}, | |
pagination: { | |
el: '.news-slider__pagination', | |
clickable: true | |
}, | |
on: { | |
init: function () { | |
var activeItem = document.querySelector('.swiper-slide-active'); | |
var sliderItem = activeItem.querySelector('.news__item'); | |
$('.swiper-slide-active .news__item').addClass('active'); | |
var x = sliderItem.getBoundingClientRect().left; | |
var y = sliderItem.getBoundingClientRect().top; | |
var width = sliderItem.getBoundingClientRect().width; | |
var height = sliderItem.getBoundingClientRect().height; | |
$('.item-bg').addClass('active'); | |
bg.style.width = width + 'px'; | |
bg.style.height = height + 'px'; | |
bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
} | |
} | |
}); | |
swiper.on('touchEnd', function () { | |
$('.news__item').removeClass('active'); | |
$('.swiper-slide-active .news__item').addClass('active'); | |
}); | |
swiper.on('slideChange', function () { | |
$('.news__item').removeClass('active'); | |
}); | |
swiper.on('slideChangeTransitionEnd', function () { | |
$('.news__item').removeClass('active'); | |
var activeItem = document.querySelector('.swiper-slide-active'); | |
var sliderItem = activeItem.querySelector('.news__item'); | |
$('.swiper-slide-active .news__item').addClass('active'); | |
var x = sliderItem.getBoundingClientRect().left; | |
var y = sliderItem.getBoundingClientRect().top; | |
var width = sliderItem.getBoundingClientRect().width; | |
var height = sliderItem.getBoundingClientRect().height; | |
$('.item-bg').addClass('active'); | |
bg.style.width = width + 'px'; | |
bg.style.height = height + 'px'; | |
bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
}); | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script> |
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext'); | |
html { | |
position: relative; | |
overflow-x: hidden!important; | |
} | |
body { | |
font-family: 'Quicksand', sans-serif; | |
} | |
a, a:hover { | |
text-decoration: none; | |
} | |
.icon { | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
stroke-width: 0; | |
stroke: currentColor; | |
fill: currentColor; | |
} | |
.background { | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
&:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%); | |
opacity: 0.9; | |
} | |
img { | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
pointer-events: none; | |
user-select: none; | |
} | |
} | |
.item-bg { | |
width: 300px; | |
height: 500px; | |
position: absolute; | |
top: 30px; | |
background: #fff; | |
border-radius: 10px; | |
box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
opacity: 0; | |
transition: all .3s; | |
left: -30px; | |
//left: 50%; | |
//transform: translateX(-50%); | |
&.active { | |
left: 0; | |
top: 0; | |
opacity: 1; | |
} | |
} | |
.news { | |
&-slider { | |
z-index: 2; | |
max-width: 1300px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 60px; | |
@media screen and (max-width: 1300px){ | |
max-width: 1000px; | |
} | |
@media screen and (max-width: 576px) { | |
margin-top: 45px; | |
} | |
&__wrp { | |
display: flex; | |
align-items: flex-start; | |
position: relative; | |
z-index: 2; | |
} | |
&__item { | |
width: 400px; | |
flex-shrink: 0; | |
//padding: 15px; | |
@media screen and (max-width: 992px) { | |
width: 340px; | |
} | |
&.swiper-slide { | |
opacity: 0; | |
pointer-events: none; | |
transition: all .3s; | |
} | |
&.swiper-slide-active, | |
&.swiper-slide-prev, | |
&.swiper-slide-next { | |
opacity: 1; | |
pointer-events: auto; | |
} | |
} | |
&__ctr { | |
position: relative; | |
z-index: 12; | |
} | |
&__arrow { | |
background: #fff; | |
border: none; | |
display: inline-flex; | |
width: 50px; | |
height: 50px; | |
justify-content: center; | |
align-items: center; | |
box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
border-radius: 50%; | |
position: absolute; | |
top: 50%; | |
z-index: 12; | |
cursor: pointer; | |
outline: none!important; | |
&:focus { | |
outline: none!important; | |
} | |
.icon-font { | |
display: inline-flex; | |
} | |
&.news-slider-prev { | |
left: 15px; | |
transform: translateY(-50%); | |
} | |
&.news-slider-next { | |
right: 15px; | |
transform: translateY(-50%); | |
} | |
} | |
&__pagination { | |
text-align: center; | |
margin-top: 50px; | |
// @media screen and (max-width: 576px) { | |
// margin-top: 50px; | |
// } | |
.swiper-pagination-bullet { | |
width: 13px; | |
height: 10px; | |
display: inline-block; | |
background: #fff; | |
opacity: .2; | |
margin: 0 5px; | |
border-radius: 20px; | |
transition: opacity .5s, background-color .5s, width .5s; | |
transition-delay: .5s, .5s, 0s; | |
} | |
.swiper-pagination-bullet-active { | |
opacity: 1; | |
background: #ffffff; | |
width: 100px; | |
transition-delay: 0s; | |
@media screen and (max-width: 576px) { | |
width: 70px; | |
} | |
} | |
} | |
} | |
&__item { | |
padding: 40px; | |
color: #fff; | |
border-radius: 10px; | |
display: block; | |
transition: all .3s; | |
@media screen and (min-width: 800px) { | |
&:hover { | |
color: #222222; | |
transition-delay: .1s; | |
//background: #fff; | |
//box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
.news-date,.news__title,.news__txt { | |
opacity: 1; | |
transition-delay: .1s; | |
} | |
.news__img { | |
box-shadow: none; | |
} | |
} | |
} | |
&.active { | |
color: #222222; | |
.news-date,.news__title,.news__txt { | |
opacity: 1; | |
} | |
.news__img { | |
box-shadow: none; | |
} | |
} | |
@media screen and (max-width: 992px) { | |
padding: 30px; | |
} | |
@media screen and (max-width: 576px) { | |
padding: 20px; | |
} | |
} | |
&-date { | |
padding-bottom: 20px; | |
margin-bottom: 20px; | |
border-bottom: 2px solid; | |
display: inline-block; | |
opacity: .7; | |
transition: opacity .3s; | |
@media screen and (max-width: 576px) { | |
margin-bottom: 10px; | |
display: inline-flex; | |
align-items: center; | |
padding-bottom: 0; | |
} | |
&__title { | |
display: block; | |
font-size: 32px; | |
margin-bottom: 10px; | |
font-weight: 500; | |
@media screen and (max-width: 576px) { | |
margin-right: 10px; | |
} | |
} | |
&__txt { | |
font-size: 16px; | |
} | |
} | |
&__title { | |
font-size: 25px; | |
font-weight: 500; | |
opacity: .7; | |
margin-top: 10px; | |
margin-bottom: 15px; | |
transition: opacity .3s; | |
@media screen and (max-width: 576px) { | |
font-size: 22px; | |
margin-bottom: 10px; | |
} | |
} | |
&__txt { | |
margin: 10px 0; | |
line-height: 1.6em; | |
font-size: 15px; | |
opacity: .7; | |
transition: opacity .3s; | |
} | |
&__img { | |
border-radius: 10px; | |
box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
height: 200px; | |
margin-top: 30px; | |
width: 100%; | |
transition: all .3s; | |
transform-origin: 0% 0%; | |
@media screen and (max-width: 576px) { | |
height: 180px; | |
margin-top: 20px; | |
} | |
img { | |
max-width: 100%; | |
border-radius: 10px; | |
height: 100%; | |
width: 100%; | |
} | |
} | |
} | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css" rel="stylesheet" /> |