[snippet_preview_vc code="{``settings``:{``resources``:`{``}`,``title``:``Responsive Blog Card Slider``},``code``:{``html``:``%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fnormalize%2F5.0.0%2Fnormalize.min.css%22%3E%0A%0A%20%20%3Clink%20rel%3D'stylesheet'%20href%3D'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FSwiper%2F4.3.5%2Fcss%2Fswiper.min.css'%3E%0A%3Cdiv%20class%3D%22blog-slider%22%3E%0A%20%20%3Cdiv%20class%3D%22blog-slider__wrp%20swiper-wrapper%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22blog-slider__item%20swiper-slide%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__img%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fres.cloudinary.com%2Fmuhammederdem%2Fimage%2Fupload%2Fv1535759872%2Fkuldar-kalvik-799168-unsplash.jpg%22%20alt%3D%22%22%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__content%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22blog-slider__code%22%3E26%20December%202021%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__title%22%3ELorem%20Ipsum%20Dolor%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__text%22%3ELorem%20ipsum%20dolor%20sit%20amet%20consectetur%2C%20adipisicing%20elit.%20Recusandae%20voluptate%20repellendus%20magni%20illo%20ea%20animi%3F%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%20class%3D%22blog-slider__button%22%3EREAD%20MORE%3C%2Fa%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22blog-slider__item%20swiper-slide%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__img%22%3E%0A%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fres.cloudinary.com%2Fmuhammederdem%2Fimage%2Fupload%2Fv1535759871%2Fjason-leung-798979-unsplash.jpg%22%20alt%3D%22%22%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__content%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22blog-slider__code%22%3E26%20December%202021%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__title%22%3ELorem%20Ipsum%20Dolor2%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__text%22%3ELorem%20ipsum%20dolor%20sit%20amet%20consectetur%2C%20adipisicing%20elit.%20Recusandae%20voluptate%20repellendus%20magni%20illo%20ea%20animi%3F%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%20class%3D%22blog-slider__button%22%3EREAD%20MORE%3C%2Fa%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%0A%20%20%20%20%3Cdiv%20class%3D%22blog-slider__item%20swiper-slide%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__img%22%3E%0A%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fres.cloudinary.com%2Fmuhammederdem%2Fimage%2Fupload%2Fv1535759871%2Falessandro-capuzzi-799180-unsplash.jpg%22%20alt%3D%22%22%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__content%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22blog-slider__code%22%3E26%20December%202021%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__title%22%3ELorem%20Ipsum%20Dolor%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22blog-slider__text%22%3ELorem%20ipsum%20dolor%20sit%20amet%20consectetur%2C%20adipisicing%20elit.%20Recusandae%20voluptate%20repellendus%20magni%20illo%20ea%20animi%3F%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%20class%3D%22blog-slider__button%22%3EREAD%20MORE%3C%2Fa%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22blog-slider__pagination%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cscript%20src%3D'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js'%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FSwiper%2F4.3.5%2Fjs%2Fswiper.min.js'%3E%3C%2Fscript%3E``,``js``:``var%20swiper%20%3D%20new%20Swiper('.blog-slider'%2C%20%7B%0A%20%20spaceBetween%3A%2030%2C%0A%20%20effect%3A%20'fade'%2C%0A%20%20loop%3A%20true%2C%0A%20%20mousewheel%3A%20%7B%0A%20%20%20%20invert%3A%20false%20%7D%2C%0A%0A%20%20%2F%2F%20autoHeight%3A%20true%2C%0A%20%20pagination%3A%20%7B%0A%20%20%20%20el%3A%20'.blog-slider__pagination'%2C%0A%20%20%20%20clickable%3A%20true%20%7D%20%7D)%3B``,``css``:``%40import%20url(%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DFira%2BSans%3A400%2C500%2C600%2C700%2C800%22)%3B%0A*%20%7B%0A%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%0Abody%20%7B%0A%20%20background-color%3A%20%23FFE53B%3B%0A%20%20background-image%3A%20linear-gradient(147deg%2C%20%23FFE53B%200%25%2C%20%23fd3838%2074%25)%3B%0A%20%20min-height%3A%20100vh%3B%0A%20%20font-family%3A%20%22Fira%20Sans%22%2C%20sans-serif%3B%0A%20%20display%3A%20flex%3B%0A%7D%0A%0A.blog-slider%20%7B%0A%20%20width%3A%2095%25%3B%0A%20%20position%3A%20relative%3B%0A%20%20max-width%3A%20800px%3B%0A%20%20margin%3A%20auto%3B%0A%20%20background%3A%20%23fff%3B%0A%20%20box-shadow%3A%200px%2014px%2080px%20rgba(34%2C%2035%2C%2058%2C%200.2)%3B%0A%20%20padding%3A%2025px%3B%0A%20%20border-radius%3A%2025px%3B%0A%20%20height%3A%20400px%3B%0A%20%20transition%3A%20all%200.3s%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20992px)%20%7B%0A%20%20.blog-slider%20%7B%0A%20%20%20%20max-width%3A%20680px%3B%0A%20%20%20%20height%3A%20400px%3B%0A%20%20%7D%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider%20%7B%0A%20%20%20%20min-height%3A%20500px%3B%0A%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20margin%3A%20180px%20auto%3B%0A%20%20%7D%0A%7D%0A%40media%20screen%20and%20(max-height%3A%20500px)%20and%20(min-width%3A%20992px)%20%7B%0A%20%20.blog-slider%20%7B%0A%20%20%20%20height%3A%20350px%3B%0A%20%20%7D%0A%7D%0A.blog-slider__item%20%7B%0A%20%20display%3A%20flex%3B%0A%20%20align-items%3A%20center%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__item%20%7B%0A%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%7D%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__img%20img%20%7B%0A%20%20opacity%3A%201%3B%0A%20%20transition-delay%3A%200.3s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%20%7B%0A%20%20opacity%3A%201%3B%0A%20%20transform%3A%20none%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(1)%20%7B%0A%20%20transition-delay%3A%200.3s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(2)%20%7B%0A%20%20transition-delay%3A%200.4s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(3)%20%7B%0A%20%20transition-delay%3A%200.5s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(4)%20%7B%0A%20%20transition-delay%3A%200.6s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(5)%20%7B%0A%20%20transition-delay%3A%200.7s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(6)%20%7B%0A%20%20transition-delay%3A%200.8s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(7)%20%7B%0A%20%20transition-delay%3A%200.9s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(8)%20%7B%0A%20%20transition-delay%3A%201s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(9)%20%7B%0A%20%20transition-delay%3A%201.1s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(10)%20%7B%0A%20%20transition-delay%3A%201.2s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(11)%20%7B%0A%20%20transition-delay%3A%201.3s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(12)%20%7B%0A%20%20transition-delay%3A%201.4s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(13)%20%7B%0A%20%20transition-delay%3A%201.5s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(14)%20%7B%0A%20%20transition-delay%3A%201.6s%3B%0A%7D%0A.blog-slider__item.swiper-slide-active%20.blog-slider__content%20%3E%20*%3Anth-child(15)%20%7B%0A%20%20transition-delay%3A%201.7s%3B%0A%7D%0A.blog-slider__img%20%7B%0A%20%20width%3A%20300px%3B%0A%20%20flex-shrink%3A%200%3B%0A%20%20height%3A%20300px%3B%0A%20%20background-image%3A%20linear-gradient(147deg%2C%20%23fe8a39%200%25%2C%20%23fd3838%2074%25)%3B%0A%20%20box-shadow%3A%204px%2013px%2030px%201px%20rgba(252%2C%2056%2C%2056%2C%200.2)%3B%0A%20%20border-radius%3A%2020px%3B%0A%20%20transform%3A%20translateX(-80px)%3B%0A%20%20overflow%3A%20hidden%3B%0A%7D%0A.blog-slider__img%3Aafter%20%7B%0A%20%20content%3A%20%22%22%3B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%200%3B%0A%20%20left%3A%200%3B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A%20100%25%3B%0A%20%20background-image%3A%20linear-gradient(147deg%2C%20%23fe8a39%200%25%2C%20%23fd3838%2074%25)%3B%0A%20%20border-radius%3A%2020px%3B%0A%20%20opacity%3A%200.8%3B%0A%7D%0A.blog-slider__img%20img%20%7B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A%20100%25%3B%0A%20%20object-fit%3A%20cover%3B%0A%20%20display%3A%20block%3B%0A%20%20opacity%3A%200%3B%0A%20%20border-radius%3A%2020px%3B%0A%20%20transition%3A%20all%200.3s%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__img%20%7B%0A%20%20%20%20transform%3A%20translateY(-50%25)%3B%0A%20%20%20%20width%3A%2090%25%3B%0A%20%20%7D%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20576px)%20%7B%0A%20%20.blog-slider__img%20%7B%0A%20%20%20%20width%3A%2095%25%3B%0A%20%20%7D%0A%7D%0A%40media%20screen%20and%20(max-height%3A%20500px)%20and%20(min-width%3A%20992px)%20%7B%0A%20%20.blog-slider__img%20%7B%0A%20%20%20%20height%3A%20270px%3B%0A%20%20%7D%0A%7D%0A.blog-slider__content%20%7B%0A%20%20padding-right%3A%2025px%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__content%20%7B%0A%20%20%20%20margin-top%3A%20-80px%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20padding%3A%200%2030px%3B%0A%20%20%7D%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20576px)%20%7B%0A%20%20.blog-slider__content%20%7B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%7D%0A%7D%0A.blog-slider__content%20%3E%20*%20%7B%0A%20%20opacity%3A%200%3B%0A%20%20transform%3A%20translateY(25px)%3B%0A%20%20transition%3A%20all%200.4s%3B%0A%7D%0A.blog-slider__code%20%7B%0A%20%20color%3A%20%237b7992%3B%0A%20%20margin-bottom%3A%2015px%3B%0A%20%20display%3A%20block%3B%0A%20%20font-weight%3A%20500%3B%0A%7D%0A.blog-slider__title%20%7B%0A%20%20font-size%3A%2024px%3B%0A%20%20font-weight%3A%20700%3B%0A%20%20color%3A%20%230d0925%3B%0A%20%20margin-bottom%3A%2020px%3B%0A%7D%0A.blog-slider__text%20%7B%0A%20%20color%3A%20%234e4a67%3B%0A%20%20margin-bottom%3A%2030px%3B%0A%20%20line-height%3A%201.5em%3B%0A%7D%0A.blog-slider__button%20%7B%0A%20%20display%3A%20inline-flex%3B%0A%20%20background-image%3A%20linear-gradient(147deg%2C%20%23fe8a39%200%25%2C%20%23fd3838%2074%25)%3B%0A%20%20padding%3A%2015px%2035px%3B%0A%20%20border-radius%3A%2050px%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20box-shadow%3A%200px%2014px%2080px%20rgba(252%2C%2056%2C%2056%2C%200.4)%3B%0A%20%20text-decoration%3A%20none%3B%0A%20%20font-weight%3A%20500%3B%0A%20%20justify-content%3A%20center%3B%0A%20%20text-align%3A%20center%3B%0A%20%20letter-spacing%3A%201px%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20576px)%20%7B%0A%20%20.blog-slider__button%20%7B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%7D%0A%7D%0A.blog-slider%20.swiper-container-horizontal%20%3E%20.swiper-pagination-bullets%2C%20.blog-slider%20.swiper-pagination-custom%2C%20.blog-slider%20.swiper-pagination-fraction%20%7B%0A%20%20bottom%3A%2010px%3B%0A%20%20left%3A%200%3B%0A%20%20width%3A%20100%25%3B%0A%7D%0A.blog-slider__pagination%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20z-index%3A%2021%3B%0A%20%20right%3A%2020px%3B%0A%20%20width%3A%2011px%20!important%3B%0A%20%20text-align%3A%20center%3B%0A%20%20left%3A%20auto%20!important%3B%0A%20%20top%3A%2050%25%3B%0A%20%20bottom%3A%20auto%20!important%3B%0A%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__pagination%20%7B%0A%20%20%20%20transform%3A%20translateX(-50%25)%3B%0A%20%20%20%20left%3A%2050%25%20!important%3B%0A%20%20%20%20top%3A%20205px%3B%0A%20%20%20%20width%3A%20100%25%20!important%3B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%7D%0A%7D%0A.blog-slider__pagination.swiper-pagination-bullets%20.swiper-pagination-bullet%20%7B%0A%20%20margin%3A%208px%200%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__pagination.swiper-pagination-bullets%20.swiper-pagination-bullet%20%7B%0A%20%20%20%20margin%3A%200%205px%3B%0A%20%20%7D%0A%7D%0A.blog-slider__pagination%20.swiper-pagination-bullet%20%7B%0A%20%20width%3A%2011px%3B%0A%20%20height%3A%2011px%3B%0A%20%20display%3A%20block%3B%0A%20%20border-radius%3A%2010px%3B%0A%20%20background%3A%20%23062744%3B%0A%20%20opacity%3A%200.2%3B%0A%20%20transition%3A%20all%200.3s%3B%0A%7D%0A.blog-slider__pagination%20.swiper-pagination-bullet-active%20%7B%0A%20%20opacity%3A%201%3B%0A%20%20background%3A%20%23fd3838%3B%0A%20%20height%3A%2030px%3B%0A%20%20box-shadow%3A%200px%200px%2020px%20rgba(252%2C%2056%2C%2056%2C%200.3)%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20768px)%20%7B%0A%20%20.blog-slider__pagination%20.swiper-pagination-bullet-active%20%7B%0A%20%20%20%20height%3A%2011px%3B%0A%20%20%20%20width%3A%2030px%3B%0A%20%20%7D%0A%7D``}}"]