UIkit 3 Two Columns Projects Slider Section

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Full Preview

Build with UIkit 3.5.4 in Projects, update July 27, 2020

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<div class="uk-section">
	<div class="uk-container">
		<div class="uk-visible-toggle" uk-slider="autoplay: false">
			<div class="uk-position-relative">
				<div class="uk-slider-container uk-box-shadow-medium uk-background-primary-light">
					<ul class="uk-slider-items uk-child-width-1-1">
						<li>
							<div class="uk-grid-collapse" uk-grid>
								<div class="[email protected]">
									<img src="https://source.unsplash.com/ELYUBrnvLtg/800x800" alt="Image">
								</div>
								<div class="[email protected] uk-flex uk-flex-middle">
									<div class="uk-padding-large">
										<h3 class="uk-text-uppercase uk-h5 uk-letter-spacing-small">Our Best Projects</h3>
										<h2 class="uk-heading-small uk-margin-medium-top">Education</h2>
										<div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
										</div>
										<hr class="uk-margin-medium-top uk-separator-small">
										<h3 class="uk-margin-remove uk-text-uppercase uk-h5 uk-letter-spacing-small">
											<a href="#">View Details<span class="uk-margin-left" uk-icon="arrow-right"></span></a>
										</h3>
									</div>
								</div> 
							</div>
						</li>
						<li>
							<div class="uk-grid-collapse" uk-grid>
								<div class="[email protected]">
									<img src="https://source.unsplash.com/2LgJiWdDdO4/800x800" alt="Image">
								</div>
								<div class="[email protected] uk-flex uk-flex-middle">
									<div class="uk-padding-large">
										<h3 class="uk-text-uppercase uk-h5 uk-letter-spacing-small">Our Best Projects</h3>
										<h2 class="uk-heading-small uk-margin-medium-top">Technology</h2>
										<div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
										</div>
										<hr class="uk-margin-medium-top uk-separator-small">
										<h3 class="uk-margin-remove uk-text-uppercase uk-h5 uk-letter-spacing-small">
											<a href="#">View Details<span class="uk-margin-left" uk-icon="arrow-right"></span></a>
										</h3>
									</div>
								</div> 
							</div>
						</li>
					</ul>
				</div>
				<div class="[email protected]">
					<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
					<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
				</div>
				<div class="[email protected]">
					<a class="uk-position-center-left-out uk-slidenav-large" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
					<a class="uk-position-center-right-out uk-slidenav-large" href="#" uk-slidenav-next uk-slider-item="next"></a>
				</div>
			</div>
		</div>
	</div>
</div>