No transitions easy slider

Hey Antonio,

Thank you for the inquiry.

We updated the script and the style modifications a bit so that they only apply on desktop view:

Script:

function next_slide_on_image_click() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    if (window.matchMedia("(min-width: 1024px)").matches) { // Apply only for screens wider than 1024px
        (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');

CSS:

@media only screen and (min-width: 1024px) {
  .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;
  }
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

To remove the highlight or focus outlines, try to add this css code:

#top .av-control-minimal .avia-slideshow-arrows a, #top .av-control-minimal .avia-slideshow-arrows a:before {
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

Best regards,
Ismael

Hi,
Glad Ismael could help, 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