Coretan Si Mimin, BOGOR - Halo sobat blogger ... Kembali lagi nih dengan mimin, pada kesempatan kali ini mimin akan membagikan sebuah tutorial cara membuat post slider yang terbilang lumayan keren dengan menggunakan Swiper.js.
Apa sih Swiper.js itu?
Swiper.js adalah sebuah library JavaScript yang populer untuk membuat slideshow dan carousel responsif (responsive) di halaman web. Library ini memungkinkan pengembang web untuk membuat tampilan yang interaktif dan responsif, dengan mengatur tampilan slide dan mengaktifkan gerakan swipe pada perangkat mobile.
Fitur Lengkap Swiper.js
Swiper.js juga menyediakan banyak fitur lengkap yang dapat digunakan untuk mengontrol tampilan slide, seperti "navigasi tombol, indikator slide, autoplay, parallax, efek transisi, dan lain-lain". Hal ini dapat memudahkan para pengguna untuk membuat tampilan yang menarik dan intuitif di situs web mereka.
Keunggulan Utama Swiper.js
Salah satu keunggulan utama dari Swiper.js adalah dukungan penuhnya terhadap perangkat mobile. Library ini dirancang dengan mempertimbangkan pengalaman pengguna di perangkat mobile, sehingga dapat memberikan pengalaman yang mulus dan responsif di berbagai perangkat, termasuk layar sentuh.
Oke, kita langsung saja ke tahap cara membuat post slider. Untuk lebih lengkapnya silahkan sobat simak dan perhatikan langkah-langkah berikut ini:
Cara Membuat Post Slider dengan Swiper.js
1. Buat HTML
Untuk langkah pertama, disini kita akan membuat HTML nya terlebih dulu. Perhatikan penampakan di bawah ini:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1498307833015-e7b400441eb8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Postcards From Italy</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Bunker</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1482192505345-5655af888cc4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Small Mountain</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1564604761388-83eafc96f668?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=801.2.1&auto=format&fit=crop&w=2167&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Walking On a Dream</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
<div class="slider-buttons">
<button class="swiper-button-prev">Prev</button>
<button class="swiper-button-next">Next</button>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="socials">
<a class="social-link" href="https://twitter.com/aybukeceylan" target="_top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
</svg>
</a>
<a class="social-link" href="https://www.linkedin.com/in/ayb%C3%BCkeceylan/" target="_top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a>
</div>
Jika sudah silahkan sobat copy paste saja kode di atas.
Lanjut ke tahap kedua
2. Buat CSS
Untuk langkah yang kedua, kita buat CSS nya. Seperti apa kode CSS tersebut? Sobat bisa lihat di bawah ini:
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
margin: 0;
font-weight: bold;
font-size: 24px;
line-height: 32px;
color: #26384E;
transform: translateY(20px);
transition: all .4s ease;
transition-delay: .2s;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
@media screen and (max-width: 520px) {&{
font-size: 16px;
line-height: 24px;
}}
}
p {
font-size: 16px;
line-height: 24px;
color: #889DB8;
transform: translateY(20px);
transition: all .4s ease;
transition-delay: .3s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (max-width: 520px) {&{
font-size: 14px;
line-height: 20px;
}}
}
.swiper-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 1;
position: relative;
}
.swiper-container {
background: linear-gradient(270deg, rgba(247,249,255,1) 0%, rgba(242,246,255,1) 100%);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
width: 100%;
position: relative;
max-width: 420px;
height: 100%;
max-height: 420px;
border-radius: 10px;
}
.slider-image-wrapper {
height: 200px;
width: 100%;
overflow: hidden;
}
.slider-item {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
opacity: 0;
background: linear-gradient(270deg, rgba(247,249,255,1) 0%, rgba(242,246,255,1) 100%);
cursor: grab;
&-content {
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
transition: .4s;
> * {
opacity: 0;
transform: translateY(20px);
}
}
}
.swiper-slide-active {
.slider-item-content > * {
transform: translateY(0px);
opacity: 1;
}
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: .2s;
}
.swiper-pagination {
position: absolute;
left: 50%;
bottom: 8px;
transform: translatex(-50%);
z-index: 1;
width: auto!important;
}
.swiper-pagination-bullet {
border-radius: 0;
width: 8px;
height: 8px;
border-radius: 50%;
line-height: 30px;
font-size: 12px;
opacity: 1;
background: rgba(255, 185, 0,0.3);
display: inline-block;
margin-right: 8px;
cursor: pointer;
transition: all 0.2s;
}
.swiper-pagination-bullet-active {
background: #FFB200;
width: 20px;
border-radius: 10px;
}
.slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}
.swiper-button-next,
.swiper-button-prev {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
color: #fff;
position: relative;
margin-left: 4px;
&:before {
content: '';
position: absolute;
background-color: #fff;
height: 1px;
width: 0;
left: 0;
top: 50%;
transform: translatey(-50%);
bottom: -1px;
transition: .2s;
}
&:hover:before { width: 100%; }
}
.socials {
position: fixed;
top: 12px;
right: 16px;
display: flex;
align-items: center;
.social-link {
display: inline-block;
margin-left: 8px;
color: #fff;
}
}
@media screen and (max-width: 520px) {
.swiper-button-next:hover:before,
.swiper-button-prev:hover:before {
display: none;
}
}
Silahkan langsung saja sobat bisa copy paste kembali kode di atas.
Dan untuk tahap ketiga atau tahap yang terakhir, kita buat JS nya.
3. Buat jQuery/Javascript
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 20,
effect: 'fade',
loop: true,
speed: 5000,
autoplay: true,
mousewheel: {
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
Jika semua file kode sudah selesai kita buat, dengan mengikuti semua langkah-langkah di atas. Yang terakhir adalah, silahkan sobat lihat seperti apa hasilnya.
"Jangan lupa untuk menyisipkan Javascript ini dan taruh tepat di atas tag penutup body."
/* JQUERY */
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
/* Swiper Bundle */
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js'/>
Nah, bagaimana menurut sobat? Sangat mudah bukan?
Demikianlah postingan pada hari ini yang mimin buat dengan selengkap-lengkapnya tentang, tutorial cara mudah membuat post slider dengan HTML, CSS, dan Swiper.js.
Artikel ini pertama kali tayang di Coretan Si Mimin pada Rabu, 07/06/2023.