TUtorial Membuat landing pagenya slack, swiper.js

saya tertarik dengan landing pagenya slack <a href=' https://slack.com/lp/two#try '> https://slack.com/lp/two#try </a>, jadi saya ingin mencoba remake, walaupun ngga sama persis, tapi yang penting dari sisi fungsionalitas swipernya berjalan.

Coba kita bedah dengan cara inspect element dari landing pagenya dengan cara membuka dev tool, saya pakai browser chrome biasanya saya langsung pencet ctrl + shift + i. Dari situ kita jadi bisa dengan mudah mengetahui struktur websitenya :

1. Slack menggunakan swiper.js untuk membuat slide disetiap sectionnya 2. Setiap Slide dibagi menjadi 2 section, bagian kanan dan kiri 3. Bagian Kanan untuk Gambar penunjang Konten disebelah kiri 4. Dibagian Kiri merupakan konten yang terdiri dari : 1. Floating Header 2. Konten ( Header dan Paragraf)

Swiper.js <a href=' http://idangero.us/swiper/get-started/ '> http://idangero.us/swiper/get-started/ </a> swiper.js merupakan library untuk membuat berbagai macam slider. Teman-teman bisa cek sendiri di link diatas apa saja yang bisa dilakukan menggunakan swiper.js dan bagaimana cara menggunakan APInya. Di Websitenya juga tersedia berbagai macam contoh-contoh aplikasi swiper.js

Sebelum dibahas mungkin bisa sebelumnya dilihat dulu code yang saya buat dicodepen.io <a href=' https://codepen.io/danangyudhatama/pen/gomMRa '> https://codepen.io/danangyudhatama/pen/gomMRa </a>, jadi nanti ketika saya menjelaskan step-by-step akan lebih mudah untuk dipahami.

Saya memulai dengan cara mengikuti demo (mousewheel control) yang ada di websitenya swiper.js. Saya bisa mengambil inspirasi dari codenya dan disesuaikan sesuai kebutuhan.

STRUKTUR DASAR DAN STYLING

Dengan cara mengikuti code demo di websitenya swiper.js <a href=' http://idangero.us/swiper/demos/ '> http://idangero.us/swiper/demos/ </a> untuk membuat swiper slidernya dan struktur di landing pagenya Slack, maka struktur HTMLnya akan seperti ini :

1. Membuat container untuk swiper diberi nama class = “swiper-container” yang berisi : 1. beberapa halaman(slide) , class = “swiper-slide” 2. pagination, class “swiper-pagination” 2. Div untuk Logo, saya namakan class = “floating-header” 3. Container untuk Konten pada slider bagian kiri, nama class = “fixed-content”, kontennya sementara masih kosong karena nantinya akan kita inject melalui javascript Step 1

Buat struktur dasar di HTML untuk swiper container dan pagination

    //html file
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div id="slide-1" class="swiper-slide"></div>
                <div id="slide-2" class="swiper-slide"></div>
                <div id="slide-3" class="swiper-slide"></div>
                <div id="slide-4" class="swiper-slide"></div>
                <div id="slide-5" class="swiper-slide"></div>
                <div id="slide-6" class="swiper-slide"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

agar slider berfungsi kita harus membuat instance swiper pada .js file, untuk penjelasan API yang lebih lengkap bisa akses ke websitenya swiper.js

    var swiper = new Swiper('.swiper-container', { // class swiper-container merupakan target yang akan dibuat slider(swiper)
        direction: 'vertical',      // agar swiper arahnya vertikal
        slidesPerView: 1,           // akan ada 1 slide per view
        spaceBetween: 30,           // jarak antar slide 30 unit
        mousewheel: true,           // agar bisa swipe menggunakan mousewheel
        pagination: {               // menampilkan pagination
          el: '.swiper-pagination', // class swiper-pagination sebagai target pagination
          clickable: true,          // pagination bisa diclick untuk menuju slide tertentu
          renderBullet: function (index, className) { // agar pada pagination ada nomornya
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
    });

Isi masing-masing slide (class=”swiper-slide”) menggunakan for loop dengan dua div untuk bagian kanan dan kiri slider

    //.js file
    slideLength = 6;
    for (var i = 0; i < slideLength; i++) {
            $("#slide-"+(i+1)).append(`
                    <div class="left-content ${i+1}"></div>
                    <div class="right-content ${i+1}"></div>
            `);
    }

Step 2

Untuk bagian Header kita hanya membuat div biasa yang isinya gambar/Logo & link, yang nantinya akan di set position absolut pada CSS, agar posisinya fixed tidak bergerak pada daerah kanan atas

    //HTML

        <div class="floating-header">
            <!-- Navbar brand -->
            <a class="navbar-brand" href="#">
                <img src="https://bibsurfer.com/static/img/logo.png/" width="150" height "40" alt="">
            </a>
        </div>

    //css

    .floating-header {
      position: absolute;
      width: 50%;
      left: 0;
      top: 0;
      z-index: 1000;
      display: flex;
      -ms-flex-pack: justify;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px 0;
    }

Step 3

Konten akan kita pisahkan pada satu div tersendiri dengan nama class=”fixed-content”. “fixed-content” akan membungkus Header dan Paragraph. Pertama-tama, kita buat Kontennya dalam sebuah array.

    //.js file

    message=[
            `<h2>Maju tak gentar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,
                    `<h2>Slide 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,
            `<h2>Slide 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,
            `<h2>Maju tak gentar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,
            `<h2>Slide 5</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,
            `<h2>Maju tak gentar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias veniam, perspiciatis aut aliquam itaque `,

    ]

setelah itu tinggal kita inject ke dalam “fixed-content” menggunakan for loop

     for (var i = 0; i < slideLength; i++) {
            $(".fixed-content").append(`
                    <div class="content container-${i+1}">
                    ${message[i]}
                    </div>
            `);
    }

Step 4

Untuk styling pada dasarnya :

“.swiper-container” lebar dan tingginya dibuat 100%, sehingga memenuhi viewport

    .swiper-container {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }

pada “.swiper-slide” kita ingin agar kontennya ditengah dan center vertically

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: 100%;
      margin: auto;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
    }

lebar slider akan dibagi 40 : 60 antara bagian kiri dan kanan . selain itu saya akan pasang dummy background image menggunakan API dari Unsplash, mungkin teman-teman bisa kembangkan dengan foto/image yang berbeda-beda disetiap slide.

    .left-content {
      width : 40%;
      height: 100%;
    }

    .right-content {
      width: 60%;
      height: 100%;
      background-image: url("https://source.unsplash.com/user/erondu/1600x950");
      background-repeat:no-repeat;
      background-position: center center;
    }

untuk konten di sebelah kiri (class=”content”), diposisikan secara absolut dan semua opacity: 0; . Nanti pada logicnya akan dibuat opacity: 1 ; pada slide yang active .

     .fixed-content {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 40%;
      bottom: 0;
      pointer-events: none;
    }
     .fixed-content .content {
        color: #2d333a;
        margin-left: 7vw;
        margin-right: 2vw;
        max-width: 500px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        flex-direction: column;
    }

Logic

Terakhir kita akan buat logic bagaimana menampilkan konten yang sesuai dengan slide-nya. swiper.js menyediakan API events, dengan bantuan API tersebut kita akan tampilkan konten yang sesuai dengan slide yang active ( misal slide ke-3 maka konten untuk slide ke-3 akan ditampilkan). Dengan menggunakan for loop, kita cek satu persatu slide tersebut apakah aktif, jika aktif maka konten yang sesuai akan ditampilkan. Selain itu saya juga menggunakan jquery animate() agar konten tampil dari opacity:0 ke opacity:1 dalam waktu 1 detik.

    swiper.on('slideChange', function () {
      setTimeout(function(){
        for (var i = 0; i < slideLength; i++) {
          if ($("#slide-"+(i+1)).hasClass("swiper-slide-active")) {
            $(".fixed-content").children().css("opacity", 0);
            $(".container-"+(i+1)).animate({opacity: 1},1000);
          }
        }
      }, 100);

    });

Dengan kode diatas, masalahnya adalah ketika pertama kali load, maka tidak ada konten yang ditampilkan, karena slide belum berganti (event belum tertrigger). Maka kita juga harus membuat logic ketika pertama kali load, kita cek dengan for loop masing-masing slide apakah memiliki class “swiper-slide-active” dan pasangkan konten yang tepat pada slide tersebut.

    //.js file

    for (var i = 0; i < slideLength; i++) {
          if ($("#slide-"+(i+1)).hasClass("swiper-slide-active")) {
                  $(".fixed-content").children().css("opacity", 0);
                  $(".container-"+(i+1)).animate({opacity: 1},1000);
          }
    }

mungkin teman-teman ada masukan ? atau mungkin ada yang belum paham ? jangan segan untuk comment dibawah thank you :)