Notes
HTML
<template>
<div class="slds-size_3-of-4">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
<h2>Opportunities</h2>
<lightning-carousel>
<template for:each={opportunities} for:item="opportunity">
<lightning-carousel-image
key={opportunity.header}
src={opportunity.imageSrc}
header={opportunity.header}
description={opportunity.description}
alternative-text={opportunity.header}
href={opportunity.href}>
</lightning-carousel-image>
</template>
</lightning-carousel>
</div>
</div>
</template>
JavaScript
import { LightningElement, wire, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
export default class OpportunityCarousel extends LightningElement {
@track opportunities = [];
@wire(getOpportunities)
wiredOpportunities({ error, data }) {
if (data) {
this.opportunities = data.map(opportunity => ({
header: opportunity.Name,
description: `Stage: ${opportunity.StageName} | Amount: $${opportunity.Amount} | Close Date: ${new Date(opportunity.CloseDate).toLocaleDateString()}`,
href: `/lightning/r/Opportunity/${opportunity.Id}/view`,
imageSrc: "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg" // Placeholder, can be updated with dynamic images
}));
} else if (error) {
console.error('Error fetching opportunities:', error);
}
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Apex
public with sharing class OpportunityController {
@AuraEnabled(cacheable=true)
public static List<Opportunity> getOpportunities() {
return [SELECT Id, Name, StageName, Amount, CloseDate, Account.Name FROM Opportunity LIMIT 5];
}
}
