Streaming live at 10am (PST)

Can the slider element scale automatically?


#1

I am using a slider element with text in it. When the screen size gets too small the text gets cut off. The only way I found to fix it is to set a fixed height to the slider element, but that’s not working that well since different screens have different measurements.

Is there any way to make the slider element scale according to the elements within it?

Capture%2002
Capture


#2

adapt size

Hi. First, in other libraries (Like swiper, owl) this solved by JS (“adapt size”).

No way to solve this only by CSS. (The height of the parent “change” each time you move the slide by inline-style height="some-value").

Some mid-range solution

The easiest way to solve this - is to give the slider the “highest” slider size.

  1. Set mask height to “auto” thats it.
    http://site-ae5a37.webflow.io/

#3

Thanks @Siton_Systems. That makes sense.

Any chance you have a JS snippet I could put there to solve it?

Cheers


#4

If you can share your read-only link, I can send you an example


#5

Thanks @philippe!

https://preview.webflow.com/preview/protocol-international?preview=8e3567fddf644cd86a2c0f59d64f298d

It’s on the publications page


#6

Hey @philippe, did you get a chance to have a look?

Cheers :raised_hands:


#7

Still looking for a solution. Found the Slick carousel, but not sure if it’s possible to integrate it. Anyone tried it before and can help?

CC: @Siton_Systems @philippe @cyberdave

Thanks!


#8

Yes you could. Search on the forum for example (A little custom code + The slider will work only under publish html) + Anyway read slick docs + Try to make Codepen and learn this plugin

Try this (Or add separate Q):

https://forum.webflow.com/t/help-how-do-i-recreate-this-carousel-slider-and-navigation-effect/30960/16

And this is the most simple example (Of custom JS inside Webflow):


#9

Thanks @Siton_Systems. I Saw most of these examples before, yet I can’t seem to figure out how to move the /Slick folder into the project:

I can add pieces of code to the page head, and I can add an HTML embed in my design, but where do I add a complete folder? @samliew showed on another thread how to link a file from Github, but still it’s not clear how to embed a complete folder? Do I make a link to all files in the git?

To make it even more confusing, in @cyberdave’s example above, the slider works miraculously with no HTML embed module, just a section with two divs… there are only 2 links in the custom head code and that’s it. How does it work?


image

Thanks again for trying to help


#10

In general (For any js plugin out their):

  1. Add CSS.min cdn assets (Inside head tag) (what is CDN)
  2. Add JS.min cdn Assets (Before body) (Slick CDNs her)
  3. Add HTML correct markup/tree structure by webflow UI (And classes + sometimes atrributes)
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
  1. Initialize the plugin (Before body - and after [2] in the order) + wrap with Document Ready (Read her about doc ready -or- google it) + Remember to match the name of step 4 to step 3 (in this example “my-classjquery class selector)
    document.addEventListener("DOMContentLoaded", function() {
        $('.your-class').slick({
                   setting-name: setting-value
        });
    });
  • Dont load jquery (Webflow do this for you) + Endless bugs :slight_smile: if you load jquery twice + bad performance

That’s it. Now, publish your site and you see the slider working. Like i said before try first to work with codepen (To learn the idea) - then move to webflow.

Example:

--------- Again this is more for freelancer job to fix this (Hard to solve this by Forum if you don’t know little js). ----------


#11

THanks so much! Will give it a go.