- {% for testimonial_row in testimonials_table %}
- {% set review = frappe.db.get_value("LMS Course Review", testimonial_row.testimonials, ["owner", "review"], as_dict=True) %}
-
- {% set member = frappe.get_doc("User", review.owner) %}
-
- {{ widgets.Avatar(member=member, avatar_class="avatar-testimonial") }}
-
-
{{ member.full_name }}
- {% if member.profession %}
{{ member.profession }}
{% endif %}
+
{{ _(title) }}
+
+
+ {% for testimonial_row in testimonials_table %}
+ {% set review = frappe.db.get_value("LMS Course Review", testimonial_row.testimonials, ["owner", "review"], as_dict=True) %}
+
+ {% if loop.index % 3 == 1 %}
+
+ {% endif %}
+
+ {% set member = frappe.get_doc("User", review.owner) %}
+
+
+ {{ widgets.Avatar(member=member, avatar_class="avatar-testimonial") }}
+
+
+
{{ member.full_name }}
+ {% if member.profession %}
{{ member.profession }}
{% endif %}
+
+
+
+ "{{ review.review }}"
+
-
- {{ review.review }}
-
- {% endfor %}
+ {% if loop.index % 3 == 0 %}
{% endif %}
+ {% endfor %}
+
+
+
+
+
+ Previous
+
+
+
+ {% set number_of_slides = (testimonials_table|length / 3)|round(method="ceil")|int %}
+ {% for i in range(number_of_slides) %}
+
+ {% endfor %}
+
+
+
+
+ Next
+
+
diff --git a/school/public/css/style.css b/school/public/css/style.css
index b48c04e8..4828614a 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -1395,4 +1395,62 @@ pre {
.testimonial-card {
flex-direction: column;
padding: 1rem 1rem 2rem;
+ height: 100%;
+}
+
+.testimonial-author {
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 150%;
+ color: var(--text-color-dark);
+}
+
+.testimonial-review {
+ color: var(--text-color-dark);
+}
+
+.testimonial-profession {
+ font-size: 0.625rem;
+}
+
+.carousel-indicators li {
+ background-color: var(--gray-600);
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+}
+
+.carousel-control-prev-icon {
+ background-image: url("/assets/school/icons/slider-arrow-left.svg");
+ width: 40px;
+ height: 40px;
+}
+
+.carousel-control-next-icon {
+ background-image: url("/assets/school/icons/slider-arrow-right.svg");
+ width: 40px;
+ height: 40px;
+}
+
+.carousel-control-prev, .carousel-control-next {
+ position: inherit;
+ width: auto;
+}
+
+.carousel-indicators {
+ position: inherit;
+ margin: 0;
+}
+
+.slider-controls {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin: 40px auto 0;
+}
+
+.carousel-indicators li {
+ border: none;
+ margin: 0 6px;
}
diff --git a/school/public/icons/slider-arrow-left.svg b/school/public/icons/slider-arrow-left.svg
new file mode 100644
index 00000000..45fc33c9
--- /dev/null
+++ b/school/public/icons/slider-arrow-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/school/public/icons/slider-arrow-right.svg b/school/public/icons/slider-arrow-right.svg
new file mode 100644
index 00000000..58cf6311
--- /dev/null
+++ b/school/public/icons/slider-arrow-right.svg
@@ -0,0 +1,3 @@
+