Featured image is not active when site is loaded

support
1

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

2

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

image
image1132Ă—268 67.9 KB

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
3

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

4

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