How to create full screen news slider

[cuhpajo (Joe)]

If I wanted to make something similar to this design-

News App

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)

[cuhpajo (Joe)]

Any ideas Nelson? @PixelGeek

[Siton_Systems (Ezra Siton)]

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:

• VH: https://webflow.com/blog/how-and-why-to-use-vh-and-vw-in-webflow

[Tutorial] How to make hero section always fill browser window

If you guys/gals are wondering how to have your hero section FILL perfectly in the browser viewport no matter the height of the browser window (usually it is 800px, but some monitors are taller) like in these screenshots below: Taller monitor or browser window: [image] Smaller monitor or browser window (notice the icon on the bottom sticking to the bottom): [image] Method #1 While CSS is typically not very adept at working with browser height (because of document vs. window heights), we can…

[Siton_Systems (Ezra Siton)]

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”

How To Create an Overlay

Text Blocks Over Image | CSS-Tricks

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

- YouTube

[cuhpajo (Joe)]

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!

[Siton_Systems (Ezra Siton)]

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

Design & manage CMS content in Webflow - Webflow University Courses

** No filter feature for the slider yet

Randomize

Randomize is “build in” (For collection list):
https://webflow.com/feature/random-dynamic-list-sorting

For slider you find her the direction:

External Image

@waldo would this then affect all other sliders on my site?

Filter by date range

New Feature: Relative Date Filtering

As a follow-up to custom dynamic list ranges, you can now filter dynamic lists using a start date of “Today,” (i.e., the day a person views them). [image] This lets you create dynamic lists and pages that update automatically over time. So, you could create lists of events for “today” or “next week,” or highlight your top blog posts from “last year.” Even better, if you filter by automatic fields like “created on,” your dynamic list will update automatically as your clients add and change ite…

https://university.webflow.com/article/filtering-collection-lists

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

https://university.webflow.com/article/filtering-collection-lists

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)

[Muslims365 (Muslims)]

Such a great post to know different useful information.