Image slider configuration

[JoeKat07]

Hello Community,

I want to take the standard image slider and move the components around. I would like the buttons and the image and move them to the bottom. I want them to look like the image below

Thanks in advance!

[AJLaPorte_diagr]

In order to move that item, you would either need to use JS to move the thumbnails or use a custom built slider to do this. I'm not sure if you can use the docs for Flexslider to make adjustments as I think HS renamed some of the default variables (https://woocommerce.com/flexslider/) or modified the JS for their use. 

For JS to move them you can do something simple like:

<script type="text/javascript">
// newspot would be the ID of the new element you want to add the controls to
document.getElementById('newSpot').appendChild(
    // the id listed below is the ID used for the thumbnail navigation
    document.getElementById('hs_cos_flex_slider_control_panel_')
  );
</script>

I would recommend making a custom slider and looking into using slick slider (as HS also uses this type of slider too for things) as it has a lot more options you can control (kenwheeler.github.io/slick/). 

Also, if you are using the newest version of the Design Manager (the beta version) you can create a nice slider using repeating groups and so on.

-AJ

[JoeKat07]

could I just use css to move the positions of the elements around without having to involve JS..?

[AJLaPorte_diagr]

You could try and use something like CSS Flexbox rules:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

However, it is not supported in older versions of IE (IE 10 and below, 11 only has partial support):

https://caniuse.com/#feat=flexbox

-AJ

[kles]

thanks a lot.......can Java be used to achieve same result as well...........i am a bit new to css thats why i ask.....No offences pls.

[AJLaPorte_diagr]

I dont believe you can use the Java programming language to modify the slider component. Someone from HubSpot would have to chime in on that as I know they use JinJava for their templating. 

To truly build an optimal slider and have it laid out how you want, your best option is to use a custom module for it. I know custom modules will soon be released onto the marketplace so when that happens, I am sure there will be many options available. 

Aside from that, only other options are using CSS Flexbox properties or Javascript to modify it. 

-AJ