Forum Discussion
Adjusting Carousel Template
Hello! I found this great photo carousel template that I would love to use but I am having a difficult time customizing it.
As it currently exists, there are 15 photos, split up into 5 layers with 3 images each. It starts on the third layer showing photos 7, 8, and 9. The user can use the left and right arrows to move the carousel and show new images. There is an indicator on the bottom that shows which slide the user is on. There are motion paths to move the images between layers.
I only have 12 photos so I would like to adapt this by making it only 4 layers with 3 images each. However, I would like it to start with the first 3 pictures (1, 2, 3) rather than in the middle.
Can anyone provide some guidance on how to manipulate the motion paths, triggers, and layers to do this?
1 Reply
The modifications are fairly simple. You do not need to adjust any motion paths/animations; a few minor tweaks, hiding/deleting a few items, and a few position shifts. I’ve attached a modified project file that demonstrates one version of what you requested. Compare it to the original. I didn’t delete anything, but just hid or adjusted items as required.
https://360.articulate.com/review/content/59ecd963-14a9-4180-a00a-dbd9ed3e673e/review
Since I don’t know what direction you wanted to move, I just picked one. If you want the opposite, just start with the base project and make the adjustments to the other side of the images, indicators, and layers. If you have problems, just start with recreating the file I attached from the base project. Once you’ve worked out the changes to that, making other changes will be much easier.
The steps are as follows (for starting on layer Position 1 with 12 images on the right).
Base slide:
- To start at a specific location
- Change the first Show Layer trigger to Position 1 rather than 3
- To just show just 12 images, on the right side of the image array
- Open the Image Holder group
- Hide or delete the 3 images on the far left
- Note the Y-position for the group, listed under the Format tab
- Drag the entire group to the left so the last 3 images on the right align with the viewports on the slide (center over each opening)
- Ensure the Y-position of the group is the same as it started, or adjust manually
- You need only 4 indicators, so open the Indicators group
- Hide or delete Position 1 (left indicator) in the timeline
- Select the whole group and slide it to the left to visually recenter it (use arrow keys to just bump it, leaving Y-position unchanged)
Layers:
- Go to layer Position 5 to copy the navigation blocker
- Select the green hotspot covering the left arrow. Copy with CTRL-C
- Go to layer Position 4 to copy it here so navigation stops in position 4
- Click in the main slide area. Press CTRL-Shift-D to duplicate the hotspot in-place
- Go to layer Position 1 (repeat for each layer 1 to 4)
- Click on the Position # Icon in the timeline
- With icon selected, change slide zoom to 200% or so
- Carefully click one of the handles on the selected icon
- Use the arrow keys to recenter the green dot onto the leftmost grey indicator circle outline
- Count the number of key presses, or check the X-position to determine the shift amount
- Once positioned, repeat this step for layers 2 to 4, moving the green dot the same amount each time (about 12-13 pixels).
Variables:
- Open the Variable Panel to ensure the correct starting positions
- Change the default value of LastMoveNum from 3 to 1, to start on Layer 1
- Click OK to save
Preview or Publish the project to test.
I tested the steps, so they should work. If you want to move the other direction, just swap the directions (left for right, layer Position 4 and 5 for Position 2 and 1, starting on Position 5 rather than Position 1, LastMoveNum variable default to 5 instead of 1, etc.)
- To start at a specific location
