Slider

Javascript required

The slider block adds the ability to create a horizontal sliders - which can be control based on a device width.

The slide object is a dynamic method of showcasing relevant information in an interactive pattern, which only part of the content is revealed and further information is available either based on an auto scroll method, or by user interaction.

The most common use case of sliders are:

To display a set of logo's of partners.
To create a slider of initiaitves.
To create a slider with news articles or blog posts.
To encapsulate a horizontal scrolling section of any card element.

Where to use or not to use a slider is the decision of the enity, based on user research and the layout of the page. However, it is recommend to use a slider when the information to be displayed is not critical.

Key elements to note

Avoid using too many auto scrolling elements on a single page.
You may choose to display the elements without a scroller on a desktop and turn it into a slider on mobile to maintain an aesthetic look towards the layout.
When using an auto scroll feature on a slider, do not change the elements quickly. Maintain a minimum timer of 7 seconds before shifting the layout.
Always allow for touch based gestures for scrolling elements.
Even though a touch based gesture is available, you must provide the ability to paginate the elements in a slider manually.

This block depends on Javascript to run as slider

To utilize this block, please ensure that you are using a Slider Animation Library. For the purpose of demo, this block uses the Slick Slider - a library bundled to be used along with jQuery.

You may use any other slider library - as long as you follow the rules on how to place elements within the hero object.

Variations

Variations are different versions of this block that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Logo slider

<div class="logos-slider aegovs-slider-style [&_.slick-slide]:mx-2.5 [&_.slick-list]:-mx-2.5 sm:[&_.slick-slide]:mx-3.5 sm:[&_.slick-list]:-mx-3.5">
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo1.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo2.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo3.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo4.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo5.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo6.png" alt="">
		</a>
	</div>
	<div>
		<a href="#"
			class="flex items-center justify-center hover:opacity-90 mx-auto h-40 w-40 sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-60 2xl:w-60 p-2 xl:p-4">
			<img src="images/logo7.png" alt="">
		</a>
	</div>
</div>

Initiatives slide

<div class="initiative-slider [&_.slick-list]:pb-8 aegovs-slider-style [&_.slick-slide]:mx-2.5 [&_.slick-list]:-mx-2.5 sm:[&_.slick-slide]:mx-3.5 sm:[&_.slick-list]:-mx-3.5">
	<div>
		<div class="aegov-card card-bordered card-glow !shadow-primary-500/30">
			<img src="images/card-Hackathon_png-logo.png" class="w-full h-auto rounded-xl">
			<h5>The UAE Hackathon</h5>
			<p class="line-clamp-4">This initiative will create an opportunity for hundreds of young people to use open data as a tool for innovation and to boost economic growth. Youth will be able to analyse data and come up with solutions that will advance the UAE towards a prosperous and happy future.</p>
			<div class="block">
				<a href="#" class="aegov-link" title="Some link text related description">
				View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-bordered card-glow !shadow-primary-500/30">
			<img src="images/card-Hackathon_2.jpg" class="w-full h-auto rounded-xl">
			<h5>The UAE Hackathon</h5>
			<p class="line-clamp-4">This initiative will create an opportunity for hundreds of young people to use open data as a tool for innovation and to boost economic growth. Youth will be able to analyse data and come up with solutions that will advance the UAE towards a prosperous and happy future.</p>
			<div class="block">
				<a href="#" class="aegov-link" title="Some link text related description">
				View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-bordered card-glow !shadow-primary-500/30">
			<img src="images/card-Hackathon_png-logo.png" class="w-full h-auto rounded-xl">
			<h5>The UAE Hackathon</h5>
			<p class="line-clamp-4">This initiative will create an opportunity for hundreds of young people to use open data as a tool for innovation and to boost economic growth. Youth will be able to analyse data and come up with solutions that will advance the UAE towards a prosperous and happy future.</p>
			<div class="block">
				<a href="#" class="aegov-link" title="Some link text related description">
				View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-bordered card-glow !shadow-primary-500/30">
			<img src="images/card-Hackathon_2.jpg" class="w-full h-auto rounded-xl">
			<h5>The UAE Hackathon</h5>
			<p class="line-clamp-4">This initiative will create an opportunity for hundreds of young people to use open data as a tool for innovation and to boost economic growth. Youth will be able to analyse data and come up with solutions that will advance the UAE towards a prosperous and happy future.</p>
			<div class="block">
				<a href="#" class="aegov-link" title="Some link text related description">
				View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /></svg>
				</a>
			</div>
		</div>
	</div>
</div>

News slider

<div class="news-card-slider aegovs-slider-style [&_.slick-slide]:mx-2.5 [&_.slick-list]:-mx-2.5 sm:[&_.slick-slide]:mx-3.5 sm:[&_.slick-list]:-mx-3.5">
	<div>
		<div class="aegov-card card-news">
			<a href="#">
				<img src="images/news-sample-03.jpg" alt="TDRA empowers youth for a sustainable future">
			</a>
			<div class="card-content">
				<div class="custom-divide custom-divide-sm flex flex-wrap">
					<div class="text-aeblack-600 text-sm font-normal">11th Jun 20223</div>
					<a href="#" class="text-sm font-normal">Press release</a>
				</div>
				<h5 class="max-md:text-lg line-clamp-3">TDRA empowers youth for a sustainable future through "Digital Skills Forum" on International Youth Day</h5>
				<p class="line-clamp-3">In alignment with the UAE government's visionary theme for 2023, "Today for Tomorrow," the forum epitomized TDRA's dedication to fostering the next generation of leaders and visionaries who will drive sustainable growth in the digital era.</p>
				<a href="#" class="aegov-link">
					View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-news">
			<a href="#">
				<img src="images/news-sample-03.jpg" alt="TDRA empowers youth for a sustainable future">
			</a>
			<div class="card-content">
				<div class="custom-divide custom-divide-sm flex flex-wrap">
					<div class="text-aeblack-600 text-sm font-normal">11th Jun 20223</div>
					<a href="#" class="text-sm font-normal">Press release</a>
				</div>
				<h5 class="max-md:text-lg line-clamp-3">TDRA empowers youth for a sustainable future through "Digital Skills Forum" on International Youth Day</h5>
				<p class="line-clamp-3">In alignment with the UAE government's visionary theme for 2023, "Today for Tomorrow," the forum epitomized TDRA's dedication to fostering the next generation of leaders and visionaries who will drive sustainable growth in the digital era.</p>
				<a href="#" class="aegov-link">
					View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-news">
			<a href="#">
				<img src="images/news-sample-03.jpg" alt="TDRA empowers youth for a sustainable future">
			</a>
			<div class="card-content">
				<div class="custom-divide custom-divide-sm flex flex-wrap">
					<div class="text-aeblack-600 text-sm font-normal">11th Jun 20223</div>
					<a href="#" class="text-sm font-normal">Press release</a>
				</div>
				<h5 class="max-md:text-lg line-clamp-3">TDRA empowers youth for a sustainable future through "Digital Skills Forum" on International Youth Day</h5>
				<p class="line-clamp-3">In alignment with the UAE government's visionary theme for 2023, "Today for Tomorrow," the forum epitomized TDRA's dedication to fostering the next generation of leaders and visionaries who will drive sustainable growth in the digital era.</p>
				<a href="#" class="aegov-link">
					View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
				</a>
			</div>
		</div>
	</div>
	<div>
		<div class="aegov-card card-news">
			<a href="#">
				<img src="images/news-sample-03.jpg" alt="TDRA empowers youth for a sustainable future">
			</a>
			<div class="card-content">
				<div class="custom-divide custom-divide-sm flex flex-wrap">
					<div class="text-aeblack-600 text-sm font-normal">11th Jun 20223</div>
					<a href="#" class="text-sm font-normal">Press release</a>
				</div>
				<h5 class="max-md:text-lg line-clamp-3">TDRA empowers youth for a sustainable future through "Digital Skills Forum" on International Youth Day</h5>
				<p class="line-clamp-3">In alignment with the UAE government's visionary theme for 2023, "Today for Tomorrow," the forum epitomized TDRA's dedication to fostering the next generation of leaders and visionaries who will drive sustainable growth in the digital era.</p>
				<a href="#" class="aegov-link">
					View details
					<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
				</a>
			</div>
		</div>
	</div>
</div>

Page rating

Team