Horizontal Panels Slideshow

Description

• view demo – password: abc

#1. Install Code

#1.1. First, hover on Page where you will use Slideshow > Click Gear icon

Click Advanced > Paste the code

<!-- Horizontal Panel Slideshow -->
<style>
  .custom-slideshow-wrapper {
  	--hp-slideshow-height: 75vh;
    --hp-slideshow-arrows-color: #fff;
    --hp-slideshow-arrows-background: rgba(0, 0, 0, 0.3);
    --hp-slideshow-arrows-circle-size: 44px;
    --hp-slideshow-arrows-size: 20px;
    --hp-slideshow-bullets-size: 10px;
  }
</style>
<script>
const horizontalSlideshowConfig = {
  effect: 'slide',
  direction: 'horizontal',
  autoplay: {
    enabled: true,
    delay: 3000,
    disableOnInteraction: false,
  },
  speed: 600,
  loop: true,
  navigation: {
    arrows: true,
  },
  pagination: {
    bullets: true,
    clickable: true,
  },
  slidesPerView: 1,
  spaceBetween: 0,
  centeredSlides: true,
  keyboard: true,
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://code.beaverhero.com/gallerys/hpslideshow.css"/>
<script src="https://code.beaverhero.com/gallerys/hpslideshow.js"></script>

and use this to Custom CSS box

section[id*="horizontal-panels"] .gallery-fullscreen-slideshow {
    opacity: 0;
}

#1.2. Edit Page > Add a Gallery Section (Images > Section with (i) icon)

Make sure you choose Slideshow Full

#1.3. Next, hover on top right of Gallery > Click Edit Section

at Anchor Links, enter word: horizontal-panels

horizontal-panels

#2. Customize

#2.1. To disable arrows/bullet dots, you change true to false

#2.2. To change slideshow height, change this

#2.3. And other options, you can adjust here

and here