Carousel Image Responsive in AEM-6.4



Dear All,

I have an image in my custom carousel and I want to make this responsive , means if the browser zoom is 100% "or" 90% "or" 80% "or" 70% "or" 60% "or" 50% the image should be fit with browser.

So I have written the below code. But the image is not fit with the browser zoom in and zoom out.

********************* HTL Code Start **********************************************************

<sly data-sly-use.carousel = ""/>

<!--<div>Landing Page Carousel Here</div>-->

<div id="myCarousel" class="carousel-eb carousel slide" data-ride="carousel" data-interval="3000">

<div class="carousel-inner ${properties.addPadding ? 'carousel-inner-eb' : ''}" role="listbox">

<sly data-sly-list="${carousel.slidesList}">

<div class="item ${item.count == '0' ? 'active' : ''}">

<!--<div class="marquee_landing_band menu-type-f" id="hero_marquee">--> //If I am defining background image in down then it is not coming

<img class="marquee_landing_band menu-type-f" id="hero_marquee" src="${item.bgImage}"> //Here image is coming fine but not responsive




<sly data-sly-test.slide="${carousel.slidesList}">

<sly data-sly-test="${slide.size > 1}">

<a id="left" class="left carousel-control ${properties.addPadding?'':'carousel-control-np'} left-arrow ${item.count}" href="#myCarousel" data-slide="prev" >

<em class="fa fa-angle-left"></em>


<a id="right" class="right carousel-control ${properties.addPadding? '' :'carousel-control-np'} right-arrow" href="#myCarousel" data-slide="next" >

<em class="fa fa-angle-right"></em>


<div class="${properties.addPadding? '' : 'indicator-eb' }">

<ol class="carousel-indicators">

<sly data-sly-list="${carousel.slidesList}">

<li data-target="#myCarousel" data-slide-to="${item.count}" class="${item.count == '0' ? 'active' : ''}"></li>








#hero_marquee {

background-image: url('${item.bgImage @context='uri'}');  //If I am defining background image here then it is not coming

    background-size: cover;   

    background-repeat: no-repeat;

    background-position: center top;



********************* HTL Code Finish**********************************************************

************************* JAVA CODE Start ***************************************


import java.util.ArrayList;

import java.util.HashMap;

import java.util.Iterator;

import java.util.List;

import java.util.Map;



import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;

public class LandingPosterCarouselTest extends WCMUsePojo{

private static Logger LOG = LoggerFactory.getLogger(LandingPosterCarouselTest.class);

private List<Map<String, String>> slidesList = new ArrayList<Map<String, String>>();

private String flag = "flase";


public void activate() throws Exception {

    Resource currentResource = getResource();   

    Resource multifieldPropRes = currentResource.getChild("NestedSlides");   

    if(multifieldPropRes != null) {

    Iterator<Resource> itr = multifieldPropRes.listChildren();

    int count = 0;

    int index = 0;

    while (itr.hasNext()) {

Resource childRes  =;

ValueMap properties = childRes.getValueMap();

Map<String,String> jsonMap = new HashMap<String,String>();"properties123  ==  " + properties);

if(properties.get("bgImage") != null) {

jsonMap.put("bgImage", properties.get("bgImage").toString());


if(index >1) {

flag = "true";


//jsonMap.replace("<p>", " ");

//jsonMap.replace("</p>", " ");


jsonMap.put("count", Integer.toString(count));







public List<Map<String, String>> getSlidesList() {

return slidesList;



************************* JAVA CODE Finish ***************************************

Can somebody help me on this.

Accepted Solutions (1)

Accepted Solutions (1)




this is an issue with container-width. Add width:100% to the container class along with appropriate margins as applicable.

In this case, you've applied your style on hero_marquee rather than parent hence try below code:


#hero_marquee {