Post Slider

Previous Next

We are Breakthrough T1D  

Breaking through to Congress at 2024 Government Day

Breakthrough T1D heads to ADA’s 84th Scientific Sessions

Powering research breakthroughs

A bittersweet goodbye for Sydney Yovic, Breakthrough T1D Chief Strategy Officer and Chief of Staff

Breakthrough T1D Spearheads the Formation of Monitoring Guidelines

At ADA 2024, Breakthrough T1D-funded research takes center stage

The following example shows the full HTML structure of the Post Slider component:

<div class="bt1d-post-slider">
	<div class="bt1d-post-slider__inner">
		<div class="splide">
			<div class="bt1d-post-slider__controls">
				<div class="bt1d-post-slider__navigation splide__arrows">
					<button aria-label="Previous" type="button" class="post-slider__navigation-button post-slider__navigation-button--previous splide__arrow splide__arrow--prev"></button>
					<button aria-label="Next" type="button" class="post-slider__navigation-button post-slider__navigation-button--next splide__arrow splide__arrow--next"></button>
				</div>
			</div>
			<div class="splide__track">
				<div class="bt1d-post-slider__inner-container splide__list">
					<div class="splide__slide"><!-- Slide content here. --></div>
					<div class="splide__slide"><!-- Slide content here. --></div>
					<div class="splide__slide"><!-- Slide content here. --></div>
					<div class="splide__slide"><!-- Slide content here. --></div>
					<div class="splide__slide"><!-- Slide content here. --></div>
				</div>
			</div>
		</div>
	</div>
</div>

Key Classes:

• splide The element to be used for the Splide slider.
• splide__arrows The container for the Splide navigation arrows.
• splide__arrow The class for the next and previous arrow buttons.
  • splide__arrow--prev A modifier class to indicate the previous button.
  • splide__arrow--next A modifier class to indicate the next button.
• splide__track The wrapper for the main Splide slider content.
• splide__list The container for the individual Splide slides.
• splide__slide An individual Splide slide. Each Card added to the slide should be placed inside this element.

• bt1d-post-slider: The main wrapper for the Post Slider component.
• bt1d-post-slider__inner: An inner wrapper that contains the markup for the slider.
• bt1d-post-slider__controls A wrapper for the slider controls.
• bt1d-post-slider__navigation A wrapper for the navigation buttons to be applied to the same element used for the Splide arrows,
• bt1d-post-slider__navigation-button The class next and previous buttons to be applied to the same elements used for the Splide arrow buttons.
  • bt1d-post-slider__navigation-button--prev A modifier class to indicate the previous button.
  • bt1d-post-slider__navigation-button--next A modifier class to indicate the next button.
• bt1d-post-slider__inner-container The container for the individual Splide slides to be applied to the same element as the Splide list.