No notes defined.
<section class="student-stories">
<div class="student-stories--text-container__left">
{# <h3 class="student-stories--title__main">{{ title }}</h3>
<h4 class="student-stories--title__sub-heading">{{ subTitle }}</h4>
<p class="student-stories--lead">{{ lead }}</p>
<a class="student-stories--link" href="{{ link.href }}">{{ link.text }}</a> #}
{% render '@uol-content-block', content_block %}
</div>
<div class="student-stories-container__right">
<nav class="student-stories--nav">
<button class="slider-prev uol-button uol-icon uol-icon--mdiArrowLeft uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Contact</span></button>
<button class="slider-next uol-button uol-icon uol-icon--mdiArrowRight uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Contact</span></button>
</nav>
<ul class="student-stories--list">
{% for student in stories %}
<li class="student-stories--list-item">
<a href="{{ student.href }}" class="student-stories--list-item__link">
<h5 class="student-stories--list-item__title">{{ student.title }}</h5>
<img class="student-stories--list-item__img" src="{{ student.img.src }}" alt="{{ student.img.alt }}">
<p class="student-stories--list-item__lead">{{ student.lead }}</p>
</a>
</li>
{% endfor %}
</ul>
{# <button class="slider-prev"><i class="bx bx-chevron-left"><-</i></button>
<button class="slider-next"><i class="bx bx-chevron-right">-></i></button> #}
</div>
</section>
<section class="student-stories">
<div class="student-stories--text-container__left">
<div class="uol-content-block">
<h4 class="uol-content-block__heading">Student stories</h4>
<p class="uol-content-block__copy">Don’t just take it from us–hear from our students and alumni about life at Leeds and beyond</p>
<button class="uol-button uol-button--default
" type="submit">Meet our students</button>
</div>
</div>
<div class="student-stories-container__right">
<nav class="student-stories--nav">
<button class="slider-prev uol-button uol-icon uol-icon--mdiArrowLeft uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Contact</span></button>
<button class="slider-next uol-button uol-icon uol-icon--mdiArrowRight uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Contact</span></button>
</nav>
<ul class="student-stories--list">
<li class="student-stories--list-item">
<a href="/student-stories/njoki" class="student-stories--list-item__link">
<h5 class="student-stories--list-item__title">Njoki’s story</h5>
<img class="student-stories--list-item__img" src="/placeholders/new-homepage/student_1.jpg" alt="Astronaut on a space walk">
<p class="student-stories--list-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
</a>
</li>
<li class="student-stories--list-item">
<a href="/student-stories/abbie" class="student-stories--list-item__link">
<h5 class="student-stories--list-item__title">Abbie’s story</h5>
<img class="student-stories--list-item__img" src="/placeholders/new-homepage/student_2.jpg" alt="Astronaut on a space walk">
<p class="student-stories--list-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
</a>
</li>
<li class="student-stories--list-item">
<a href="/student-stories/mo" class="student-stories--list-item__link">
<h5 class="student-stories--list-item__title">Mo’s story</h5>
<img class="student-stories--list-item__img" src="/placeholders/new-homepage/student_3.jpg" alt="Astronaut on a space walk">
<p class="student-stories--list-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
</a>
</li>
<li class="student-stories--list-item">
<a href="/student-stories/abbie" class="student-stories--list-item__link">
<h5 class="student-stories--list-item__title">Abbies story</h5>
<img class="student-stories--list-item__img" src="/placeholders/new-homepage/student_4.jpg" alt="Astronaut on a space walk">
<p class="student-stories--list-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
</a>
</li>
</ul>
</div>
</section>
// @import "node_modules/glider-js/glider.css";
.glider,.glider-contain{margin:0 auto;position:relative}.glider,.glider-track{transform:translateZ(0)}.glider-dot,.glider-next,.glider-prev{border:0;padding:0;user-select:none;outline:0}.glider-contain{width:100%}.glider{overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.glider-track{width:100%;margin:0;padding:0;display:flex;z-index:1}.glider.draggable{user-select:none;cursor:-webkit-grab;cursor:grab}.glider.draggable .glider-slide img{user-select:none;pointer-events:none}.glider.drag{cursor:-webkit-grabbing;cursor:grabbing}.glider-slide{user-select:none;justify-content:center;align-content:center;width:100%;min-width:150px}.glider-slide img{max-width:100%}.glider::-webkit-scrollbar{opacity:0;height:0}.glider-next,.glider-prev{position:absolute;background:0 0;z-index:2;font-size:40px;text-decoration:none;left:-23px;top:30%;cursor:pointer;color:#666;opacity:1;line-height:1;transition:opacity .5s cubic-bezier(.17,.67,.83,.67),color .5s cubic-bezier(.17,.67,.83,.67)}.glider-next:focus,.glider-next:hover,.glider-prev:focus,.glider-prev:hover{color:#ccc}.glider-next{right:-23px;left:auto}.glider-next.disabled,.glider-prev.disabled{opacity:.25;color:#666;cursor:default}.glider-hide{opacity:0}.glider-dots{user-select:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0}.glider-dot{display:block;cursor:pointer;color:#ccc;border-radius:999px;background:#ccc;width:12px;height:12px;margin:7px}.glider-dot:focus,.glider-dot:hover{background:#ddd}.glider-dot.active{background:#a89cc8}@media(max-width:36em){.glider::-webkit-scrollbar{opacity:1;-webkit-appearance:none;width:7px;height:3px}.glider::-webkit-scrollbar-thumb{opacity:1;border-radius:99px;background-color:rgba(156,156,156,.25);-webkit-box-shadow:0 0 1px rgba(255,255,255,.25);box-shadow:0 0 1px rgba(255,255,255,.25)}}
.student-stories {
@include media(">=uol-media-m") {
display: flex;
padding: 2rem;
}
}
.student-stories--text-container__left {
background-color: #dbc9c9;
height: fit-content;
padding: 1rem;
@include media(">=uol-media-m") {
width: 20%;
// &::before {
// content: "";
// position: absolute;
// width: 100%;
// height: 400px;
// z-index: -1;
// background-color: #dbc9c9;
// }
}
}
.student-stories-container__right {
@include media(">=uol-media-m") {
width: 70%;
}
}
.student-stories--link {
background-color: #111;
color: #fff;
padding: 1rem;
text-decoration: none;
}
.student-stories--nav {
display: flex;
gap: 1rem;
padding: 1rem;
background-color: #dbc9c9;
.uol-button {
background-color: #A12B16;
padding: 1rem;
text-decoration: none;
&[aria-disabled="true"] {
background-color: #6E6B6B;
}
}
}
.student-stories--list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 0;
}
.student-stories--list-item {
display: flex;
flex-direction: column;
}
.student-stories--list-item__link {
text-decoration: none;
display: flex;
flex-direction: column;
}
.student-stories--list-item__title {
order: 2;
}
.student-stories--list-item__lead {
order: 3;
}
.student-stories--list-item__img {
height: 500px;
object-fit: cover;
order: 1;
}
.glider-track {
gap: 20px;
}
import Glider from 'glider-js';
export const studentStoriesSetup = () => {
const studentStoriesBlock = document.querySelectorAll('.student-stories');
studentStoriesBlock.forEach( (section) => {
new Glider(section.querySelector('.student-stories--list'), {
// Optional parameters
slidesToShow: 1.25,
slidesToScroll: 1,
draggable: true,
duration: 0.5,
arrows: {
prev: ".slider-prev",
next: ".slider-next"
},
// Responsive breakpoints
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
scrollLock: false,
}
}
]
});
})
}
{
"content_block": {
"heading": {
"level": "4",
"title": "Student stories"
},
"copy": "Don’t just take it from us–hear from our students and alumni about life at Leeds and beyond",
"button": {
"style": "default",
"type": "submit",
"content": "Meet our students"
}
},
"stories": [
{
"title": "Njoki’s story",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"img": {
"src": "/placeholders/new-homepage/student_1.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/njoki"
},
{
"title": "Abbie’s story",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"img": {
"src": "/placeholders/new-homepage/student_2.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/abbie"
},
{
"title": "Mo’s story",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"img": {
"src": "/placeholders/new-homepage/student_3.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/mo"
},
{
"title": "Abbies story",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"img": {
"src": "/placeholders/new-homepage/student_4.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/abbie"
}
]
}