carousel Slider in LWC Using CSS
<template>
<lightning-card variant="Narrow" title="">
<div class="slider">
<div class="scrollmenu">
<template for:each={listofWrapper} for: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
Post a Comment