Streaming live at 10am (PST)

Responsive Product Slider


#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:


#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 :slightly_smiling:


#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: http://forum.webflow.com/t/edit-slider-arrows-and-buttons/1656/2

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>

#6