Any one please help me to add Logo Carousel

contacts

#1

Hi all
I am and Hubspot Design certified Developer. Can anyone please help me to add this


client logo carousel section on the website, please

Thanks
Subin Das


#2

Hi @Subin_Das,

You could do this with the built in gallery module from HubSpot, and add in each of the logos and set the option to slider.

Just make sure that all of the logos are approximately the same size in terms of height.

Thanks


#3

hi @Stephen_Yager
Thanks for you reply, by gallery module we can only show one image noo?? anh how can we scroll more than one image. i have found one solution that is hsdb so that we can fetch and use the images on the particular scripts

Thanks


#4

Hi @Subin_Das,

You are correct, the gallery module only displays one image at a time.

Personally I would use the HubDB along with Handlebars.js (http://handlebarsjs.com/) and slides.js (http://slidesjs.com/).

I would use HubDB to create a JSON object on the page that contains the information required, ex image path, link, alt text, ect, and use Handlebars to build the slides, then have Slides.js take over and do the rest of the work.

I would do it this way because I find that I have more control over what I can do with Handlebars, rather than in Hubl. Like if you needed to re-draw the slides on the fly based on browser width to have a different amount of logos displayed at a time.

If you don’t want to use Handlebars, you can do the HTML output within Hubl and just use Slides.js.

Also as an alternative, you could also use AnythingSlider (https://css-tricks.github.io/AnythingSlider/).

Thanks


#5

I’ve used owl carousel in the past, and dependent on the slide content, used either the standard image module or a custom module to populate the slides. Because of the additional code wrapped around the elements inside a flexible column I had to write some additional JavaScript to build the slides before invoking the owl carousel script, but it makes for a reliable responsive slider that you can update in the editor.

Have a look at https://www.teledata.co.uk/ on mobile and you’ll see we’ve used it extensively for logos and to prevent stacking all the column content.


#6

Thanks for you kind reply @Stephen_Yager


#7

Thanks for you kind reply @PaulAxonGarside