Adobe Experience Manager Sites & More

krishh_187 · 12/30/15

Hi...

In my requirement, page has three carousel components. Each one is having different heights. I can use different carousel components for each one.

Can I use one carousel, which can be used for all the requirements.

Pls help me out.

Regards

Krishh

Jitendra_S_Toma · 12/30/15

Well,

In order to design a generic carousel component, you have to figure it out all the options which user might like to see:

Carousel no of slides
Carousel rotation style ( dots or arrow). Also, whether rotation will be allowed at both ends or not.
Your carousel should be able to hold any component (image, video, cta etc)
Responsive behavior.
Carousel height (In your case)

Once you have all generic stuff together, The best design is to make more things authorable (user driven). I leave to you how you want to design authorable fields (drop down, text field etc)

--

Jitendra

View solution in original post

edubey · 12/30/15

You can create 3 carousel but if height is the only difference, then I would go for one carousel.

Add 1 additional drop down in carousel for user to select the which type of carousel is this.

Use the value for this drop down in jsp/html to differentiate....

au4liferz · 12/30/15

Have you considered using one carousel component, and designing it in such a way that you can configure the height/viewport, (either using CSS, or passing in the dimensions for the carousel in pixels, (i.e. height x width)??? Would this not work or am I misunderstanding your requirements?

Jitendra_S_Toma · 12/30/15

Well,

In order to design a generic carousel component, you have to figure it out all the options which user might like to see:

Carousel no of slides
Carousel rotation style ( dots or arrow). Also, whether rotation will be allowed at both ends or not.
Your carousel should be able to hold any component (image, video, cta etc)
Responsive behavior.
Carousel height (In your case)

Once you have all generic stuff together, The best design is to make more things authorable (user driven). I leave to you how you want to design authorable fields (drop down, text field etc)

--

Jitendra

krishh_187 · 12/31/15

When I create a image carousel component it's coming in (970*240) size. I have changed CSS according to my requirement (1300*340). I can able to increase the size of container but couldn't able to increase the size of image. similarly in one scenario I have to decrease the size of carousel component to less than (970*240). I am giving pages (with images) as input to carousel component. Do I need to use media queries?

Pls help me out.

krishh_187 · 12/31/15

Jitendra S.Tomar wrote...

Well,

In order to design a generic carousel component, you have to figure it out all the options which user might like to see:

Carousel no of slides
Carousel rotation style ( dots or arrow). Also, whether rotation will be allowed at both ends or not.
Your carousel should be able to hold any component (image, video, cta etc)
Responsive behavior.
Carousel height (In your case)

Once you have all generic stuff together, The best design is to make more things authorable (user driven). I leave to you how you want to design authorable fields (drop down, text field etc)

--

Jitendra

When I create a image carousel component it's coming in (970*240) size. I have changed CSS according to my requirement (1300*340). I can able to increase the size of container but couldn't able to increase the size of image. similarly in one scenario I have to decrease the size of carousel component to less than (970*240). I am giving pages (with images) as input to carousel component. Do I need to use media queries?

au4liferz · 12/31/15

krishh_187 wrote...

When I create a image carousel component it's coming in (970*240) size. I have changed CSS according to my requirement (1300*340). I can able to increase the size of container but couldn't able to increase the size of image. similarly in one scenario I have to decrease the size of carousel component to less than (970*240). I am giving pages (with images) as input to carousel component. Do I need to use media queries?

Pls help me out.

krishh,

What have you used to implement your carousel??? Did you write a custom javascript yourself, or did you use of the many javascript libraries/plugins available, (e.g. jQuery, slick_slider, infinitecarousel etc.)? How does the HTML look that you use to provide your images for the carousel? Can you post a snippet of the HTML that specifies the images that the carousel uses? You can also post your CSS too if you'd like.

krishh_187 · 1/1/16

au4liferz wrote...

krishh_187 wrote...

When I create a image carousel component it's coming in (970*240) size. I have changed CSS according to my requirement (1300*340). I can able to increase the size of container but couldn't able to increase the size of image. similarly in one scenario I have to decrease the size of carousel component to less than (970*240). I am giving pages (with images) as input to carousel component. Do I need to use media queries?

Pls help me out.

krishh,

What have you used to implement your carousel??? Did you write a custom javascript yourself, or did you use of the many javascript libraries/plugins available, (e.g. jQuery, slick_slider, infinitecarousel etc.)? How does the HTML look that you use to provide your images for the carousel? Can you post a snippet of the HTML that specifies the images that the carousel uses? You can also post your CSS too if you'd like.

Hi...

I haven't write any custom code to display carousel. I have embed the images in pages, and using those pages for carousel. After lot of googling, I got to know that, I have to make my carousel Responsive. :)

Hey Thanks a lot for u r support. Can you pls suggest me, how to create my page responsive? I am going to through the adobe docs. If u know the proper link pls provide.

Thanks & Regards

Krishh

au4liferz · 1/1/16

In order to make a carousel be responsive, you either have to use one of the plugins available on the internet, (such as the ones that I mentioned above), or you'll have to follow the guide in the AEM documentation, (google AEM responsive web pages). It'll involve you saving your images in different sizes, and following the documentation to enable the appropriate image to be used, based on the device that is used. It's all basically based on the amount of real estate, (i.e. screen size), available.

Jitendra_S_Toma · 1/1/16

When I create a image carousel component it's coming in (970*240) size. I have changed CSS according to my requirement (1300*340). I can able to increase the size of container but couldn't able to increase the size of image. similarly in one scenario I have to decrease the size of carousel component to less than (970*240). I am giving pages (with images) as input to carousel component. Do I need to use media queries?

@krishh_187

If you are looking for cropping an image through css. I wouldn't say this is a good idea. You might have to upload correct image size. Even if, you fix this issue any some workaround, what about other places where bigger image is required?.

I would recommend to use right image.

--

Jitendra