St. George's University Component Library

News Feature Carousel 

<div class="news_feature_carousel">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="news_feature_carousel_list js-carousel" data-carousel-options='{"controls": false, "pagination": false, "matchWidth": false, "contained": false}'>
                <div class="news_feature_carousel_item">
                    <figure class="news_feature_carousel_item_figure">

                        <img class="news_feature_carousel_item_image" srcset="https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
                    </figure>
                    <div class="news_feature_carousel_item_wrapper">
                        <h2 class="news_feature_carousel_item_title">
                            <a href="#" class="news_feature_carousel_item_title_link">St. George's University Awards 110 Incoming Students With Scholarships</a>
                        </h2>
                        <span class="news_feature_carousel_item_school">School of Medicine</span>
                    </div>
                </div>
                <div class="news_feature_carousel_item">
                    <figure class="news_feature_carousel_item_figure">

                        <img class="news_feature_carousel_item_image" srcset="https://images.fastspot.com/generic/740x416/2 740w, https://images.fastspot.com/generic/500x282/2 500w, https://images.fastspot.com/generic/300x169/2 300w" src="https://images.fastspot.com/generic/300x169/2" alt="" loading="lazy" width="300" height="169">
                        <span class="news_feature_carousel_item_icon">
                            <svg class="icon icon_video">
                                <use href="/images/icons.svg#video" />
                            </svg>
                        </span>
                    </figure>
                    <div class="news_feature_carousel_item_wrapper">
                        <h2 class="news_feature_carousel_item_title">
                            <a href="#" class="news_feature_carousel_item_title_link">From The Deep South To Down Under: How This SVM Grad Found “The Place To Be” </a>
                        </h2>
                        <span class="news_feature_carousel_item_school">School of Veterinary Medicine</span>
                    </div>
                </div>
                <div class="news_feature_carousel_item">
                    <figure class="news_feature_carousel_item_figure">

                        <img class="news_feature_carousel_item_image" srcset="https://images.fastspot.com/generic/740x416/3 740w, https://images.fastspot.com/generic/500x282/3 500w, https://images.fastspot.com/generic/300x169/3 300w" src="https://images.fastspot.com/generic/300x169/3" alt="" loading="lazy" width="300" height="169">
                        <span class="news_feature_carousel_item_icon">
                            <svg class="icon icon_podcast">
                                <use href="/images/icons.svg#podcast" />
                            </svg>
                        </span>
                    </figure>
                    <div class="news_feature_carousel_item_wrapper">
                        <h2 class="news_feature_carousel_item_title">
                            <a href="#" class="news_feature_carousel_item_title_link">NCFMEA: SGU Med School Accreditor On Par With US Schools </a>
                        </h2>
                        <span class="news_feature_carousel_item_school">School of Veterinary Medicine</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="news_feature_carousel">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="news_feature_carousel_list js-carousel" data-carousel-options='{"controls": false, "pagination": false, "matchWidth": false, "contained": false}'>
				{% for item in items %}
					<div class="news_feature_carousel_item">
						<figure class="news_feature_carousel_item_figure">
							{% include '@partial-image' with {
								class: 'news_feature_carousel_item',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								]
							} %}
							{% if item.video %}
							<span class="news_feature_carousel_item_icon">{{ icon('video') }}</span>
							{% endif %}
							{% if item.podcast %}
							<span class="news_feature_carousel_item_icon">{{ icon('podcast') }}</span>
							{% endif %}
						</figure>
						<div class="news_feature_carousel_item_wrapper">
							<h2 class="news_feature_carousel_item_title">
								<a href="{{ item.url }}" class="news_feature_carousel_item_title_link">{{ item.title }}</a>
							</h2>
							<span class="news_feature_carousel_item_school">{{ item.school }}</span>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>

No notes defined.