-
AuthorPosts
-
August 30, 2022 at 12:16 pm #1363188
Good afternoon,
I’ve been seraching on the forum but couldn’t find a solution for this problem :
I am building a new page on https://www.neon-pro.it/nuova-home-2022/
On the content slider appearing under “Come possiamo aiutarvi” I would need:
– to have a fixed height for all the slides (I tried some custom css codes I found in some topics, even deleting the browser cache but it doesn’t work)
– to have arrows on the left and right side of the slides instead of the little arrows on the upper right corner
– (if possible) to have the slides with two alternate background colors (one red, one purple, one red, one purple, etc.)Thanks a lot.
August 30, 2022 at 3:20 pm #1363215This is how we would like the content slider to look:
Thanks.
- This reply was modified 2 years, 2 months ago by neon2020.
August 31, 2022 at 10:54 am #1363329Hi again. Any help on this topic is really appreciated…
Thanks a lot in advance.September 2, 2022 at 8:57 am #1363578Hi,
Sorry for the delay. You can use this script to apply a uniform height to the slides.
// custom script: set min height to slider function ava_custom_script_set_min_height() { ?> <script type="text/javascript"> (function($) { $(document).ready(function() { // Get an array of all element heights function setSlideHeight(element) { var elementHeights = element.map(function() { return $(this).height(); }).get(); // Math.max takes a variable number of arguments // <code>apply</code> is equivalent to passing each height as an argument var maxHeight = Math.max.apply(null, elementHeights); // Set each height to the max height element.height(maxHeight); } $(window).on( 'debouncedresize', function() { var slider = $('.avia-content-slider-inner'); var slider_wrap = slider.find('.slide-entry-wrap'); var slides = slider_wrap.find('.slide-entry'); setSlideHeight(slides); }); }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'ava_custom_script_set_min_height', 9999 );
To apply alternate background colors to the slides, add this code.
.avia-content-slider .slide-entry-wrap .slide-entry:nth-child(odd) { background-color: red; }
Best regards,
IsmaelSeptember 2, 2022 at 11:53 am #1363608Ok, the alternate background works perfectly. The only problem is that now I see an alternate background also on the partner/logo element below: https://www.neon-pro.it/nuova-home-2022
Is there a way we can apply it just to the content slider and not to the partner/logo element?
Thank you very much.September 2, 2022 at 12:59 pm #1363619Hi,
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
.avia-logo-element-container.avia-content-slider .slide-entry-wrap .slide-entry:nth-child(2n+1) { background: none; }
Regards,
YigitSeptember 3, 2022 at 7:53 am #1363707Thanks a lot. It is fine.
September 3, 2022 at 10:43 am #1363723 -
AuthorPosts
- You must be logged in to reply to this topic.