Card slider

I Need Help
1

Hi @MDS, I saw your way of making card slider. So I think everyone in this forum will appreciate if you share it :slight_smile:

2

@PeteSharp maybe you could help. I saw your ways of making swiper with code editor, but I would like to make an post loop like this and style it. So that’s why I can not use Code Editor option(static)

image
image1722×970 275 KB

image
image512×828 35 KB

Page header:


html,
bloc-4 {
position: relative;
height: 100%;
}

        bloc-4 {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }

        .swiper-container {
          width: 100%;
          height: 100%;
        }

        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
      </style>

Page footer:

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
3

it would be better if you uploaded .blocs file here :slight_smile:

4

Hi @Abzal

Sorry never saw your post before. The structure you have isn’t right. You can’t have the columns and rows in there.

But you can put cards inside each slide div and style on the canvas no problems. I do it all the time.

5

Thx!
I did it somehow. Can you share example?