Pause for Custom Carousel

Avatar

Avatar

sunitac70336244

Avatar

sunitac70336244

sunitac70336244

05-02-2019

Dear All,

We need a pause button in our custom carousel , which is migrated from AEM 5.6 to AEM 6.4.

The new requirement is , if somebody will click on pause button then the carousel slide will pause and  again they will click on same pause button then the the slide will again play with time interval 3 seconds...

In the below code , i have written the pause functionality...But It is not working , as expected.

<sly data-sly-use.carousel = "com.trp.wtc.sunita.pojo.LandingPosterCarouselTest"/>

<div>Landing Page Carousel Testing Here</div>

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

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

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

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

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

<sly data-sly-test="${item.bgImage}">

<img src="${item.bgImage}" style="width:100%" alt="">

<div class="overlay"></div>

</sly>

</div>

</sly>

</div>

</sly>

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

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

</a>

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

</sly>

<button class="controls" id="pause">Pause</button>

</ol>

</div>

</sly>

</sly>

</div>

<script>

   var slides = document.querySelectorAll('#slides .myCarousel');

var currentSlide = 0;

var slideInterval = setInterval(nextSlide,3000);

function nextSlide(){

slides[currentSlide].className = 'myCarousel';

currentSlide = (currentSlide+1)%slides.length;

slides[currentSlide].className = 'item1 active';

}

var playing = true;

var pauseButton = document.getElementById('pause');

function pauseSlideshow(){

pauseButton.innerHTML = 'Play';

playing = false;

clearInterval(slideInterval);

}

function playSlideshow(){

pauseButton.innerHTML = 'Pause';

playing = true;

slideInterval = setInterval(nextSlide,3000);

}

pauseButton.onclick = function(){

if(playing){ pauseSlideshow(); }

else{ playSlideshow(); }

};

</script>

My website page is coming like below.

1684891_pastedImage_6.png

But when I click on Pause button then it is not working as expected. Can you please help me on this.

View Entire Topic

Avatar

Avatar

sunitac70336244

Avatar

sunitac70336244

sunitac70336244

05-02-2019

Hi,

Yes I know that by using maven archetype 15 we can get the AEM maven project....

Let me more clear on my requirement. I have already custom carousel code which is migrated from CQ 5.6 to AEM 6.4...

Now My business user wants that only pause Icon should come side to the carousel indicators , as shown in below figure.

1684923_pastedImage_0.png

Can anybody help me , how can I achieve this requirement by using the below core AEM code  ( aem-core-wcm-components/carousel.html at master · adobe/aem-core-wcm-components · GitHub )

<button data-sly-test="${carousel.autoplay}"

                role="button"

                class="cmp-carousel__action cmp-carousel__action--pause"

                data-cmp-hook-carousel="pause">

            <span class="cmp-carousel__action-icon"></span>

            <span class="cmp-carousel__action-text">${'Pause' @ i18n}</span>

        </button>

        <button data-sly-test="${carousel.autoplay}"

                role="button"

                class="cmp-carousel__action cmp-carousel__action--play"

                data-cmp-hook-carousel="play">

            <span class="cmp-carousel__action-icon"></span>

            <span class="cmp-carousel__action-text">${'Play' @ i18n}</span>

        </button>

NOTE that , here we do not want to use the 2 buttons Pause and Play ...We want only one pause icon like above.

Can you please help me how can I achieve this one.