Paul Smith's Component Library

Card Carousel 

<div class="card_carousel">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="card_carousel_inner">
                <h2 class="card_carousel_title">Not Your Typical Open House <span>Learn & Play</span></h2>
                <div class="card_carousel_wrapper js-carousel" data-carousel-options='{"pagination": false, "contained": false, "matchWidth": false}'>
                    <div class="card_carousel_item theme_white">
                        <div class="card_carousel_item_media">
                            <figure class="card_carousel_item_figure">

                                <img class="card_carousel_item_image" srcset="https://images.fastspot.com/generic/980x980/4 980w, https://images.fastspot.com/generic/740x740/4 740w, https://images.fastspot.com/generic/500x500/4 500w, https://images.fastspot.com/generic/300x300/4 300w" src="https://images.fastspot.com/generic/300x300/4" alt="" loading="lazy" width="300" height="300">
                            </figure>
                        </div>
                        <div class="card_carousel_item_content">
                            <h3 class="card_carousel_item_title">Learn About Our Unique Academic Programs</h3>
                            <span class="card_carousel_item_description">A few of our most popular programs include Culinary and Hotel Management, Forestry, Fisheries & Wildlife Science, and National Resource Conservation Management.</span>
                        </div>
                    </div>
                    <div class="card_carousel_item theme_black">
                        <div class="card_carousel_item_media">
                            <figure class="card_carousel_item_figure">

                                <img class="card_carousel_item_image" srcset="https://images.fastspot.com/generic/980x980/5 980w, https://images.fastspot.com/generic/740x740/5 740w, https://images.fastspot.com/generic/500x500/5 500w, https://images.fastspot.com/generic/300x300/5 300w" src="https://images.fastspot.com/generic/300x300/5" alt="" loading="lazy" width="300" height="300">
                            </figure>
                        </div>
                        <div class="card_carousel_item_content">
                            <h3 class="card_carousel_item_title">Hear About the Kinds of Courses You Could Take</h3>
                            <span class="card_carousel_item_description">Like Adirondack Raptors, Chocolate Artistry, Swiftwater Rescue, Watershed Science, and Wetland Ecosystems and Management, to name a few. Who's ready to dive in?</span>
                        </div>
                    </div>
                    <div class="card_carousel_item theme_brown">
                        <div class="card_carousel_item_media">
                            <figure class="card_carousel_item_figure">

                                <img class="card_carousel_item_image" srcset="https://images.fastspot.com/generic/980x980/3 980w, https://images.fastspot.com/generic/740x740/3 740w, https://images.fastspot.com/generic/500x500/3 500w, https://images.fastspot.com/generic/300x300/3 300w" src="https://images.fastspot.com/generic/300x300/3" alt="" loading="lazy" width="300" height="300">
                            </figure>
                        </div>
                        <div class="card_carousel_item_content">
                            <h3 class="card_carousel_item_title">Euismod Porta Ligula Inceptos Bibendum</h3>
                            <span class="card_carousel_item_description">A few of our most popular programs include Culinary and Hotel Management, Forestry, Fisheries & Wildlife Science, and National Resource Conservation Management.</span>
                        </div>
                    </div>
                    <div class="card_carousel_item theme_green">
                        <div class="card_carousel_item_media">
                            <figure class="card_carousel_item_figure">

                                <img class="card_carousel_item_image" srcset="https://images.fastspot.com/generic/980x980/2 980w, https://images.fastspot.com/generic/740x740/2 740w, https://images.fastspot.com/generic/500x500/2 500w, https://images.fastspot.com/generic/300x300/2 300w" src="https://images.fastspot.com/generic/300x300/2" alt="" loading="lazy" width="300" height="300">
                            </figure>
                        </div>
                        <div class="card_carousel_item_content">
                            <h3 class="card_carousel_item_title">Risus Cursus Fusce Tellus Elit</h3>
                            <span class="card_carousel_item_description">Like Adirondack Raptors, Chocolate Artistry, Swiftwater Rescue, Watershed Science, and Wetland Ecosystems and Management, to name a few. Who's ready to dive in?</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="card_carousel">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="card_carousel_inner">
				<h2 class="card_carousel_title">{{ subheading }} <span>{{ title }}</span></h2>
				<div class="card_carousel_wrapper js-carousel" data-carousel-options='{"pagination": false, "contained": false, "matchWidth": false}'>
					{% for item in items %}
					<div class="card_carousel_item theme_{{ item.theme }}">
						<div class="card_carousel_item_media">
							<figure class="card_carousel_item_figure">
								{% include '@partial-image' with {
									class: 'card_carousel_item',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.square.med,
										img.square.sml,
										img.square.xsml,
										img.square.xxsml
									]
								} %}
							</figure>
						</div>
						<div class="card_carousel_item_content">
							<h3 class="card_carousel_item_title">{{ item.title }}</h3>
							<span class="card_carousel_item_description">{{ item.description }}</span>
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.