function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rajesh B 76Rajesh B 76 

how to display image custom corousel in LWC (3 image in a screen)

3 image in a slide
Best Answer chosen by Rajesh B 76
B KarthickeyanB Karthickeyan
Yes it is possible, to achieve that you have to use the following code
HTML file 
<template>
    <div class="slds-m-left_small">
        <center>
            <div class="slds-box animation" style="width: 1160px; height:400px;background-color: gray; ">
                <lightning-button-icon icon-name="utility:chevronleft" disabled={isPreviousButtonDisabled} class="slds-p-around_small"  style="position: relative;float:left;top:50%" variant="bare" onclick={previousImage} alternative-text="previous Image" title="left"></lightning-button-icon>
                <lightning-button-icon icon-name="utility:chevronright" disabled={isNextButtonDisabled}  class="slds-p-around_small" style="position: relative; float:right; top:50%" variant="bare" onclick={NextImage} alternative-text="Next Image" title="right"></lightning-button-icon>
                <div class="slds-grid slds-wrap ">
                    <template for:each={currentDisplayImage} for:item="imageSrc">
                        <div class={caroselClass} key={imageSrc}>
                            <div class="slds-box slds-m-left_x-small slds-m-right_x-small"  style="background-color: white; float:left" >
                                <img src={imageSrc.url} key={imageSrc} style="height: 190px;width:100%">
                               
                            </div>

                        </div>
                    </template>
                </div>
            </div>
        </center>   
    </div>
</template>

Js file
import { LightningElement, track, wire } from 'lwc';
import caregiverMatch from '@salesforce/apex/imageDetails.imageMap';


export default class Caroselmage extends LightningElement {
  // @track imageUrlList=[['https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf'],['https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf']];
    @track imageUrlList=[[]];
    @track currentDisplayImage=[];
    @track isPreviousButtonDisabled=false;
    @track isNextButtonDisabled=false;
    @track playStatus=false;
    @track playButton=true;
    @track setVal=0;
    @track caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
    @track displayData=[];
    @wire(caregiverMatch, {}) lookupDetailsList({data,error}) {
        var newList=[];
        if(data) {
            for(let key of data){
                this.displayData.push({url:key.conImageUrl});
            }
        }else{
            // eslint-disable-next-line no-console
            console.log('here ',error);
        }
        for(let i=0;i<this.displayData.length; i++){
            newList=[];
           
            let j=i;
            let nextset=i+3;
            
            while(j<nextset){   
                if(j>=this.displayData.length){
                    break;
                }
                
                // eslint-disable-next-line no-console
                console.log('this.displayData[j].ids ',this.displayData[j].ids);
                newList.push({url:this.displayData[j].url, });
                i=j;
                j++;
            }
            this.imageUrlList.push(newList);
        }
        let bool=true;
        this.imageUrlList[this.setVal].forEach(function(element){
            bool=false;
            this.currentDisplayImage.push(...[element]);
        },this);
        if(bool){
            this.imageUrlList.splice(0, 1);
        }
        this.isPreviousButtonDisabled=true;
        if(this.imageUrlList.length-1 === this.setVal){
            this.isNextButtonDisabled=true;
        }
    }
    previousImage(){    
        this.setVal=this.setVal-1;
        this.caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
        if(this.setVal>=0){
            this.isPreviousButtonDisabled=false;
            this.currentDisplayImage=[];
            this.imageUrlList[this.setVal].forEach(function(element){
                this.currentDisplayImage.push(...[element]);
            },this);
        }
        if(this.setVal===0){
            this.setVal=0;
            this.isPreviousButtonDisabled=true;
        }
        if(this.imageUrlList.length-1 !== this.setVal){
            this.isNextButtonDisabled=false;
        }
    }
    NextImage(){
        this.caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
        // eslint-disable-next-line no-console
        console.log('length '+this.imageUrlList.length );
        this.setVal=this.setVal+1;
        if(this.imageUrlList.length-1 >= this.setVal ){
            this.isNextButtonDisabled=false;
            this.currentDisplayImage=[];
            this.imageUrlList[this.setVal].forEach(function(element){
                this.currentDisplayImage.push(...[element]);
            },this);
        }
        if(this.imageUrlList.length-1 === this.setVal){
            this.setVal=this.imageUrlList.length-1;
            this.isNextButtonDisabled=true;
        }
        if(this.setVal!==0){
            this.isPreviousButtonDisabled=false;
        }
    }
    handleOnclick(event){
        // eslint-disable-next-line no-console
        console.log('Button Na/ record Id ',event.target.name);
    }
    
}

From the apex, you need to send the following wrapper
 public class resultWrapper{
        @AuraEnabled public String conImageUrl{get;set;}
        public resultWrapper(String conImage)          {
           
            this.conImageUrl = conImage;
        }
    }

 

All Answers

B KarthickeyanB Karthickeyan
Yes it is possible, to achieve that you have to use the following code
HTML file 
<template>
    <div class="slds-m-left_small">
        <center>
            <div class="slds-box animation" style="width: 1160px; height:400px;background-color: gray; ">
                <lightning-button-icon icon-name="utility:chevronleft" disabled={isPreviousButtonDisabled} class="slds-p-around_small"  style="position: relative;float:left;top:50%" variant="bare" onclick={previousImage} alternative-text="previous Image" title="left"></lightning-button-icon>
                <lightning-button-icon icon-name="utility:chevronright" disabled={isNextButtonDisabled}  class="slds-p-around_small" style="position: relative; float:right; top:50%" variant="bare" onclick={NextImage} alternative-text="Next Image" title="right"></lightning-button-icon>
                <div class="slds-grid slds-wrap ">
                    <template for:each={currentDisplayImage} for:item="imageSrc">
                        <div class={caroselClass} key={imageSrc}>
                            <div class="slds-box slds-m-left_x-small slds-m-right_x-small"  style="background-color: white; float:left" >
                                <img src={imageSrc.url} key={imageSrc} style="height: 190px;width:100%">
                               
                            </div>

                        </div>
                    </template>
                </div>
            </div>
        </center>   
    </div>
</template>

Js file
import { LightningElement, track, wire } from 'lwc';
import caregiverMatch from '@salesforce/apex/imageDetails.imageMap';


export default class Caroselmage extends LightningElement {
  // @track imageUrlList=[['https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf'],['https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf','https://tandemcareplanning-dev-ed.my.salesforce.com/servlet/servlet.FileDownload?file=0155w000003gIRf']];
    @track imageUrlList=[[]];
    @track currentDisplayImage=[];
    @track isPreviousButtonDisabled=false;
    @track isNextButtonDisabled=false;
    @track playStatus=false;
    @track playButton=true;
    @track setVal=0;
    @track caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
    @track displayData=[];
    @wire(caregiverMatch, {}) lookupDetailsList({data,error}) {
        var newList=[];
        if(data) {
            for(let key of data){
                this.displayData.push({url:key.conImageUrl});
            }
        }else{
            // eslint-disable-next-line no-console
            console.log('here ',error);
        }
        for(let i=0;i<this.displayData.length; i++){
            newList=[];
           
            let j=i;
            let nextset=i+3;
            
            while(j<nextset){   
                if(j>=this.displayData.length){
                    break;
                }
                
                // eslint-disable-next-line no-console
                console.log('this.displayData[j].ids ',this.displayData[j].ids);
                newList.push({url:this.displayData[j].url, });
                i=j;
                j++;
            }
            this.imageUrlList.push(newList);
        }
        let bool=true;
        this.imageUrlList[this.setVal].forEach(function(element){
            bool=false;
            this.currentDisplayImage.push(...[element]);
        },this);
        if(bool){
            this.imageUrlList.splice(0, 1);
        }
        this.isPreviousButtonDisabled=true;
        if(this.imageUrlList.length-1 === this.setVal){
            this.isNextButtonDisabled=true;
        }
    }
    previousImage(){    
        this.setVal=this.setVal-1;
        this.caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
        if(this.setVal>=0){
            this.isPreviousButtonDisabled=false;
            this.currentDisplayImage=[];
            this.imageUrlList[this.setVal].forEach(function(element){
                this.currentDisplayImage.push(...[element]);
            },this);
        }
        if(this.setVal===0){
            this.setVal=0;
            this.isPreviousButtonDisabled=true;
        }
        if(this.imageUrlList.length-1 !== this.setVal){
            this.isNextButtonDisabled=false;
        }
    }
    NextImage(){
        this.caroselClass="slds-col slds-size_1-of-3 slds-clearfix";
        // eslint-disable-next-line no-console
        console.log('length '+this.imageUrlList.length );
        this.setVal=this.setVal+1;
        if(this.imageUrlList.length-1 >= this.setVal ){
            this.isNextButtonDisabled=false;
            this.currentDisplayImage=[];
            this.imageUrlList[this.setVal].forEach(function(element){
                this.currentDisplayImage.push(...[element]);
            },this);
        }
        if(this.imageUrlList.length-1 === this.setVal){
            this.setVal=this.imageUrlList.length-1;
            this.isNextButtonDisabled=true;
        }
        if(this.setVal!==0){
            this.isPreviousButtonDisabled=false;
        }
    }
    handleOnclick(event){
        // eslint-disable-next-line no-console
        console.log('Button Na/ record Id ',event.target.name);
    }
    
}

From the apex, you need to send the following wrapper
 public class resultWrapper{
        @AuraEnabled public String conImageUrl{get;set;}
        public resultWrapper(String conImage)          {
           
            this.conImageUrl = conImage;
        }
    }

 
This was selected as the best answer
Rajesh B 76Rajesh B 76
custom corousal image has appeared
Girish Reddy 65Girish Reddy 65

Hi 
Rajesh B 76.

Can you please send complete code for this carasouel. I cannot find apex class. Thanks