Streaming live at 10am (PST)

How to create full screen news slider


#1

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)


#2

Any ideas Nelson? @PixelGeek :slight_smile:


#3

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:


#4

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:


#5

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!


#6

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)


#8

Such a great post to know different useful information.