How to complete an image slider task according to this pdf ?
Hi , friend
I hava downloaded a pdf file from this url - https://academy.pega.com/prweb/PegaSSO/WmhSmvRrQ7qWntq73M7R4oiuqIskpuJu*/!STANDARD?RegID=REG-373208&LessonID=L-3643&pw=909c8ed15e3fc1007afbfd268e9e04a5 .
Our requirement is the same as the Scenario of the pdf :
When users login to the portal they see an image displaying a property even before they search. The
requirement states that the customers should see a scrolling carousel displaying between a series of
images. We have included the following image files (Carouselimg1.jpeg, Carouselimg2.jpg and
Carouselimg3.jpg) that can be used in the carousel. There is a custom js included in the section for
this purpose.
In fact, I don't know how to complete an image slider task according to this pdf. Can you show the screenshots of the following procedures -
d. Include this section in the Splash section in place of the icon control that is referencing an external URL directly.
2. Scrolling down we can find that it includes two nonautogenerated sections named slick-js and slick-init-js.
a. Open slick-js to see the script defined for the carousel effect
b. Open slick-init-js and update the autoPlaySpeed as 2000 instead of 5000.
The version of our pega system is 7.2.1.
Thank you !
isoftstone
CN
Hello!
I can give you the pdf name and the content, and I hope it will be helpful for you to confirm this question:
The pdf name : Creating an Image Slider.pdf．
There is a copy of this pdf:
Hello!
I can give you the pdf name and the content, and I hope it will be helpful for you to confirm this question:
The pdf name : Creating an Image Slider.pdf．
There is a copy of this pdf:
Exercise: Creating an Image Slider
Scenario
When users login to the portal they see an image displaying a property even before they search. The
requirement states that the customers should see a scrolling carousel displaying between a series of
images. We have included the following image files (Carouselimg1.jpeg, Carouselimg2.jpg and
Carouselimg3.jpg) that can be used in the carousel. There is a custom js included in the section for
this purpose.
Approach
Create a section and add icon controls to include webwb/Carouselimg1.jpg,
webwb/Carouselimg2.jpeg and webwb/Carouselimg3.png in the default layout.
Include this section in the splash section.
Open the section named slick-js to see the script that has been used to setup the carousel effect.
The animation is set in a different file.
Open the section named slick-init-js and adjust the autoPlaySpeed to 2000.
Procedure
1. Create a new section and include these images for the carousel effect.
a. Create a section named Carousel in Data-Portal.
b. Add a new icon control and in the properties panel use the Icon source as Image and
then reference the image name.
c. Similarly add two other icon controls and reference Carouselimg2.jpeg and
Carouselimg3.jpg.
d. Include this section in the Splash section in place of the icon control that is
referencing an external URL directly.
2. Scrolling down we can find that it includes two nonautogenerated sections named slick-js and
slick-init-js.
a. Open slick-js to see the script defined for the carousel effect
b. Open slick-init-js and update the autoPlaySpeed as 2000 instead of 5000.
3. Open the user portal and check if the image animation works.