How to display multiple images in one slide on the image slider?

[dimitricon]

Hi I am trying to display multiple images in one slide, on the image slider?

Currently it only displays one image per slide.

I found this post:
https://community.hubspot.com/t5/CMS-Development/Custom-Gallery/m-p/33825#M3279

I am looking at the 'accepted solution' from 'Jsum', (‎02-08-2017 11:39).

{% gallery "crm_gallery" label="Image Gallery Clone", export_to_template_context=True %}
{% for item in widget_data.crm_gallery.slides %}

<img src="{{ item.img_src }}" alt="{{ item.alt_text }}">

{% endfor %}

This is the code he is saying to add, but it's not working for me. I have cloned the 'image gallery' source code and added the HubL code in there. I think I might be getting the labels and the 'system name' wrong, but I am not sure.

Dimitri.

[jennysowyrda]

HI @dimitricon,

Can you please share a link to the page you are working on? 

The more information, screenshots and details you can provide, the better the Community can assist.

Thank you,
Jenny

[dimitricon]

Hi Jenny,

This helps but I still wasn't able to do get multiple items on the slider.

I have posted another reply.

Regards,

Dimitri.

[dimitricon]

Hi Jenny,

Yes sure, here is the preview link I am working on.

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Regards,

Dimitri.

[AJLaPorte_diagr · Accepted solution]

Hi @dimitricon,

HubSpot makes use of the Slick Slider by Ken Wheeler. In order to make multiple images appear for the slick slider (which looks to be your logo's bar) you would want to use the information provided from the slick slider site about multiple items.

Essentially, you would be applying a custom class to the slider that would then be referenced in Javascript you would add to the bottom of the page. The JS would then look similar to this:

$('.multiple-items-class-here').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

 i believe though they implemented their own function name for it so you might have use:

$('.multiple-items-class-here').hsSlick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

Hopefully, this helps point you in the right direction.

-AJ

[dimitricon]

Hi AJ,

I had another go, new fresh day and success!

Had another read through your post, I removed the 'Image gallery clone', its not needed in this solution.

All I had to do is, inspect element on the slider and find the custom id that Hubspot assigns to the slider.

That is the id that I used in the script below and added that to the bottom of the page and it worked! 🙂

$('.multiple-items-class-here').hsSlick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

Thanks for your help AJ.

Regards,

Dimitri.

[VNuccio]

@dimitricon , struggling with this and was hoping you could help. Would be happy to share my code. 

[AJLaPorte_diagr]

@dimitricon Awesome to hear! I'm sorry I didn't get a chance to circle back to this faster as I was working on some other stuff. I'm glad this worked for you!

[dimitricon]

Hi AJ,

Appologies for my late reply. Thanks for your reply.

No success for me on this. I have added this into the bottom of my page:

$('.crm_gallery').hsSlick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});

I understand that I have to create a custom class for the multiple items, but where do I add the custom class in the slider js?

I was only able to create a clone of the gallery source code, will that clone still work?

I have added this code into the 'gallery source code clone', not sure if that needs to be removed:

{% gallery "crm_gallery" label="Image Gallery Clone", export_to_template_context=True %}
{% for item in widget_data.crm_gallery.slides %}

<img src="{{ item.img_src }}" alt="{{ item.alt_text }}">

{% endfor %}

This is the link I am working on https://whitelabeldating-4558216.hs-sites.com/home

Regards,

Dimitri.