Responsive Product Slider

Community resources Show & Tell
1

Hi all, here’s a product slider I created in Webflow: http://www.thispattern.com/slider/demoslider

I had to add a bit of custom code in the end, but most of it is Webflow power! :muscle:

Shout if you want to use it in your website or template. :wink:

4 Likes
2

Hey @steynv, that is pretty nice! Good job. Webflow is very powerful in that it lets you combine the ease of design + the ability to add that custom code :slight_smile:

3

Indeed! Thanks @cyberdave!

4

How did you get the custom dots on the bottom? Or was that custom code? :grinning::+1:

5

Hi @VladimirVitaliyevich, that was custom code via an embed. Here’s a good post on how to do that: Edit Slider arrows and buttons - #2 by bartekkustra - General - Forum | Webflow

I used this code to style it:

<div class="w-embed">
        <style>
          .w-slider-dot {
            background: #F5F7F8;
            border: 2px solid #50535D;
            height: 16px;
            width: 16px;
            vertical-align: middle;
            margin-left:7px;
            margin-right:7px;
          }
          .w-slider-dot.w-active {
            border: 2px solid #F5F7F8;
            background: #50535D;
            height: 23px;
            width: 23px;
          }
        </style>
      </div>
1 Like