Slider Teks CSS Murni Sederhana

sukma
sukma
5 minute read

Tutorial hari ini tentang membuat slider teks CSS murni sederhana yang bekerja secara otomatis. Ini adalah tampilan slide yang responsif dan ringan yang tidak memerlukan perpustakaan tambahan.

Muak dengan slider yang rumit dan lambat yang membutuhkan jQuery dan perpustakaan tambahan. Mari kita coba Penggeser Konten CSS Murni kami yang cukup sederhana, responsif, kompatibel lintas-browser dan bekerja dengan baik dengan perangkat seluler.

Selanjutnya, Anda dapat membuat slider Anda sendiri dan menyesuaikannya agar sesuai dengan desain situs web Anda. Anda dapat mengubah latar belakangnya, menerapkan font-family yang berbeda, dan mengubah tata letaknya.

Selain itu, Jika Anda benar-benar tertarik untuk mengatur konten di palungan yang baik dan mencari solusi ringan untuk ini, cukup unduh kode sumber slider ini dan terapkan di situs web Anda.

Ada banyak cara untuk mengatur konten yang terlihat bagus dan memberikan pengalaman pengguna yang luar biasa.

Salah satu cara yang bagus untuk menggunakan slideshow. Dibutuhkan lebih sedikit ruang dan memungkinkan Anda untuk meletakkan paragraf yang berbeda dari konten di satu tempat dan dengan menggunakan navigasi panah pengguna dapat menggesernya untuk melihat bagian konten selanjutnya.

Mulailah dengan Markup Slider Teks

Slider hadir dengan markup sederhana dan mudah. Tidak ada ilmu roket. Kami memiliki struktur div berikut untuk mengkodekan slider dalam HTML.

  • <div id="text-slider"> adalah "pembungkus utama" kami untuk penggeser teks.
  • <ul> dan <li> struktur yang digunakan untuk membuat setiap slide.
  • <div class="text-slider-container"> adalah "wadah sekunder" di mana kita telah menempatkan teks biasa dengan menggunakan tag HTML seperti P, H atau Span, dll.
<div id="text-slider">     <ul>         <li>         <div class="text-slider-container">         	<h4>Heading text</h4>             <p>simple content goes here</p>         	<h5>may be some Additional heading</h5>         </div>         </li>          <li>         <div class="text-slider-container">         	<h4>Heading text</h4>             <p>simple content goes here</p>         	<h5>may be some Additional heading</h5>         </div>         </li>         <li>             <div class="text-slider-container">             	<h4>Amazed by the fast, accurate workmanship</h4>             	<p>"You guys rock… seriously! Thank you so much for getting all those stamps back to me so fast! Wow!"</p>             	<h5>- Tina</h5>             </div>         </li>         <li>             <div class="text-slider-container">             	<h4>My stamps are fantastic</h4>             	<p>	"I received the stamps this week and they are fantastic. Thanks so much for your work on perfecting them!"</p>             	<h5>- Amanda</h5>             </div>         </li>     </ul> </div>

CSS untuk Text Slider

Sekarang kita akan mengatur gaya slider kita untuk mendesainnya dan membuatnya berfungsi menggunakan atribut CSS. Kami akan mulai dengan CSS dasar dan menerapkan tinggi untuk wadah dan ul elemen.

Ada beberapa gaya yang lebih umum perlu membuat slider berfungsi dan ini adalah lebar, latar belakang, warna, dan jenis font, dll.

#text-slider, ul {     height: 300px; } #text-slider { 	margin: auto; 	overflow: hidden; 	background:#f4f4f4; 	position: relative; 	max-width: 600px; } #text-slider li { 	float: left; 	position: relative; 	width: 600px; 	display: inline-block; 	height: 200px; } #text-slider ul { 	list-style: none; 	position: absolute; 	left: 0px; 	top: 0px; 	width: 9000px; 	transition: left .3s linear; 	-moz-transition: left .3s linear; 	-o-transition: left .3s linear; 	-webkit-transition: left .3s linear; 	margin-left: -25px;      font-family: century gothic;      color: #666; }

Selanjutnya, kami akan menangani container sekunder yang berisi konten dan tempat di dalamnya li.

.text-slider-container { 	margin: 0 auto; 	padding: 0; 	width: 550px;   min-height: 180px; } .text-slider-container h4 {   font-family: 'Work sans', sans-serif;  	color: #000;   font-weight:400;   font-size: 20px; } .text-slider-container h5 { 	text-align: right; 	font-weight:normal; 	font-family: 'Questrial', sans-serif; 	font-weight: 400; 	font-size: 14px; 	line-height: 150%;   color:#EE2D24; } .text-slider-container  p {   text-indent: 40px; 	font-family: 'Questrial', sans-serif; 	font-size: 15px; 	color: #434343; 	line-height: 200%; 	margin:0 auto 0 auto; 	margin: 10px 25px; 	text-align: justify; }

Terakhir, CSS @keyframes akan membantu kita membuat animasi slide.

@-webkit-keyframes slide-animation { 	0% {opacity:0;} 	2% {opacity:1;} 	20% {left:0px; opacity:1;} 	22.5% {opacity:0.6;} 	25% {left:-600px; opacity:1;} 	45% {left:-600px; opacity:1;} 	47.5% {opacity:0.6;} 	50% {left:-1200px; opacity:1;} 	70% {left:-1200px; opacity:1;} 	72.5% {opacity:0.6;} 	75% {left:-1800px; opacity:1;} 	95% {opacity:1;} 	98% {left:-1800px; opacity:0;} 	100% {left:0px; opacity:0;} } #text-slider ul {          animation: slide-animation 25s infinite; 	-webkit-animation: slide-animation 25s infinite; } /* use to pause the content on mouse over */ #text-slider ul:hover { 	-moz-animation-play-state: paused; 	-webkit-animation-play-state: paused; }

"animation: slide-animation 25s infinite"Menentukan nama animasi dan waktu tunda. Saya telah menggunakan 25 detik setelah itu slide berikutnya akan ditampilkan. Anda dapat mengatur waktu khusus alih-alih ini sesuai dengan kebutuhan Anda. Anda juga bisa tahu tentang bagaimana animasi CSS bekerja.

Dan itu dia. Penggeser siap digunakan. Anda dapat dengan bebas mengunduh kode sumber dan melihat demo. Saya telah merilis "slider teks CSS murni" di bawah lisensi MIT jadi silakan membangun di atasnya atau menggunakannya dalam proyek mendatang Anda.