Forum | Appery.io

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

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.

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

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

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.

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

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.