Responsive Webpage with Carousel Like NetFlix/ Prime Video

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

Help everyone - I am creating about ten carousels on a page, to categorize some of my youtube video too, something similiar like Netflix design in slelecting a movie or Prime Video. I am having a horrible time on how to keep the carousels in the placement on the webpage, without over lapping my header and etc, while keeping it repsonsive. Appreciate any all feedback. Thank you
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by Pablo »

To be able to help you, I need to see what you have done.
Do you have a demo project?

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

For your dream to come true we need to get inside your dream.
Please submit a demo project so we can be inside the matrix of your project.
Last edited by wwonderfull on Tue Sep 29, 2020 3:46 pm, edited 1 time in total.
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

YOu guys are great, I appreciate your responsiveness. Only thing I have is a sloppy link to a draft page (See below):
Anything else I can supply or do prior let me know.

https://www.viralmarketing.tv/page13.html

THe carousels in red have just test videos in them and not to size, but you will see the three carousels over lap my top header section.

Appreciate your time and response.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

To Make The Carousel responsive and centered you can use below setting on carousel options.
Image

The carousel looks so weird as if if someone hovers everything becomes like solitary card. So from my perspective try to remake the carousel with a fresh start again and not triggering too much transition.

If you gave the .wbs file demo project could have helped you a lot.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by crispy68 »

It looks to me you have the YouTube videos in a layout grid (LayoutGrid2), but you just put the carousels on the page as a fixed size carousel with absolute positioning. You are mixing fixed layout and floating layout and that wont work. You simply need to set the carousels to full width and floating so it plays nice with the grid above or insert them into a layout grid.
User avatar
NDV
 
 
Posts: 136
Joined: Sun May 19, 2019 8:27 pm
Location: Ukraine
Contact:

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by NDV »

Try using the OWL Carousel extension, maybe it will help.
https://www.wysiwygwebbuilder.com/forum ... 42&t=89342
Download: https://yadi.sk/d/SRnny8znFl7I9w
https://t.me/webart42
I offer my services for website development in WYSIWYG Web Builder, HTML/CSS/JQuery.
Contact us on telegram @webart42
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

If you do have too many videos please do not crowd the carousel too much it makes it heavy bulky and uncomfortable for the users experience. And most importantly layout or flex grids are necessary for it to look and function responsive. Without a responsive site mobile users do not visit the site out of difficulty.

Instead of using carousel try using some cards they are responsive and also the card container has carousel too.

http://www.wysiwygwebbuilder.com/carousel.html
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

wwonderfull wrote: Tue Sep 29, 2020 3:56 pm

If you gave the .wbs file demo project could have helped you a lot.
I am following back on this, so much going with COVID19 in my world, thank you so much for the time and response. I don't want to seem unappreciative with delayed response.

How do I upload the WPS file? Since that would help more also.
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

NDV wrote: Thu Oct 01, 2020 7:05 pm Try using the OWL Carousel extension, maybe it will help.
https://www.wysiwygwebbuilder.com/forum ... 42&t=89342
Download: https://yadi.sk/d/SRnny8znFl7I9w
Thank you NDV I will look further into that. I cant imagine this being too difficult to create in one template to copy for a couple other pages.
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

wwonderfull wrote: Fri Oct 02, 2020 8:13 am If you do have too many videos please do not crowd the carousel too much it makes it heavy bulky and uncomfortable for the users experience. And most importantly layout or flex grids are necessary for it to look and function responsive. Without a responsive site mobile users do not visit the site out of difficulty.

Instead of using carousel try using some cards they are responsive and also the card container has carousel too.

http://www.wysiwygwebbuilder.com/carousel.html

Wwonderfull, what's your thought, that maybe I just need to just scrap the responsive site design??? It seems imperative with most using smartphones and ipads/tablets.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

well in my thoughts some times people sacrifice design over functionality and some times they compromise the functionality over the design in case of website building. So from my perspective if you want a modern website which looks cool both in desktop and smart phone then I suggest using layout grids and responsive card carousel and if you have many videos then I would suggest you use cards and put the video inside of the card and the card should be in a card container which you can make a carousel just like netflix. I already made those if you want you can send me your project and I'll try to fix it. You can contact me here https://go.crisp.chat/chat/embed/?websi ... abc687036d

This is how a video in a card which is inside a card container would look like. Note that you do not get the carousel left right arrows in card container only those dots for seeing more cards.

Image
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

Thank you in your continued help on this. I know it may seem simple.... as a first responder my time to work on this project during covid has been hard to complete unless I have a day or vacation which I am on now.

I am not familiar with the new "Card" option, any new training video or web pages to reference?

Wwonderful you have exactly the layout I am trying to create. I think I might complicating this, and the new "Card" option is what I need to start with. Is there a template already made for this?
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

dcaves2 wrote: Tue Jan 19, 2021 9:17 pm Thank you in your continued help on this. I know it may seem simple.... as a first responder my time to work on this project during covid has been hard to complete unless I have a day or vacation which I am on now.

I am not familiar with the new "Card" option, any new training video or web pages to reference?

Wwonderful you have exactly the layout I am trying to create. I think I might complicating this, and the new "Card" option is what I need to start with. Is there a template already made for this?
I have gotten your message this morning happy new year!
I have made a demo project for you if you want to adjust the video carousel you can use more breakpoints and on those breakpoint change the settings.

Here is the file: https://file.io/mVeee3KrWkbW
dcaves2
 
 
Posts: 7
Joined: Tue Sep 29, 2020 3:12 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by dcaves2 »

Oh thank you Wwonderful. Unfortunately, the link says its deleted. Did I not access in time? I saw your email also and unfortunately, I was not able to access it either. Thank you in advance....
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Responsive Webpage with Carousel Like NetFlix/ Prime Video

Post by wwonderfull »

It may have been for the delay but I have uploaded it again you can download it here https://gofile.io/d/ND4AnX
Post Reply