Product Block Carousel Arrows

Description

• change product block static image to carousel with arrows
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Hover on Page where you use Product Blocks > Click Gear icon

#1.2. Click Advanced > Paste this code

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

<!-- 07.26c24v4 Product Block Carousel Arrows -->
<script>
  window.ProductBlockCarouselConfig = {
    fadeDuration: 500,
    arrowIconSize: 18,
    circleSize: 40,
    arrowColor: '#ffffff',
    circleColor: 'rgba(0,0,0,0.5)',
    edgeOffset: 10,
    enableWheel: true,
    enableKeyboard: true,
    imageWidth: 1000
  };
</script>
<script src="https://code.beaverhero.com/productblock/0726c24v4productblockcarousel.js"></script>

#2. Customize

#2.1. To change arrows color/black background, change line 07, line 08

arrowColor: '#ffffff',
    circleColor: 'rgba(0,0,0,0.5)',

#2.2. To change arrow, black circle size, change line 05, line 06

arrowIconSize: 18,
    circleSize: 40,

#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 Product Blocks) > Add a Block > Choose Markdown

Then add this code into Markdown Block

<script>
  window.ProductBlockCarouselConfig = {
    fadeDuration: 500,
    arrowIconSize: 18,
    circleSize: 40,
    arrowColor: '#ffffff',
    circleColor: 'rgba(0,0,0,0.5)',
    edgeOffset: 10,
    enableWheel: true,
    enableKeyboard: true,
    imageWidth: 1000
  };
</script>
<script src="https://code.beaverhero.com/productblock/0726c24v4productblockcarousel.js"></script>