Free Gallery Scroll (Different Width)

• Support: [email protected]
• Free Install (1 site). Extra fee if you need more customize
• See paid version here
• View Demo – Password: abc

Description

• Smooth Auto scroll with Gallery Section Grid
• Images have same height, different width
• Options to add Caption

#1. Install Code

First, hover on page where you want to add Gallery Auto Scroll > Click Gear icon.

Click Advanced > Paste this code

<!-- @tuanphan - Gallery Auto Scroll (Different Width, Same Height) -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1761553067735gscrollimgwidth.css"/>
<script src="https://code.beaverhero.com/file?filename=1761553105248gscrollimgwidth.js">
</script>

#2. Usage

First, edit Page > Add Section

Choose Images > Choose section with (i) icon

Hover on top right of section > Click Edit Section

Choose Grid: Simple

Next, scroll to Anchor Link > enter word: galleryscroll533

galleryscroll533

To add Images to Gallery, hover on top right of section > Click Edit Gallery

#3. Customize

#3.1. To change Image height, you can add this under plugin code

<style>
.tp-carousel-auto {
--carousel-height: 300px;
--carousel-height-mobile: 250px;
}
</style>

#3.2. To change gap between image, add this under plugin code

<style>
.tp-carousel-auto {
--carousel-gap: 10px;
--carousel-gap-mobile: 12px;
}
</style>

#3.3. To remove edge color, use this code under plugin code

<style>
div.tp-carousel-auto::before, div.tp-carousel-auto::after {
    background-image: none !important;
}
</style>

You can email/message me if you need support.