How to disable navigation arrows when in mobile?

[wyykphotos]

I've just started using fancybox and been trying to learn the ins and outs.

In the fancyapps guide there is code for the dynamic pages for instances of carousel:

Fancybox.bind("[data-fancybox]", {
Carousel: {
Toolbar: {
display: {
left: ["counter"],
middle: [],
right: ["thumbs", "close"],
},
},
breakpoints: {
"(min-width: 768px)": {
Toolbar: {
display: {
left: ["counter"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["autoplay", "thumbs", "close"],
},
},
},
},
},
});

However it looks like I can only add Arrows: false, under the carousel and not the toolbar. Is there a way that arrows can be disabled in the first instance (mobile / small screens) and still work in the desktop versions?

[fancyapps]

Hi,

Sorry, I didn't understand your comment, but you simply set Arrows: true when arrows are needed and Arrows:false when they are not needed:

Fancybox.bind('[data-fancybox]', {
  Carousel: {
    Arrows: false,
    Toolbar: {
      display: {
        left: ['counter'],
        middle: [],
        right: ['thumbs', 'close'],
      },
    },
    breakpoints: {
      '(min-width: 768px)': {
        Arrows: true,
        Toolbar: {
          display: {
            left: ['counter'],
            middle: [
              'zoomIn',
              'zoomOut',
              'toggle1to1',
              'rotateCCW',
              'rotateCW',
              'flipX',
              'flipY',
            ],
            right: ['autoplay', 'thumbs', 'close'],
          },
        },
      },
    },
  },
})

https://jsbin.com/zibiredexe/edit?html,output

[wyykphotos]

Hi,

Thanks for your help! I was able to get the code up and running. I think my problem was that I used Carousel: { } twice, once in the initial script and once again in the mid-width code. I'm guessing using it twice doesn't work or isn't allowed. Either that or I used one too many or little { } pairings. In any case thank you again!

Fancybox.bind("[data-fancybox]", {

Carousel: {
Arrows: false,
Toolbar: {
display: {

    left: ["counter"],
    
    right: ["autoplay", "thumbs", "close"],
  },
},
Zoomable: {
  
  Panzoom: {
    clickAction: "iterateZoom",
    Scale: 2,
  },
},

breakpoints: {
'(min-width: 768px)': {
!!!Carousel: { and } at the end
Arrows: true,
Toolbar: {
display: {

    left: ["counter"],
    
    right: ["zoomIn", "zoomOut", "autoplay", "thumbs", "close"],
  },
},
Zoomable: {
  
  Panzoom: {
    clickAction: "iterateZoom",
    Scale: 2,
  },
    },
  },
},

},
});