Quote Slider

Component
OutSystems
1

This is a block element, that uses the hero slider component structure.
This was an old component and during the supernova we changed it to adapt to the new slider. We have no information about its previous developments.
This component only allows per slide, the placement of a quote, the position of the person, their image, their company logo and a background image.
All images must have the same height and, as the text color is white, the use of the background image is mandatory.

Libraries

Slick Slider
jQuery
Bootstrap

HTML Code












[PLACE QUOTE TEXT]





[PLACE POSITION]



[PLACE IMG ALT]




[PLACE IMG ALT]









How to Implement

This was an old component that we adapted to use the new slider. 

The structure of this slider is the same as the hero slider, the difference is the content and the quote-slider class in the slider__hero div. 

Its content is fixed, the only things that are editable are the texts and images. 

In the row inside the container place the class w-100 and inside this row the quote-slider__content and quote-slider__image div's.

The quote text must be placed inside the h3 tag, the position in the p tag and the logo in the img tag below the position text.

The image of the person is placed inside the img tag in the last figure. Don't forget the alt in both images.

Since the text is white it is mandatory the use of a background image, that must be placed in the hero-section__image div. 

Tasks Front End

DMW-624

Tasks Back End

DMW-1139

Tasks details

NA

Views Path

/Views/Slider/HeroSlider.cshtml
/Views/PageContent/Home/QuoteSlide.cshtml

Component Variations

Default


It wasn't possible to add the component due to errors in the data source and width of this placeholder.

These points will be addressed in task DMW-1303 .

How to use
  1. Go to the Content Editor
  2. Go to the folder “Slider Folder“, in /sitecore/content/Outsystems/Website/Data/Slider Folder
  3. Insert a new quote slider branch datasource. (A base structure will be created with 3 initial slides)
  4. Fill in the generated data with the expected information
  5. Go to the Experience Editor and insert a Quote Slider Component in the grid
  6. Select the datasource to render
  7. Customize and test

Undeveloped Options

Example page

Figma Link