Membuat Animasi Slider Menggunakan CSS jQuery Part 1

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Slider Menggunakan CSS Jquery. Langkah pertama teman-teman buat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Membuat Animasi Slider Menggunakan CSS Jquery</title>
</head>
<body>
    <div class="cont">
    <div class="mouse"></div>
    <div class="app">
        <div class="app__bgimg">
            <div class="app__bgimg-image app__bgimg-image--1">
            </div>
            <div class="app__bgimg-image app__bgimg-image--2">
            </div>
        </div>
        <div class="app__img">
            <img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city" />
        </div>
        
        <div class="app__text app__text--1">
            <div class="app__text-line app__text-line--4">Dumet School</div>
            <div class="app__text-line app__text-line--3">Terbaik dan Nomor Satu</div>
            <div class="app__text-line app__text-line--2">Join now</div>
            
        </div>
        
        <div class="app__text app__text--2">
            <div class="app__text-line app__text-line--4">Pilihan Tempat Kursus</div>
            <div class="app__text-line app__text-line--3">WebSite Terbaik</div>
            <div class="app__text-line app__text-line--2">Join now</div>
            
        </div>
    </div>
    <div class="pages">
        <ul class='pages__list'>
            <li data-target='1' class='pages__item pages__item--1 page__item-active'></li>
            <li data-target='2' class='pages__item pages__item--2'></li>
        </ul>
    </div>
</div>
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman buat script jquery seperti di bawah ini.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
     'use strict';

$(document).ready(function () {
    var $app = $('.app');
    var $img = $('.app__img');
    var $pageNav1 = $('.pages__item--1');
    var $pageNav2 = $('.pages__item--2');
    var animation = true;
    var curSlide = 1;
    var scrolledUp = void 0,
        nextSlide = void 0;

    var pagination = function pagination(slide, target) {
        animation = true;
        if (target === undefined) {
            nextSlide = scrolledUp ? slide - 1 : slide + 1;
        } else {
            nextSlide = target;
        }

        $('.pages__item--' + nextSlide).addClass('page__item-active');
        $('.pages__item--' + slide).removeClass('page__item-active');

        $app.toggleClass('active');
        setTimeout(function () {
            animation = false;
        }, 3000);
    };

    var navigateDown = function navigateDown() {
        if (curSlide > 1) return;
        scrolledUp = false;
        pagination(curSlide);
        curSlide++;
    };

    var navigateUp = function navigateUp() {
        if (curSlide === 1) return;
        scrolledUp = true;
        pagination(curSlide);
        curSlide--;
    };

    setTimeout(function () {
        $app.addClass('initial');
    }, 1500);

    setTimeout(function () {
        animation = false;
    }, 4500);

    $(document).on('mousewheel DOMMouseScroll', function (e) {
        var delta = e.originalEvent.wheelDelta;
        if (animation) return;
        if (delta > 0 || e.originalEvent.detail < 0) {
            navigateUp();
        } else {
            navigateDown();
        }
    });

    $(document).on("click", ".pages__item:not(.page__item-active)", function () {
        if (animation) return;
        var target = +$(this).attr('data-target');
        pagination(curSlide, target);
        curSlide = target;
    });
});  
</script>

 Dan langkah terakhir kita akan membuat style cssnya dp pembasan Membuat Animasi Slider Menggunakan CSS Jquery Part 2. Demikian pembahasan Membuat Animasi Slider Menggunakan CSS Jquery Part 1. Semoga dapat bermanfaat dan selamat mencoba.