Cara Membuat Slide Konten dengan CSS3

Slider merupakan animasi yang sangat populer sekali saat ini, karena dengan tampilan yang sifatnya dinamis dan tidak kaku membuat animasi slide banyak sekali dipakai oleh developer desain web sebagai animasi tampilan gambar maupun konten lainnya. Animasi ini bisa kita temukan hampir pada setiap website, tujuan adanya animasi slide ini adalah untuk memberikan kesan betah pada pengguna. Nah bagaimana jika kita ingin membuat slide tapi tidak tahu caranya, berikut ini akan saya bagikan tutorial mengenai Cara Membuat Slide Konten dengan CSS3.

Tahap pertama dalam membuat slide konten adalah dengan membuat struktur awal dengan kode HTML5 berikut.

<body>
    <div id="slider">
        <ul>
            <li>
            <div class="slider-container">
            <h4>Slide Content</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            </li>
                <li>
                <div class="slider-container">
               <h4>Slide Content</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            </li>
                <li>
                <div class="slider-container">
               <h4>Slide Content</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            </li>
                <li>
                <div class="slider-container">
              <h4>Slide Content</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            </li>
        </ul>
        </div>
</body>

Karena pada kasus ini slide berbentuk konten maka kita berikan beberapa baris paragraf sebagai objek slide nya, setelah membuat struktur HTML5 seperti diatas langkah selanjutnya untuk membuat slide konten berjalan dengan baik, maka kita akan set dengan kode CSS3 berikut.

a
{
    text-decoration: none;
    color: #111b47;
}

a:hover
{
    border-bottom: 1px dashed #ED971F;
    color: #ED971F;
}

#slider, ul
{
    height: 200px;
}

#slider
{
    margin: auto;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
    position: relative;
    width: 600px;
}

#slider li
{
    float: left;
    position: relative;
    width: 600px;
    display: inline-block;
    height: 200px;
}

#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;
}

.slider-container
{
    margin: 0 auto;
    padding: 0;
    width: 550px;
  min-height: 180px;
  border-bottom: 1px solid #ccc;
}

.slider-container h4
{
     color: #0A7FAD;
  text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);
}

.slider-container  p
{
    margin: 10px 25px;
    font-weight: semi-bold;
    line-height: 150%;
    text-align: justify;
}


@-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;}
}

#slider ul
{
    -webkit-animation: slide-animation 25s infinite;
}

#slider ul:hover
{
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

Setelah semua kode HTML5 dan CSS3 telah diketikan, selanjutnya simpan filenya kemudian jalankan dibrowser dan lihat hasilnya.

Cara Membuat Slide Konten dengan CSS3

Maka akan tampil sebuah konten paragraf dan akan bergantian secara otomatis secara slide pada konten paragrafnya. Baiklah sekian tutorial sedrhana mengenai Cara Membuat Slide Konten dengan CSS3. Semoga bermanfaat.

15 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat