HUGO

Featured image is not active when site is loaded

Hi all,

I have done a thumbnail image slider using this idea https://youtu.be/Y36QpYcnbQY

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

HTML:

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

            {{if (eq $index 0)}}

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

              {{else}}

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

        </div>

SCSS:
https://github.com/TenSketch/Charis-hugo-TenSketch/blob/12a0455201ef7f607798906db5466cb45c4f5478/themes/ecom-hugo-theme/assets/scss/components/_products_single.scss

JS:

// 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 () {
    console.log(activeImages)

    if (activeImages.length > 0) {
      activeImages[0].classList.remove('active')
    }


    this.classList.add('active')
    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:
https://github.com/TenSketch/Charis-hugo-TenSketch/tree/hugo-new-struct

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

Can anyone pls explain how to change the above code?

Thanks
Balachandiran

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="">
</div>
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.