Create an extension with Template, Sass, Configuration and javascript file.
In Template file:
<div class="slider-main-container">
<center>
<div class="pcin-text-xl pcin-bold heading">Testimonials</div>
<div class="pcin-text-sm pcin-normal pcin-normal subHeading">See what our customers have to say about their
experiences!</div>
</center>
<div class="slider-container">
<div class="slider">
{{#each carouselDetails}}
<div class="item-card">
<div class="firstRow">
<img class="avatar" src="{{avatar}}" alt="Profile Image">
<div class="details">
<p class="pcin-text-sm pcin-semi-bold name">{{{name}}}</p>
<p class="pcin-text-xs pcin-semi-bold position">{{{position}}}</p>
</div>
<img class="quote-icon" src="{{quoteicon}}" alt="Quote Image">
</div>
<div class="secondRow">
<p class="pcin-text-sm pcin-normal text-content">{{{message}}}</p>
</div>
</div>
{{/each}}
</div>
</div>
<div class="slider-button">
<center>
<button class="icon prev-button"></button>
<button class="icon next-button"></button>
</center>
</div>
</div>In the entry file:
define(
'JJ.testimonialSlider.testiominalSlider'
, [
'JJ.testimonialSlider.testiominalSlider.View'
]
, function (
testiominalSliderView
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
var layout = container.getComponent('Layout');
if (layout) {
}
layout.addChildView('testimonialSlider', function () {
return new testiominalSliderView({ container: container });
});
}
};
});In the view file:
// @module JJ.testimonialSlider.testiominalSlider
define('JJ.testimonialSlider.testiominalSlider.View'
, [
'jj_testimonialslider_testiominalslider.tpl'
, 'Backbone'
, 'Configuration'
]
, function (
jj_testimonialslider_testiominalslider_tpl
, Backbone
, Configuration
) {
'use strict';
return Backbone.View.extend({
template: jj_testimonialslider_testiominalslider_tpl
, events: {
'click .next-button': 'moveNext',
'click .prev-button': 'movePrev'
}, moveNext: function () {
var slider = this.$('.slider-container');
var slideWidth = slider.find('.item-card').outerWidth();
var currentScrollLeft = slider.scrollLeft();
var newScrollLeft = currentScrollLeft + slideWidth;
slider.animate({ scrollLeft: newScrollLeft }, 500);
},
movePrev: function () {
var slider = this.$('.slider-container');
var slideWidth = slider.find('.item-card').outerWidth();
var currentScrollLeft = slider.scrollLeft();
var newScrollLeft = currentScrollLeft - slideWidth;
slider.animate({ scrollLeft: newScrollLeft }, 500);
}
, bindings: {
}
, childViews: {
} //To get the array values from the configuration.
, getContext: function getContext() {
var slider = Configuration.get('testiominalSlider.config');
return {
carouselDetails: slider
};
}
});
});In Configuration file:
{
"type": "object",
"subtab": {
"id": "testimonialSlider",
"group": "extensions",
"title": "Testimonials",
"description": "This is to display the testimonial slider."
},
"properties": {
"testiominalSlider.config": {
"group": "extensions",
"subtab": "testimonialSlider",
"type": "array",
"title": "Testimonial slider",
"description": "Display the testimonial slider.",
"items": {
"type": "object",
"properties": {
"avatar": {
"type": "string",
"title": "Profile Image",
"description": "Displays the profile image."
},
"name": {
"type": "string",
"title": "Name of the customer",
"description": "Displays name of the customer."
},
"position": {
"type": "string",
"title": "Position of the customer.",
"description": "Displays the position of the customer."
},
"message": {
"type": "string",
"title": "Message updated by the client.",
"description": "Display the message updated by client."
},
"quoteicon": {
"type": "string",
"title": "Quote Icon",
"description": "Displays the quote icon."
}
}
}
}
}
}In Sass file:
.testiominalslider-info-card {
@extend .info-card;
}
.testiominalslider-info-card-content {
@extend .info-card-content;
color: $sc-color-secondary;
font-weight: bold;
}
.slider-main-container {
margin-top: 60px;
}
.slider-container {
overflow: hidden;
position: relative;
margin-top: 37px;
}
.slider-main-container .heading {
color: rgba(126, 175, 0, 1);
height: 41px;
width: 191px;
letter-spacing: 1px;
}
.slider-main-container .subHeading {
color: rgba(66, 69, 72, 1);
height: 19px;
width: 454px;
margin-top: 10px;
}
.slider-container .slider {
display: flex;
transition: transform 0.5s ease-in-out;
height: 258px;
min-width: 1920px;
}
.slider-container .slider:hover {
animation-play-state: paused;
}
.slider-container .item-card {
flex: 0 0 26.7%;
background-color: rgb(238, 238, 238);
padding: 10px;
box-sizing: border-box;
border-radius: 25px;
margin-right: 25px;
background-color: rgba(240, 243, 244, 1);
}
.slider-container .firstRow {
margin-top: 50px;
margin-left: 10px;
height: 25%;
}
.slider-container img.avatar {
float: left;
}
.slider-container .details {
float: left;
margin-top: 10px;
margin-left: 10px;
}
.slider-container p.name {
margin-top: 0;
color: #3A586A;
}
.slider-container p.position {
margin-top: 5px;
color: rgb(58, 88, 106);
word-spacing: 1px;
}
.slider-container img.quote-icon {
float: right;
margin-right: 5%;
}
.slider-container p.text-content {
width: 90%;
margin-left: 15px;
margin-top: 12px;
color: rgb(0, 0, 0);
word-spacing: 1px;
line-height: 1.4;
}
.prev-button::before {
display: block;
padding: 5px 25px 5px 10px;
border-radius: 25px;
border: 2px solid rgb(126, 175, 0);
color: rgb(126, 175, 0);
content: "\f053";
font-size: x-large;
}
.next-button::before {
display: block;
padding: 5px 25px 5px 10px;
border-radius: 25px;
border: 2px solid rgb(126, 175, 0);
color: rgb(126, 175, 0);
content: "\f054";
font-size: x-large;
}
.slider-container .icon {
font-size: 17px;
}
.icon.prev-button:hover::before,
.icon.next-button:hover::before {
background-color: rgb(126, 175, 0);
color: rgb(255, 255, 255);
}
button.icon.next-button,
button.icon.prev-button {
background-color: rgb(255, 255, 255);
color: rgb(126, 175, 0);
border: none;
cursor: pointer;
}
button.icon.next-button {
margin-left: 30px;
}
.slider-button {
margin-top: 35px;
margin-bottom: 90px;
}
@media (max-width: 768px) {
.home-banner-main {
margin-bottom: 0px;
}
.slider-container p.name {
font-size: 14px;
}
.slider-container .item-card {
flex: 0 0 19.2%;
}
.slider-button {
display: none;
}
.slider-container img.avatar {
margin-top: 19%;
}
.slider-container .details {
margin-top: 21%;
}
.slider-container p.position {
margin-top: 10px;
letter-spacing: 1px;
}
.slider-container img.quote-icon {
margin-right: 2%;
margin-top: 10px;
}
.slider-container .firstRow {
margin-top: 0px;
margin-left: 5px;
}
.slider-container .secondRow {
float: left;
margin-top: 4%;
}
.slider-container .item-card {
margin-right: 15px;
}
.slider-container p.text-content {
margin-left: 7px;
line-height: 1.6;
word-spacing: 1px;
width: 95%;
}
.slider-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 30px;
margin-bottom: 60px;
}
.slider-main-container .heading {
height: 34px;
width: 159px;
font-size: 25px;
letter-spacing: 1px;
}
.slider-main-container .subHeading {
height: 38px;
width: 277px;
font-size: 14px;
}
.slider-main-container {
margin-top: 0px;
}
}In Configuration record add the details to be displayed:
Now add the data-view created using the extension in which page we want to display. For example i want the slider to display in home page so i added the data-view in home tpl file.
OUTPUT:
For adding the slider in a SMT page pass the data-view in this page section of the SMT page.
