Streaming live at 10am (PST)

How to create full screen news slider

If I wanted to make something similar to this design-

What would I need to do?

I can’t seem to get my header nav, inside of a slider mask, and then have the slider show news stories/CMS items as the background with an overlay title.

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Any ideas Nelson? @PixelGeek :slight_smile:

Cool Effect. No way to solve the swipe up blur - without custom code. Remember this is an APP (To get the same native mobile look you need a lot of custom code).

Regular swipe Slider - you can use webflow Slider - or slider with more options like: Slick / Swiper / Owl / flickity (Search in the forum a lot of slick examples/Q)

Also the heading change + dots animation is custom code.

If you only need full screen slider - try this:

And the text in the bottom of the screen most of the time solved by “position: absolute;” - trick (parent relative) - like this (Inspect element / or try this free template to learn the style - the BOXes is with this idea):
http://tile-design-template.webflow.io/

This effect also called "OVERLAY"
https://www.w3schools.com/howto/howto_css_overlay.asp

Last - the header-nav is not inside the slider - but with this trick/idea (Fixed) - or Absolute if you dont want the sticky:

You’re the man!! Thanks so much for the help - got it working now!

Now just need to figure out how to randomize, limit to certain dates, and only show each item once in the slideshow each day.

My site: http://4g345g4g45g45.webflow.io/

Thanks Siton!

1 Like

Thanks. If my answer solve your issue please close this topic (For future searches). The idea of randomize and so on is separate issue (You can add separate Q)

Quick review:

filtering

** No filter feature for the slider yet

Randomize

Randomize is “build in” (For collection list):

For slider you find her the direction:

Filter by date range


Only show one item per day - “CMS limit items”

Only show on item per day (built in- CMS) - for the slider widget - no way by the UI to filter (only custom code - anyway its weird to create slider only with one slide)

Such a great post to know different useful information.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.