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

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

dimitricon — Wed, 13 Feb 2019 17:46:18 GMT

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 %}

{% 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.

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

jennysowyrda — Mon, 25 Feb 2019 22:33:04 GMT

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

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

dimitricon — Tue, 26 Feb 2019 09:30:24 GMT

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=4558216&tc_deviceCategory=undefined&template_layout_id=6201265869&updated=1550144438379

Regards,

Dimitri.

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

AJLaPorte_diagr — Tue, 26 Feb 2019 23:41:59 GMT

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

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

dimitricon — Fri, 15 Mar 2019 11:12:45 GMT

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 %}

{% endfor %}

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

Regards,

Dimitri.

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

dimitricon — Wed, 20 Mar 2019 09:18:12 GMT

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.

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

dimitricon — Thu, 21 Mar 2019 09:45:09 GMT

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.

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

AJLaPorte_diagr — Thu, 21 Mar 2019 14:22:31 GMT

@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!

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

VNuccio — Sat, 29 May 2021 03:24:49 GMT

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