Home
blogger
how to

How to make responsive slider card for blogger

How to make responsive slider card for blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to make responsive slider card for blogger.

What is The Slider Card?

 Slider Card is a Card which is on a card look but have the ability to be move between sliders in same place.

Benefits :-

  • Ui/Ux Design which is nice and very smooth.
  •  Very Responsive for all types and sizes of devices.
Let's Start
Demo

How to Make Responsive Slider Card :-

Step 1 :- Go To Blogger's Dashboard and.
Step 2 :- Create New Page or Post or widget.

For Pages Or Posts :-

Step 1 :- Click the pen button and press HTML view.
Step 2 :- Remove any codes then Copy and paste the following provided code 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wolvthemes/res-card-slider@main/style.css" />
  
<div class="wolv-slider">
  <div class="wolv-slider__wrp swiper-wrapper">

    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor2</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor 3</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
  </div>
  <div class="wolv-slider__pagination"></div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wolvthemes/res-card-slider@main/script.js"></script>

For Widget

Step 1 :- Go To Blogger's Dashboard and.
Step 2 :- Create New Widget where you want
Step 3 :- Paste The following codes.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wolvthemes/res-card-slider@main/style.css" />
  
<div class="wolv-slider">
  <div class="wolv-slider__wrp swiper-wrapper">

    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor2</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
    <div class="wolv-slider__item swiper-slide">
      <div class="wolv-slider__img">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvlEVpfnxDup4cgPv6FetNaWEGqigs8JMthGwuBIwFMPhnsWZfZpBsjOH2pOFf72SxHY1QVnE_gdpEwtBxUvS5Nxwu3LqlrPcwkOd4v5JuCq4l9iSD_rg_8sbU1RCEawf4HHJpwGkd5Qm/s900/20211003_133316.jpg" alt="">
      </div>
      <div class="wolv-slider__content">
        <span class="wolv-slider__date">26 December 2019</span>
        <div class="wolv-slider__title">Lorem Ipsum Dolor 3</div>
        <div class="wolv-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="wolv-slider__button">READ MORE</a>
      </div>
    </div>
    
  </div>
  <div class="wolv-slider__pagination"></div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wolvthemes/res-card-slider@main/script.js"></script>
Step 4 :- Click Save.

4 comments

  1. 👌
    • Thanks for your comment !
      Hope the article was nice and the tutorial was helpful.
  2. Super slider card buddy😊
    • Thanks for your great comment! hope the article was nice and the tutorial was helpful.