Tagged: down arrow, fullwidth slider
-
AuthorPosts
-
April 18, 2015 at 11:18 pm #430775
Hi there,
I would really like to use a fullwidth easy slider and add a scroll down button at the bottom just like it is available in the color section or fullscreen slider. How do I do that?
Also, it would be great to see different button down design options as well as the ability to pace it everywhere on the site.
Thanks
- This topic was modified 9 years, 8 months ago by gentlemansgazette.
April 20, 2015 at 5:21 pm #431436Hi gentlemansgazette!
Try the fullscreen slider instead. It pretty much has the same look as the fullwidth slider and it has an option for a scroll down arrow.
You could add this to a codeblock element if you want to limit it’s height.
<style type = "text/css"> #fullscreen_slider_0 .avia-slideshow { height: 300px !important; } </style>
If you want to limit it’s height.
Best regards,
ElliottApril 20, 2015 at 8:58 pm #431595Well, the problem is I want to use the full page slider one some pages and the full width on others.
If I choose a fixed height, it will not scale across devices… So I would really appreciate an arrow down option for the full width one. It seems like it was forgotten for that element…
April 21, 2015 at 5:54 pm #432202Hi!
It would take a lot of time and code to implement. Consider creating a feature request here, https://kriesi.at/support/enfold-feature-requests/, and if it gets enough interest we will probably see an option get added in a future update.
Cheers!
ElliottApril 16, 2016 at 6:05 pm #615506Hi.
This topic is one year old but today I was also looking for a solution for that problem.
Here is my solution:1) Change the min-height of a section to a small number (e.g. 20px). I did it in the custom.css.
.avia-section {min-height: 20px;}2) Add a color-section after the slider
no min-height
no padding
no border
with scroll down arrowThe arrow is diplayed in the slider ;-)
- This reply was modified 8 years, 8 months ago by baucks.
April 19, 2016 at 12:02 am #616922April 20, 2016 at 5:20 pm #618507Baucks, this solution is just briljant … Thanks man!
April 22, 2016 at 6:06 am #619525July 30, 2016 at 5:42 pm #666843@baucks Thanx for sharing!
August 1, 2016 at 2:36 pm #667292August 29, 2016 at 4:27 am #678729@baucks, thanks for sharing. I had done the same earlier but didn’t change the minimum height of the section. So I went ahead and gave the section’s Custom CSS Class a name and used it. This way only the sections with the custom CSS class would change. So, if you gave your section Custom CSS Class the name special-section, the code changes to:
.special-section.avia-section {min-height: 20px;}
Regards,
- This reply was modified 8 years, 3 months ago by Tameez.
September 1, 2016 at 4:19 am #680428November 18, 2017 at 3:43 am #878345baucks, thank you so much for sharing this! I know that this post is quite old but it worked perfectly for me, too :)
November 18, 2017 at 8:32 am #878404Hi webWahine,
Thanks for confirming that the solution posted here still works :)
Best regards,
NikkoApril 4, 2021 at 9:26 am #1292184Hi everyone,
Thanks for sharing @baucks.
Still it works now 2021.June 3, 2021 at 2:52 pm #1303773Jup still works, but the content section leaves a white space (because of the min-height: 20px;}. When i set it to 0px, there is still a small white border visible. Can this be solved?
Thanks- This reply was modified 3 years, 6 months ago by wzshop.
June 3, 2021 at 3:16 pm #1303783Hi,
@wzshop please edit your Color Section element and go to Styling > Border and choose not to display borders. If that does not help, please post a link to your page :)Best regards,
YigitJune 3, 2021 at 3:25 pm #1303789Hi,
FYI the border option is not the issue here. I can’t provide you with a link or login credentials. I will try to solve this myself and get back here once I worked it out. If anyone else runs into this, please let me know;)
GreetingsJune 3, 2021 at 3:35 pm #1303794Ok, one thing that seems to work is setting a scrolldown arrow for the the content section below the full width easy slider.
Give that content section a custom CSS like:custom_scroll_down_arrow
Then in CSS something like:
#top .tw_scroll_down_arrow .scroll-down-link {top:-70px;}
Seems to work, but if anyone knows anything better let me know.
June 3, 2021 at 4:04 pm #1303809So that worked, but the scrolling went to the wrong section (of course).
What worked for me was setting the following css to the secttion:{min-height:0px;}
AND also setting the section height itself to exact pixels:
0px
Now any small white border is gone.
-
AuthorPosts
- You must be logged in to reply to this topic.