Home carousel

Responsive carousel with configurable text and button needed.if the home banner contains only one image then need to remove the carousel feature.

Scroll functionality

	var self = this;
				this.message = '';
				this.on('afterViewRender', function () {
					_.initBxSlider(self.$('[data-slider]'), {
						auto: true,
						autoStart: true,
						pause: 5000,
						nextText: '<a class="home-gallery-next-icon"></a>',
						prevText: '<a class="home-gallery-prev-icon"></a>'
					});

					$(window).resize(function () {
						if ($('.home-image-slider-li-component').length) {
							$('.home-image-slider-li-component').css("width", jQuery(window).width());
						}
					});
					setTimeout(function () {
						if ($('.home-image-slider-li-component').length) {
							$('.home-image-slider-li-component').css("width", jQuery(window).width());
						}
					}, 1000);
				});

Template for home carousel

    <div class="home-slider-container bb-mobileview">
        <div class="home-image-slider slidermobileview">
            <ul data-slider class="home-image-slider-list">
                {{#each carouselImages}}
                    <li class="home-image-slider-li-component">
                        <div class="home-slide-main-container-image-background" style="background-image:url('{{bannerimages}}')">
                            <div class="home-slide-image-container">
                                <!-- <img src="{{getThemeAssetsPath (resizeImage 'img/carousel-home-0.png' ../imageHomeSize)}}" alt="" /> -->
                            </div>
                            <div class="home-slide-caption">
                                <h1 class="home-slide-caption-title home-slide-box-headline titillium-web-font ">{{blackbuttontext}}
                                </h1>
                                <h4 class="home-slide-caption-title description-heading">{{Description}}
                                </h4>
                                <!-- <p>Example descriptive text displayed on multiple lines.</p> -->
                                <div class="home-slide-caption-button-container">
                                    <a href='{{redbuttonurl}}' data-touchpoint="home" class="home-slide-caption-button home-slide-box-button button-primary ">{{redbuttontext}}</a>
                                </div>
                            </div>
                        </div>
                    </li>
                {{/each}}
            </ul>
        </div>
    </div>