Simple Fade in Slideshow

Description

• simple fade in slideshow with image blocks
• view demo – password: abc
• buy me a coffee

Update

• See update version (26-03-2026) in #2.4

#A. Install Code

#1. Personal/Basic Plan

#1.1. First, you can add some Image Blocks with syntax like this to ALT

##s01
or
##s02
or
##s03

for example, I have first slideshow with 3 Image Blocks, I will enter ##s01 to all three Image Blocks

 

or second slideshow with 2 Image Blocks, I will enter ##s03

#1.2. Next, add a Markdown Block on current page

#1.3. Paste this code into Markdown Block

<script src="https://code.beaverhero.com/imageblock/0226c25v4simpleslideshow.js"></script>

#2. Business Plan/higher

2.1. First, you can add some Image Blocks with syntax like this to ALT

##s01
or
##s02
or
##s03

for example, I have first slideshow with 3 Image Blocks, I will enter ##s01 to all three Image Blocks

or second slideshow with 2 Image Blocks, I will enter ##s03

#2.2. Hover on Page where you use Image Blocks > Click Gear icon

#2.3. Click Advanced > Paste this code

<!-- @tuanphan - Simple Fade in Slideshow -->
<script src="https://code.beaverhero.com/imageblock/0226c25v4simpleslideshow.js"></script>

#2.4. Replace code with this new code

• you can adjust timing easier
• fixed some problems with previous code
• View Demo – Pass: abc

<script>
window.tpFadeSlideshowSettings = {
  interval: 3000,
  transition: 'opacity 0.5s ease-in-out'
};
</script>
<script src="https://code.beaverhero.com/imageblock/0226c25v4simpleslideshowv2.js"></script>