Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Blog Card Slider
<div class="blog-slider">
<div class="blog-slider__wrp swiper-wrapper">
<div class="blog-slider__item swiper-slide">
<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg" alt="">
</div>
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
<a href="#" class="blog-slider__button">READ MORE</a>
</div>
</div>
<div class="blog-slider__item swiper-slide">
<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<a href="#" class="blog-slider__button">READ MORE</a>
</div>
</div>
<div class="blog-slider__item swiper-slide">
<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg" alt="">
</div>
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<a href="#" class="blog-slider__button">READ MORE</a>
</div>
</div>
</div>
<div class="blog-slider__pagination"></div>
</div>

Responsive Blog Card Slider

Responsive slider for featured blog posts. Also can use for other things like card slider. Built with Swiper slider.

A Pen by Muhammed Erdem on CodePen.

License.

var swiper = new Swiper('.blog-slider', {
spaceBetween: 30,
effect: 'fade',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
<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=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #fd3838 74%);
min-height: 100vh;
font-family: 'Fira Sans', sans-serif;
display: flex;
}
.blog-slider {
width: 95%;
position: relative;
max-width: 800px;
margin: auto;
background: #fff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 25px;
border-radius: 25px;
height: 400px;
transition: all .3s;
@media screen and (max-width: 992px) {
max-width: 680px;
height: 400px;
}
@media screen and (max-width: 768px) {
min-height: 500px;
height: auto;
margin: 180px auto;
}
@media screen and (max-height: 500px) and (min-width: 992px) {
height: 350px;
}
&__item {
display: flex;
align-items: center;
@media screen and (max-width: 768px) {
flex-direction: column;
}
&.swiper-slide-active {
.blog-slider__img {
img {
opacity: 1;
transition-delay: .3s;
}
}
.blog-slider__content {
> * {
opacity: 1;
transform: none;
@for $i from 0 to 15 {
&:nth-child(#{$i + 1}) {
transition-delay: $i * 0.1 + 0.3s;
}
}
}
}
}
}
&__img {
// width: 40%;
width: 300px;
flex-shrink: 0;
height: 300px;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
border-radius: 20px;
transform: translateX(-80px);
overflow: hidden;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
border-radius: 20px;
opacity: 0.8;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
border-radius: 20px;
transition: all .3s;
}
@media screen and (max-width: 992px) {
// width: 45%;
}
@media screen and (max-width: 768px) {
transform: translateY(-50%);
width: 90%;
}
@media screen and (max-width: 576px) {
width: 95%;
}
@media screen and (max-height: 500px) and (min-width: 992px) {
height: 270px;
}
}
&__content {
// width: 60%;
padding-right: 25px;
@media screen and (max-width: 992px) {
// width: 55%;
}
@media screen and (max-width: 768px) {
margin-top: -80px;
text-align: center;
padding: 0 30px;
}
@media screen and (max-width: 576px) {
padding: 0
}
> * {
opacity: 0;
transform: translateY(25px);
transition: all .4s;
}
}
&__code {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
&__title {
font-size: 24px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
&__text {
color: #4e4a67;
margin-bottom: 30px;
line-height: 1.5em;
}
&__button {
display: inline-flex;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
@media screen and (max-width: 576px) {
width: 100%;
}
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
&__pagination {
position: absolute;
z-index: 21;
right: 20px;
width: 11px!important;
text-align: center;
left: auto!important;
top: 50%;
bottom: auto!important;
transform: translateY(-50%);
@media screen and (max-width: 768px) {
transform: translateX(-50%);
left: 50%!important;
top: 205px;
width: 100%!important;
display: flex;
justify-content: center;
align-items: center;
}
&.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 8px 0;
@media screen and (max-width: 768px) {
margin: 0 5px;
}
}
.swiper-pagination-bullet {
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all .3s;
&-active {
opacity: 1;
background: #fd3838;
height: 30px;
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
@media screen and (max-width: 768px) {
height: 11px;
width: 30px;
}
}
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css" rel="stylesheet" />
@rohitkashyap8756

This comment has been minimized.

Copy link

rohitkashyap8756 commented Mar 29, 2019

js is not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.