Carousel - indicator

[rabeeh]

my app
http://appery.io/app/mobile-frame?src...

i have 2 Q
1- i tried to change the images of the indicator by using this code
code[name="mobilecarousel_168"] .ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator{
background-image: url(../../../../files/views/assets/image/cr1.png);
width: 15px;
height: 15px;
border: 0px solid #000;
background-color: transparent;
border-radius: 0px;
background-size: cover;
font-size: 1px;
}/code
but as you see the all the images is the same "Red" how can i make just 1 red and the other white ?

2- if you see the title of the carousel is just 1 line. in some case the title so long in this case we see just 1 line how can we increase the height of this line

[Yurii Orishchuk]

Hi Rabeeh.

You can use "nth-child" css selector to set style rule for each item.

So you can use following code(and modify it with your needs):

pre

[name="mobilecarousel_19"] .ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator{
background-image: url(../../../../files/views/assets/image/phone.png);
width: 20px;
height: 20px;
border: 0px solid #000;
background-color: transparent;
border-radius: 0px;
background-size: cover;
font-size: 1px;
}

[name="mobilecarousel_19"] .ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator:nth-child(2){
/* styles for second item */
background-image: url(../../../../files/views/assets/image/phoneSecond.png);
}

[name="mobilecarousel_19"] .ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator:nth-child(3){
/* styles for third item */
background-image: url(../../../../files/views/assets/image/phoneThird.png);
}

/pre

What about second question:
Please specify where in your app you have this title of carousel.

Regards.

[rabeeh]

in this case that you display the images color will be static and not change. what i need is to switch between the indicator color when the new scroll and changes like the original one of the theme but with deference colors

[rabeeh]

another Q
i am trying to navigate it to another page with local storage but not work for me.
i attache picture to see

[Yurii Orishchuk]

Hi Rabeeh.

Unfortunatly you don't told us that you want use dynamic JS code.

In this case you should:

1 Leave this code in css:

pre

[name="mobilecarousel_19"] .ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator{
background-image: url(../../../../files/views/assets/image/phone.png);
width: 20px;
height: 20px;
border: 0px solid #000;
background-color: transparent;
border-radius: 0px;
background-size: cover;
font-size: 1px;
}

/pre

2 Use following JS code to change image:

pre

//Note: mobilecarousel_28 - should be replaced with your carousel name.
//Note2: don't forget to set image URL.
jQuery('[name="mobilecarousel_28"]').find(".ui-carousel-indicators.ui-carousel-indicators-theme-a .ui-carousel-indicator:eq(0)").css("background-image", "url(http://www.allwomens.ru/uploads/posts/2010-04/1270831868_god_tigra_dlya_rozhdennyx_v_god_tigra.jpg)")

/pre

Q2 is not currently clear. Please describe the goal what you want to reach. And add more details about problem.

Regards.

[rabeeh]

its not work!!! its show the same images that i put in the css and not change it

[Yurii Orishchuk]

Hi Rabeeh.

It should work.

Please make screen shots from all these provided things. (code and settings you have done to get it work)

Thanks.