Smooth Transition Carousel (Reverse)

Description

smooth autoscroll carousel with list carousel, automatically reverses direction when scrolling to final item.
view demo – password: abc
buy me a coffee

1. Install Code

#1.1. First add Section > Choose Team > Choose Section with (i) icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.3. at Design > Choose Carousel

#1.4. at Elements > You can Enable Image or Image, Title, Button, anything what you want. But Image is required.

#1.5. at Content > Add your desired title, image, button url

#1.6. Hover on top right of Carousel Section > Click EDIT SECTION > at Anchor Link, enter word: smooth-transition-reverse

#1.7. Hover on Page where you use Carousel > Click Gear icon

#1.8. Click Advanced > Paste this code

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

<!-- 07.26c24v1 Smooth Transition Carousel (Reverse) -->
<script>
window.ReverseCarouselConfig = {
  sectionSelector: 'section[id*="smooth-transition-reverse"]',
  speed: 0.65,
  pauseOnHover: true
};
</script>
<script src="https://code.beaverhero.com/list/0726c24v1smoothtransitioncarouselreverse.js"></script>

#2. Customize

#2.1. To change speed of autoscroll, change line 05

speed: 0.65,

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

Add this code into Markdown

<script>
window.ReverseCarouselConfig = {
  sectionSelector: 'section[id*="smooth-transition-reverse"]',
  speed: 0.65,
  pauseOnHover: true
};
</script>
<script src="https://code.beaverhero.com/list/0726c24v1smoothtransitioncarouselreverse.js"></script>