carousel Slider in LWC Using CSS

 <template>

    <lightning-card variant="Narrow" title="">
        <div class="slider">
            <div class="scrollmenu">

                <template for:each={listofWrapperfor:item="acc">
                    <span key={acc.accID}>{acc.accName} <br/>
                         <!--<div class="slds-list_horizontal slds-m-right_large" key={acc.accID} > {acc.accName} <br/>-->
                            <!--<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
                                <lightning-progress-step  label="Step 1" value="1"></lightning-progress-step>
                                <lightning-progress-step  label="Step 2" value="2"></lightning-progress-step>
                                <lightning-progress-step  label="Step 3" value="3"></lightning-progress-step>
                                <lightning-progress-step  label="Step 4" value="4"></lightning-progress-step>
                            </lightning-progress-indicator>-->



                            <!--<lightning-progress-indicator current-step="step2">
                                <lightning-progress-step label="Step One" value="step1">
                                </lightning-progress-step>
                                <lightning-progress-step label="Step Two" value="step2">
                                </lightning-progress-step>
                                <lightning-progress-step label="Step Three" value="step3">
                                </lightning-progress-step>
                                <lightning-progress-step label="Step Three" value="step3">
                                </lightning-progress-step>
                            </lightning-progress-indicator>-->

                            <div class="stepper-wrapper">
                                <template if:true={acc.pbiQ1}>
                                <div class="stepper-item completed">
                                    <div class="step-counter"></div>
                                </div>
                                </template>
                                <template if:false={acc.pbiQ1}>
                                <div class="stepper-item active">
                                    <div class="step-counter"></div>
                                </div>
                                </template>

                                <template if:true={acc.pbiQ2}>
                                <div class="stepper-item completed">
                                    <div class="step-counter"></div>
                                </div>
                                </template>
                                <template if:false={acc.pbiQ2}>
                                <div class="stepper-item active">
                                    <div class="step-counter"></div>
                                </div>
                                </template>

                                <template if:true={acc.pbiQ3}>
                                <div class="stepper-item completed">
                                    <div class="step-counter"></div>
                                </div>
                                </template>
                                <template if:false={acc.pbiQ3}>
                                <div class="stepper-item active">
                                    <div class="step-counter"></div>
                                </div>
                                </template>

                                <template if:true={acc.pbiQ4}>
                                <div class="stepper-item completed">
                                    <div class="step-counter"></div>
                                </div>
                                </template>
                                <template if:false={acc.pbiQ4}>
                                <div class="stepper-item active">
                                    <div class="step-counter"></div>
                                </div>
                                </template>

                            </div>

                            <p class="task"> <big><big>{acc.completedlistofTask}</big></big>/{acc.listofTask} </p>
                            <p class="CompletedTask"> Completed Task </p>
                            <button class="buttonreport">Latest report</button>
                     <!--   </div> -->
                    </span>
                </template>

            </div>
            <lightning-button-icon  icon-name="utility:chevronleft" class="slideLeftBtn sameCss" onclick={leftSliderBtn}>
            </lightning-button-icon>
            <lightning-button-icon icon-name="utility:chevronright" class="slideRightBtn sameCss" onclick={rightSliderBtn}>
            </lightning-button-icon>
        </div>
    </lightning-card>



-----------------------------------------------------------------------------
JS Part
---------------------------------------------------------------

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/accountTaskStatus.getAccountList';
import taskPercentage from '@salesforce/apex/TargetTracker.taskPercentage';
import { loadStyle } from 'lightning/platformResourceLoader';
import customSR from '@salesforce/resourceUrl/customCssForLigtning';
export default class accountTaskStatus extends LightningElement {
    editableCrsl;
    records = [];
    listofWrapper = [];
    /*@wire(getAccountList) accounts;
     @wire(taskPercentage)
     tempTask({ error, data }) {
        if (data) {
            console.log('data: '+JSON.stringify(data));
            console.log(data);
            this.taskCount = data;
            this.error = undefined;
        } else if (error) {
            console.log('error: '+error);
            this.taskCount = undefined;
        }
    }*/
    listofDataToShow = [];
    connectedCallback() {
        Promise.all([
            loadStyle(this, customSR)
        ]);
    }

    @wire(getAccountList, {}) getAccountList({ error, data }) {
        if (data) {
            this.listofWrapper = data;
            var taskDataWrap = {
                accId: "",
                accName: "",
                totalTask: "",
                completedTask: ""
            }




            console.log('data: ' + JSON.stringify(data));
            console.log(data);
            //this.taskCount = data;
            this.error = undefined;
        } else if (error) {
            console.log('error: ' + error);
            this.taskCount = undefined;
        }
    }

    leftSliderBtn() {
        this.template.querySelector('.scrollmenu').scrollLeft -= 300;
        console.log();
    }

    rightSliderBtn() {
        this.template.querySelector('.scrollmenu').scrollLeft += 300;
    }

}

-----------------------------------------------------------------------------
CSS File Include
-----------------------------------------------------------------------------

.slideLeftBtn { position:absolute; left:5px; top:calc(100% - 53%); } .slideRightBtn{ position:absolute; right:5px; top:calc(100% - 53%); margin-right: 35px; } .slider{ display: flex; justify-content: center; } div.scrollmenu { max-width: 93vw; scroll-behavior: smooth; overflow: auto; white-space: nowrap; background-color: white; } div.scrollmenu::-webkit-scrollbar { display: none; } div.scrollmenu { -ms-overflow-style: none; scrollbar-width: none; font-size: 18px; font-weight: bold; } .slider .scrollmenu span { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; display: flex; justify-content: center; align-items: center; display: inline-block; text-align: center; padding: 14px; margin:10px; width: 180px; //height: 230px; border-radius: 5px; } .sameCss button.slds-button.slds-button_icon.slds-button_icon-border { color: white !important; background: rgb(243 243 243 / 35%) !important; border-radius: 50% !important; padding: 100% !important; } .sameCss svg.slds-button__icon { fill: black !important; height: 25px !important; width: 25px !important; } .buttonreport { background-color: white; color:#80c4c4; //padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius:4px; border: 2px solid #80c4c4; height:40px; width:150px; margin-left:-7px; } .lpi { --lwc-progressBarColorBackgroundFill: green; } .THIS .slds-progress-bar__value{ background: green; } .sameCss button.slds-button.slds-button_icon.slds-button_icon-border { color: white !important; background: rgb(220,220,220 / 35%) !important; border-radius: 50% !important; padding: 90% !important; margin-top: -30px !important; } .sameCss svg.slds-button__icon { fill: grey !important; height: 25px !important; width: 25px !important; } .stepper-wrapper { margin-top: auto; display: flex; justify-content: space-between; margin-bottom: 20px; } .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; padding-top: 14px; @media (max-width: 768px) { font-size: 12px; } } .stepper-item::before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2; } .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2; } .stepper-item .step-counter { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; background: #ccc; margin-bottom: 6px; } .stepper-item.active { font-weight: bold; } .stepper-item.completed .step-counter { background-color: #4bb543; } .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4bb543; width: 100%; top: 20px; left: 50%; z-index: 3; } .stepper-item:first-child::before { content: none; } .stepper-item:last-child::after { content: none; }

Comments

Popular posts from this blog

Custom List View Button In Salesforce

Get Record Id RecordId in LWC

PDF LWC (Link for pdf liabrary)