Featured image is not active when site is loaded

Hi all,

I have done a thumbnail image slider using this idea

In this, the featured image is not active when the site is loaded. Not sure what mistake I have done,


<div id="prod_slider">
          {{ range $index, $val:= .Params.images }}

            {{if (eq $index 0)}}

              <img class="thumbnail active" src="{{ .image | absURL }}" alt="">


                <img class="thumbnail" src="{{ .image | absURL }}" alt="">




// product images thumbnail slider 
let thumbnails = document.getElementsByClassName('thumbnail')

let activeImages = document.getElementsByClassName('active')

for (var i = 0; i < thumbnails.length; i++) {

  thumbnails[i].addEventListener('mouseover', function () {

    if (activeImages.length > 0) {

    document.getElementById('featured').src = this.src

let buttonRight = document.getElementById('slideRight');
let buttonLeft = document.getElementById('slideLeft');

buttonLeft.addEventListener('click', function () {
  document.getElementById('prod_slider').scrollLeft -= 180

buttonRight.addEventListener('click', function () {
  document.getElementById('prod_slider').scrollLeft += 180

Repo link:

If the thumbnail is clicked, that picture should be active in featured.

Can anyone pls explain how to change the above code?


Troubleshoot by examining the console in your browser’s dev tools. For example:

Those errors are generated by this code, which doesn’t make any sense:

I think you want this instead:

<div class="wrapper-featured_img">
  <img id="featured" src="{{ (index .Params.images 0).image | absURL }}" alt="">
1 Like

Thank you so much. It is working now :slight_smile:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.