Gallery Block Carousel Center Images

Description

• make middle image in gallery block bigger, other images smaller, some other tweak
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Gallery Block Slideshow & Enable this option

#1.2. Edit FIRST Image > Click Gear icon

#1.3. In Description, enter text: #center-img

#1.4. Hover on page where you use Gallery Block > Click Gear icon

#1.5. Click Advanced > Paste this code

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

<!-- 08.26c11v2 Gallery Block Carousel Center Images -->
<script>
window.GalleryCarouselCenterConfig = {
  loop: true,
  speed: 650,
  itemClickable: true,

  slidesPerViewDesktop: 2,
  slidesPerViewMobile: 1.3,
  spaceBetween: 120,
  sideScale: 0.72,
  activeScale: 1.12,
  imageAspectRatio: '',
  overlayColor: 'rgba(0,0,0,0.25)',

  arrowEdgeGap: '2vw',
  arrowSize: '44px',
  arrowBgColor: '#111111',
  arrowBgHoverColor: '#000000',
  arrowIconColor: '#ffffff',
  arrowIconHoverColor: '#ffffff',

  dotSize: '7px',
  dotColor: '',
  dotActiveColor: '',
  dotHoverColor: '',
};
</script>
<script src="https://code.beaverhero.com/galleryblock/0826c11v2galleryblockcenterimg.js"></script>

#2. Customize

#2.1. To change Arrows, Dots style, change line 16 – line 26

arrowEdgeGap: '2vw',
arrowSize: '44px',
arrowBgColor: '#111111',
arrowBgHoverColor: '#000000',
arrowIconColor: '#ffffff',
arrowIconHoverColor: '#ffffff',

dotSize: '7px',
dotColor: '',
dotActiveColor: '',
dotHoverColor: '',

#2.2. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown block under Gallery Block

Then use this code into Markdown

<script>
window.GalleryCarouselCenterConfig = {
  loop: true,
  speed: 650,
  itemClickable: true,

  slidesPerViewDesktop: 2,
  slidesPerViewMobile: 1.3,
  spaceBetween: 120,
  sideScale: 0.72,
  activeScale: 1.12,
  imageAspectRatio: '',
  overlayColor: 'rgba(0,0,0,0.25)',

  arrowEdgeGap: '2vw',
  arrowSize: '44px',
  arrowBgColor: '#111111',
  arrowBgHoverColor: '#000000',
  arrowIconColor: '#ffffff',
  arrowIconHoverColor: '#ffffff',

  dotSize: '7px',
  dotColor: '',
  dotActiveColor: '',
  dotHoverColor: '',
};
</script>
<script src="https://code.beaverhero.com/galleryblock/0826c11v2galleryblockcenterimg.js"></script>