Hi i'm new to Drupal and this maybe kinda of advance, but how can i achieve a Drupal views of images grid format displayed in a carousel as shown in the image above
You could use the Views Slideshow module for this. Here is a quote from its project page:
... can be used to create a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View you create.
- News item slideshow (such as the title, image and teaser of the last 5 news articles submitted).
- The Last X number of X submitted (images, videos, blog entries, forum posts, comments, testimonials, etc.).
- Rotate any image, based on any filters you can apply in views.
- Hottest new products for any ecommerce drupal site.
- Rotate contact links, share links, etc.
- You could rotate entire nodes, categories, image galleries, etc. I wouldn't suggest it, but you have that power.
- It's also a great space saver. Places where you had multiple images or multiple items such as RSS feeds or category listings can now be presented in a slideshow.
The possibilities are really endless, as the more ways you can think of to categorize and add to views, the more you can rotate.
Possibly you may want to further extended this with related modules (there are dozens of modules to further enhance views) such as Views Slideshow: Galleria. Here is a quote from that module's project page:
Integrating Galleria with Views Slideshow.
Another option is to consider the jCarousel module. Here is a quote from its project page:
... This module allows developers and themers to make use of the jCarousel jQuery plugin. It includes a developer API that other modules can use, as well as Views integration in the 2.0 version so that you can turn any list of content or images into a carousel.
- Built-in Views support.
- AJAX-loading of additional items as needed.
- Carousel pager/navigation to jump between multiple pages.
- Circular wrapping of items.
- API for direct usage of jCarousel without Views.