Working with JavaScript Components

Your template includes interactive elements powered by JavaScript - sliders, animations, lightboxes, tabs, and more. This article explains how these work and how to configure them without needing to write code from scratch.

Overview of Common Libraries

Most HTML templates on Envato rely on a set of well-known JavaScript libraries for interactive features. Your template may include some or all of the following:

• Swiper or Slick - for image sliders and carousels

• AOS (Animate On Scroll) - for scroll-triggered animations

• Lightbox2 or GLightbox - for image galleries with zoom/overlay

• Bootstrap JS - for tabs, accordions, modals, dropdowns, and tooltips

• jQuery - a utility library used by many plugins (loaded as a dependency)

• Waypoints or ScrollMagic - for scroll-based triggers

• CountUp - for animated number counters

• Isotope or MixItUp - for filterable portfolio/gallery grids

These library files are located in the js/ or vendor/ folder. The template's custom initialization code is usually in a separate file like main.js, custom.js, or scripts.js.

Important: Never modify the library files themselves (e.g., swiper.min.js, bootstrap.min.js). Only edit the initialization/configuration code in the template's custom JS file.

Configuring Sliders and Carousels

Sliders are one of the most common components. The initialization code typically looks like this:

javascript

// Swiper example
var swiper = new Swiper('.hero-slider', {
  slidesPerView: 1,
  autoplay: {
    delay: 5000,        // time between slides (milliseconds)
    disableOnInteraction: false
  },
  loop: true,           // loop back to the first slide
  speed: 600,           // transition speed (milliseconds)
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

Common adjustments:

• Change autoplay speed: Modify the delay value (5000 = 5 seconds)

• Disable autoplay: Remove the entire autoplay block or set autoplay: false

• Show multiple slides: Change slidesPerView to 2, 3, or more

• Disable looping: Set loop: false

Each slider library has its own documentation with a full list of options. Search for the library name + "documentation" to find it.

Scroll Animations

If elements on the page fade in, slide up, or animate as you scroll, the template is likely using AOS or a similar library. The animations are controlled through HTML data attributes:

html

<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
  This content will fade up when scrolled into view
</div>

Common adjustments:

• Change animation type: Replace fade-up with fade-in, zoom-in, slide-left, etc.

• Change duration: Modify data-aos-duration (value in milliseconds)

• Add delay: Set data-aos-delay for staggered animations

• Disable all animations: Remove the AOS initialization from the JS file, or remove data-aos attributes from the HTML

If animations feel too slow or distracting, reducing the duration to 400-600ms usually makes them feel snappier. To disable animations entirely, find the AOS init call in the JavaScript file and either remove it or comment it out:

javascript

// Comment out to disable scroll animations
// AOS.init();

Tabs, Accordions, and Modals

If the template uses Bootstrap components, these interactive elements are controlled through data attributes in the HTML:

html

<!-- Tab navigation -->
<ul class="nav nav-tabs">
  <li><a data-bs-toggle="tab" href="#tab1" class="active">Tab 1</a></li>
  <li><a data-bs-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>

<!-- Tab content -->
<div class="tab-content">
  <div id="tab1" class="tab-pane active">Content for tab 1</div>
  <div id="tab2" class="tab-pane">Content for tab 2</div>
</div>

To add a new tab, duplicate both the navigation <li> and the corresponding content <div>, updating the IDs and href values to match. Accordions and modals follow a similar pattern.

Image Galleries and Lightboxes

Gallery lightboxes (the overlay that appears when you click an image to view it full-size) typically work through data attributes or specific CSS classes:

html

<a href="images/gallery/full-01.jpg" class="lightbox" data-gallery="portfolio">
  <img src="images/gallery/thumb-01.jpg" alt="Project 1">
</a>

The href points to the full-size image, while the <img> tag shows the thumbnail. To add images to the gallery, duplicate this structure with your own image paths. The data-gallery attribute groups images so they can be navigated as a set.

The Contact Form

This is one of the most common questions: the contact form does not send emails by itself. An HTML template is static - it has no server-side code to process form submissions.

To make the contact form functional, you have several options:

Third-party form services (easiest):

• Formspree - add your Formspree endpoint as the form's action attribute

• Getform - similar to Formspree

• Netlify Forms - works automatically if you host on Netlify

• Google Forms - embed or redirect to a Google Form

For Formspree, the change is minimal:

html

<!-- Before -->
<form action="#" method="POST">

<!-- After (replace YOUR_ID with your Formspree form ID) -->
<form action="https://formspree.io/f/YOUR_ID" method="POST">

Custom backend: If you have a server with PHP, Node.js, or another backend language, you can write a script to handle form submissions. This requires development experience beyond the scope of this documentation.

Google Maps

If the template includes a Google Maps section, you'll need to:

1. Get a Google Maps API key from the Google Cloud Console

2. Find the Maps initialization in the JavaScript file and replace the placeholder API key with yours

3. Update the coordinates to point to your location

javascript

// Look for something like this in the JS file
var map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 40.7128, lng: -74.0060 },  // your coordinates
  zoom: 15
});

To find your coordinates, search for your address on Google Maps, right-click the pin, and the coordinates will appear.

Note: Google Maps API requires a billing account, though there is a generous free tier for low-traffic sites. If you prefer a free alternative, consider OpenStreetMap with Leaflet.js.

General Advice

• Always keep a backup of the original template files before making changes to JavaScript

• Use your browser's developer console (F12, Console tab) to check for JavaScript errors if something stops working

• If a component breaks after editing, compare your changes against the original file to find what went wrong

• Most interactive components have extensive documentation online - searching for the library name will lead you to detailed configuration guides