How to generalize a component

Hi 

You can use freely available Carousel JQuery plugins.

You can configure them with different parameters, like:-

Accessibility, AdaptiveHeight, Autoplay, Speed, draggable, fade, initial load, mobileFirst, lazy load, scroll option, slide, speed, event handeling.

Link:- http://kenwheeler.github.io/slick/ (Settings)

Demo:- http://kenwheeler.github.io/slick/#demo

Settings:- http://kenwheeler.github.io/slick/#settings

More JQuery Plugins :- http://designscrazed.org/free-responsive-jquery-carousel-slider-plugins/

Community article covering creation of Carousel components for AEM.

Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

You can use any carousel JQuery plugin for the same, as these will provide many configurable options.

I hope this would help you.

Thanks and Regards

Kautuk Sahni

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

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.

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

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.

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:

1. Carousel no of slides
2. Carousel rotation style ( dots or arrow). Also, whether rotation will be allowed at both ends or not.
3. Your carousel should be able to hold any component (image, video, cta etc)
4. Responsive behavior.
5. 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? 

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.

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?

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....