Gallery Reel Scroll Bar

Description

• adding horizontal scroll bar to Gallery Slideshow Reel
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Slideshow: Reel

#1.2. Hover on Page where you use Reel > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c15v4 Gallery Reel Scroll Bar -->
<script>
window.GalleryReelScrollBarConfig = {
  reelSelector: '.gallery-reel',
  trackWidth: '40%',
  trackHeight: '4px',
  trackColor: 'rgba(0, 0, 0, 0.12)',
  trackRadius: '4px',
  thumbWidthPercent: 20,
  thumbColor: '#111111',
  thumbRadius: '4px',
  spaceAbove: '30px',
  spaceBelow: '0px',
  hitPadding: '16px',   // invisible padding around the track to enlarge the drag/click area
  draggable: true,
  dragSpeed: 1,         // higher = fewer pixels needed per slide step
  hideOnMobile: false,
  mobileBreakpoint: 768
};
</script>
<script src="https://code.beaverhero.com/reel/0726c15v4reelhorizontalscrollbar.js"></script>

#2. Customize

#2.1. To change scroll bar style, change these lines

trackHeight: '4px',
  trackColor: 'rgba(0, 0, 0, 0.12)',
  trackRadius: '4px',
  thumbWidthPercent: 20,
  thumbColor: '#111111',
  thumbRadius: '4px',
  spaceAbove: '30px',
  spaceBelow: '0px',
  hitPadding: '16px',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Slideshow Reel) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
window.GalleryReelScrollBarConfig = {
  reelSelector: '.gallery-reel',
  trackWidth: '40%',
  trackHeight: '4px',
  trackColor: 'rgba(0, 0, 0, 0.12)',
  trackRadius: '4px',
  thumbWidthPercent: 20,
  thumbColor: '#111111',
  thumbRadius: '4px',
  spaceAbove: '30px',
  spaceBelow: '0px',
  hitPadding: '16px',   // invisible padding around the track to enlarge the drag/click area
  draggable: true,
  dragSpeed: 1,         // higher = fewer pixels needed per slide step
  hideOnMobile: false,
  mobileBreakpoint: 768
};
</script>
<script src="https://code.beaverhero.com/reel/0726c15v4reelhorizontalscrollbar.js"></script>