Create Custom Carousel Image Slider as responsive design & auto changed control by Stop/Play button uses of lightning-carousel-image in Lightning Web Component — LWC
Hey guys, today in this post we are going to learn about How to Create Custom Carousel Image Slider as responsive design & auto changed control by Stop/Play button uses of lightning-carousel-image in Lightning Web Component — LWC.
Here I am displaying the groups of image in the order of list in a single container in LWC component. Here in this carousel image slider displays one image at a time, and you can select particular images by clicking the round indicators at bottom of the Image.
Each slider of image displays timing for 5 seconds before the next image slide.
We can Stop/Play the auto scrolling image by control button.
Files we used in this post example
lwcCarouselSlider.html
LWc HTML File
Template HTML file used to custom lightning carousel slider with image using of lightning-carousel-image elements
lwcCarouselSlider.js
LWC JavaScript File
There is not require JavaScript function. It is handling through lightning-carousel-image elements.
lwcVerticalTabs.js-meta.xml
XML Meta File
It is used to where this lightning web component file you want to expose.
lwcCarouselSliderApp
Lightning Application
It is used, call the LWC HTML file to preview on browser.
Final Output | To know more, use this link..
Other related post that would you like to learn in LWC Find the below steps:-
Create Lightning Web Component HTML
Step 1:- Create Lightning Web Component HTML ➡ lwcCarouselSlider.html
SFDX:Lightning Web Component ➡ New ➡ lwcCarouselSlider.html
lwcCarouselSlider.html [Lightning Web Component HTML]
Create Lightning Web Component Javascript
In JavaScript file there is not require JavaScript function. It is handling through lightning-carousel-image components nested in lightning-carousel library. It is a standard styling from carousel in the Lightning Design System.
Step 2:- Create Lightning Web Component Javascript ➡ lwcCarouselSlider.js
SFDX:Lightning Web Component ➡ New ➡ lwcCarouselSlider.js
lwcCarouselSlider.js [LWC JavaScript File]
Create Lightning Web Component Meta XML
Step 3:- Create Lightning Web Component Meta XML ➡ lwcCarouselSlider.js-meta.xml
SFDX:Lightning Web Component ➡ New >> lwcCarouselSlider.js-meta.xml
lwcCarouselSlider.js-meta.xml [LWC Meta Data XML]
Lightning Web Component Meta XML
Create Lightning Application
Step 4:- Create Lightning Application : lwcCarouselSliderApp.app
From Developer Console >> File >> New >> Lightning Application
lwcCarouselSliderApp [Component Application File]
Further post that would you like to learn in LWC
Related Topics | You May Also Like
Categories Tags Salesforce LWC, Carousel — Lightning Design System, carousel & slider, custom carousel component in LWC, custom carousel in lwc, Custom Lightning Carousel with Image in lwc, Custom Slide show carousel in LWC, image slider in lightning component, lightning banner, lightning carousel-image size, lightning-carousel-image in LWC, lightning-carousel-image onclick, lightning:carousel with arrows, lwc custom lightning carousel with image, slds slider, slds-carouselTutorial
Originally published at https://www.w3web.net on June 20, 2021.
