Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

    #1471616

    the 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.

    #1471620

    Hi 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.

    #1471621

    if 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');
    #1471651

    Hi Guenni,

    Look great!!
    Many thanks!

    BR,

    Antonio.

    #1471673

    Hi,
    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Easy Slider next image when click’ is closed to new replies.