Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 1, 2025 at 7:40 am #1490831
    koomo

    Hi,
    As the title says, I would like to have on easy slider arrow navigation on desktop and dot navigation on mobile.

    I have tried this, but it doesn’t work. Any idea? Thank you.

    /* Hide dot navigation on desktop devices */
    @media only screen and (min-width: 768px) {
    .custom-slider-nav .avia-slideshow-dots {
    display: none !important;
    }
    }

    /* Hide arrow navigation on mobile devices */
    @media only screen and (max-width: 767px) {
    .custom-slider-nav .avia-slideshow-arrows a {
    display: none !important;
    }
    /* Optional: Ensure the dots are visible on mobile if they were hidden by another setting */
    .custom-slider-nav .avia-slideshow-dots {
    display: block !important;
    }
    }

    November 1, 2025 at 2:31 pm #1490847
    Mike

    Hey koomo,
    Please note that the css above has the custom class custom-slider-nav, probably the thread that you found  the css at instructs to add the custom class to the element, if you have not done so, please do, or remove custom-slider-nav from the css.
    If you still have issues, please link to your test page so we can examine.

    Best regards,
    Mike

    November 2, 2025 at 6:45 am #1490863
    koomo

    Hi Mike,
    Thank you very much. I removed custom-slider-nav

    But dot not showing on mobile with

    /* Hide dot navigation on desktop devices */
    @media only screen and (min-width: 768px) {
    .avia-slideshow-dots {
    display: none !important;
    }
    }

    /* Hide arrow navigation on mobile devices */
    @media only screen and (max-width: 767px) {
    .avia-slideshow-arrows a {
    display: none !important;
    }
    /* Optional: Ensure the dots are visible on mobile if they were hidden by another setting */
    .avia-slideshow-dots {
    display: block !important;
    }
    }

    November 4, 2025 at 1:29 am #1490903
    Ismael

    Hi,

    Thank you for the update.

    This is not working because only the navigation arrows are enabled. Try to edit the slider element and make sure that the Styling > Navigation Controls > Slider Navigation Elements is set to Navigation arrows and dots. Let us know the result.

    Best regards,
    Ismael

    November 4, 2025 at 7:36 am #1490906
    koomo

    Hi Ismael.
    Perfect. Thank you always.

    November 4, 2025 at 10:04 am #1490911
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Easy slider arrow on desktop and dot navigation on mobile [solved]’ is closed to new replies.