Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 8, 2021 at 5:04 pm #1328243
    fabian_stricker

    Dear Kriesi support team,

    I have created a content slider that uses “dots navigation” between slides (in line with the overall website design). For hand-held devices, I need the user to be able to swipe between slides back and forth, but I would like to retain the dots nav bar atop the content slider. From what I’ve found in the support forum here (https://kriesi.at/support/topic/swipe-the-content-slider-on-the-phone/), we can either choose swipable arrow navigation or non-swipable dots navigation.

    Is there a way or workaround to use dots with swiping?

    November 9, 2021 at 8:39 am #1328312
    Ismael

    Hey fabian_stricker,

    Thank you for the inquiry.

    The navigation dots are actually disabled on mobile devices by default but swiping should still be possible even if the navigations are not visible. If you want the dots to still display on mobile view, you can use this css code.

    @media only screen and (max-width: 767px) {
    .responsive #top .avia-slideshow-controls a {
        display: inline-block;
    }
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    November 9, 2021 at 12:02 pm #1328332
    fabian_stricker

    Hi Ismael,

    Thanks for your reply. I cannot reproduce a content slider with navigation dots that can be swiped. Can you provide a link to a working example or take a look at my website shared in private data, please?

    November 12, 2021 at 4:28 am #1328715
    Ismael

    Hi,

    Thank you for the update.

    Looks like the site contains an older version (4.8.2) of the theme, which is why the swipe triggers are not working properly. In the latest version, the swipe triggers or touch controls are automatically applied to the sliders on mobile view. The script can be found in the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js around line 370.

    //if its a desktop browser add arrow navigation, otherwise add touch nav
    		if(!this.isMobile)
    		{
    			this.$slider.avia_keyboard_controls();
    		}
    		else
    		{
    			this.$slider.avia_swipe_trigger();
    		}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after upgrading the theme to the latest version (4.8.7.2).

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.