Cara Membuat Slider Swiper Card Responsive



Masih pada topik yang sama yaitu tentang Slider, namun pada topik kali ini saya akan membagikan slider yang cukup keren dan sangat cocok untuk jenis template dengan topik vCard atau Profile Card. Slider Swiper Card menggunkan JS Swiper jadi tanpa JS ini maka slider tidak akan jalan. Dibarengi dengan CSS transition tampilan membuat tampilannya semakin enak dipandang.

Penasaran cara pasangnya bagaimana, mari ikuti caranya di bawah ini

DEMO

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"/>

Letakkan script diatas di dalam code <head>.....</head>

<style>
.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;
}
.blog-slider__item {
  display: flex;
  align-items: center;
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: .3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
}
.blog-slider__img {
  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;
}
.blog-slider__img: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;
}
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all .3s;
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__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%);
}
.blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all .4s;
}
.blog-slider__code {
  color: #7b7992;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}
.blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.blog-slider__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}
.blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff!important;
  box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
  text-decoration: none;
  font-weight:bold;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all .3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fd3838;
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0!important;
}
.blog-slider__content {
  padding-right: 25px;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
}
@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .blog-slider__item {
    flex-direction: column;
  }
  .blog-slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider__img {
    height: 270px;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__content {
    padding: 0;
  }
  .blog-slider__img {
    width: 95%;
  }
  .blog-slider__button {
    width: 100%;
  }
}
</style>
Keterangan:
Silahkan sesuaikan CSS diatas dengan jenis template sobat

<script>
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>

<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://1.bp.blogspot.com/-j2usfiiHM1M/XvmKxkam3TI/AAAAAAAACPY/Iv4wucNxmGUff0WDE027yU_4HhvB_FuqwCLcBGAsYHQ/s1600/s1.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://3.bp.blogspot.com/-wsXkAwM-8LA/XvmKx8_e7HI/AAAAAAAACPg/iRigVA4jHi8gUiKuwDcAjKc99z40Qtd5gCLcBGAsYHQ/s1600/s2.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://3.bp.blogspot.com/-PJXD3Tf55aQ/XvmKx0fkREI/AAAAAAAACPc/Qec_oy-RVKUSoZcPT2TSWvzxv2SQNICLwCLcBGAsYHQ/s1600/s3.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>
Keterangan:
Silahkan sobat seuaikan isi teks serta url gambar yang dalam code HTML di atas

Demikian Cara Membuat Slider Swiper Card Responsive, mudah-mudahan dengan adanya artikel ini web/blog Anda akan terlihat lebih profesional jika memasangnya. Salam Blogger!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments