Slider Indicator Position is not aligning as required

378 Posts

Web IT Solutions LLP posted this 04 August 2018

Dear Sir,

This is not making sense, if we set the Slider Indicator Alignment to Right or Left it has to auto rotate to 180 degrees vertical alignment, i mean it has to stick to the left or right position of slider.

How to change the position to right or left, the indicators should adjust it accordingly towards the right or left position.. But, its not. Why ?

Please check the screenshot attached for your reference. This position is not making sense, i need some solution for the same. Any code CSS Change we can make it please let us know ASAP.

Appreciate your quick reply,

Thanks in advance,

Regards
Suffian Ahmed

Dear Sir, This is not making sense, if we set the Slider Indicator Alignment to Right or Left it has to auto rotate to 180 degrees vertical alignment, i mean it has to stick to the left or right position of slider. How to change the position to right or left, the indicators should adjust it accordingly towards the right or left position.. But, its not. Why ? Please check the screenshot attached for your reference. This position is not making sense, i need some solution for the same. Any code CSS Change we can make it please let us know ASAP. Appreciate your quick reply, Thanks in advance, Regards Suffian Ahmed

slider slider_indicator indicator_alignment indicator_position indicator_vertical

Ashampoo-Snap-2018.08.04-21h00m43s-010-.png

Ashampoo-Snap-2018.08.04-21h03m03s-011-.png

Ashampoo-Snap-2018.08.04-21h13m58s-012-.png

Vote to pay developers attention to this features or issue.

4 Comments

Order By: Standard | Newest

378 Posts

Web IT Solutions LLP posted this 04 August 2018

We have used the css to adjust the indicator design... We are expecting the same by default as shown in the screenshot.

.bd-indicators-2 
{
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 0;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: -10em;
    -webkit-transform: rotate(90deg);
}

We have changed the style as above, CSS - margin: -10em & rotate(90deg) and its coming as expected. But, is that correct ?

Please share your update on this please. Find the screenshot for your reference.

We have used the css to adjust the indicator design... We are expecting the same by default as shown in the screenshot. .bd-indicators-2 { margin: 0; padding: 0; text-align: center; line-height: 0; display: inline-block; position: relative; z-index: 1; margin: -10em; -webkit-transform: rotate(90deg); } We have changed the style as above, CSS - margin: -10em & rotate(90deg) and its coming as expected. But, is that correct ? Please share your update on this please. Find the screenshot for your reference.

Ashampoo-Snap-2018.08.04-21h31m42s-014-.png

Is Solution

Support Team posted this 06 August 2018

Hi,

Unfortunately, there is no rotate option for Slider indicators depending on the position. Therefore the described issue is a proper behavior.
In general, it is enough to add transform property: -webkit-transform: rotate(90deg); only. All other settings you can change in Themler. But I see that you add transform with -webkit- prefix only. It is not enough for all browsers. If you want to use prefixes you need to use all prefixes and one line without prefix. For example:
-moz-transform: rotate(15deg); /* for Firefox */ -ms-transform: rotate(15deg); /* for IE */ -webkit-transform: rotate(15deg); /* for Safari, Chrome, iOS */ -o-transform: rotate(15deg); /* for Opera */ transform: rotate(15deg);

Thank you,
Olivia

Hi, Unfortunately, there is no rotate option for Slider indicators depending on the position. Therefore the described issue is a proper behavior. In general, it is enough to add transform property: ` -webkit-transform: rotate(90deg);` only. All other settings you can change in Themler. But I see that you add transform with `-webkit-` prefix only. It is not enough for all browsers. If you want to use prefixes you need to use all prefixes and one line without prefix. For example: ` -moz-transform: rotate(15deg); /* for Firefox */ -ms-transform: rotate(15deg); /* for IE */ -webkit-transform: rotate(15deg); /* for Safari, Chrome, iOS */ -o-transform: rotate(15deg); /* for Opera */ transform: rotate(15deg);` Thank you, Olivia

378 Posts

Web IT Solutions LLP posted this 06 August 2018

Dear Olivia,

Thank you so much, appreciate your support.

Can we hide slider indicator in Mobile Version. I like to show indicators only Desktop but not in Mobiles. Can we make it possible using your above css script ?

Please let us know this final query ;-)

Regards
Suffian Ahmed

Dear Olivia, Thank you so much, appreciate your support. Can we hide slider indicator in Mobile Version. I like to show indicators only Desktop but not in Mobiles. Can we make it possible using your above css script ? Please let us know this final query ;-) Regards Suffian Ahmed

Support Team posted this 08 August 2018

Hi,

Yes, but you need css media query. For example:

@media (max-width: 992px) { .bd-indicators-2 { display: none; } }

This code will hide the indicators on the screens with a size less than 992px (991px and below).

Thank you,
Olivia

Hi, Yes, but you need css media query. For example: `@media (max-width: 992px) { .bd-indicators-2 { display: none; } }` This code will hide the indicators on the screens with a size less than 992px (991px and below). Thank you, Olivia