-
AuthorPosts
-
November 18, 2024 at 1:50 pm #1471571
Hi,
I would like that the next image in the easy slider get by click in the image.
Could yo help me?
Thanks advance,BR,
Antonio.
November 19, 2024 at 7:43 am #1471616the crux is – if you have links on your images – they will interfere with prev – next navigation.
If no links are assigned to the images, then it is possible to have left side prev – right side next.if you got no additional links on the images but buttons inside the slide we can have next slide for image click.
November 19, 2024 at 10:02 am #1471620Hi Guenni,
Yes, is only a slider images we don’t need links.
The idea is remove the next prevue arrows and only advance to next images when click on the image.
Could you help me to do that?
Many thanks!BR,
Antonio.
November 19, 2024 at 10:44 am #1471621if you only have a slideshow – without buttons and without links on the slides – you can have left side image: prev – and right side image : next
only by css:
(the navigation arrows must be selected as navigation controls – but we do not show them).avia-slideshow-arrows.avia-slideshow-controls { height: 100% !important; width: 100% !important; display: block; position: absolute; top: 0; left: 0; } #top .avia-slideshow-arrows a { width: 50% !important; height: 100%; top: 0; margin:0 !important; padding: 0 !important; opacity: 0 !important; } #top .avia-slideshow-arrows a.prev-slide { left: 0; } #top .avia-slideshow-arrows a.next-slide { right: 0; }
if you like to have that arrows – we must have that css in addition:
(and remove the opacity : 0 above)#top .avia-slideshow-arrows a.prev-slide:before { text-align: left; } #top .avia-slideshow-arrows a.next-slide:before { text-align:right; } #top .avia-slideshow-arrows a:before { top: 50%; width: 30px; height: 60px; } #top .avia-slideshow-arrows a.prev-slide:before { left: 20px; padding-left: 20px } #top .avia-slideshow-arrows a.next-slide:before { right: 20px; left: auto; padding-right: 20px }
see css solution in action : https://webers-testseite.de/easy-slider-navigation/
but if you have buttons inside those slides we have to do it via child-theme functions.php:
( without the css above – but without prev next option – but you can use buttons on sliders )function next_slide_on_image_click() { ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { (function($){ $('.avia-slide-wrap img').click(function() { $(this).closest('.avia-slideshow').find('.avia-slideshow-arrows a.next-slide').trigger('click'); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'next_slide_on_image_click');
November 19, 2024 at 3:21 pm #1471651Hi Guenni,
Look great!!
Many thanks!BR,
Antonio.
November 19, 2024 at 5:43 pm #1471673Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Easy Slider next image when click’ is closed to new replies.