Full Slider - Source Code - Forum

Situs ini akan sangat baik dilihat ketika Anda menggunakan browser modern dengan JavaScript yang telah diaktifkan.
Full Slider - Source Code

CSSCoder

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Full Page Slider - By Aries</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <meta name="robots" content="noindex,follow" />

    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: 'Montserrat', sans-serif;
        }
        /* Slider wrapper*/
        
        .css-slider-wrapper {
            display: block;
            background: #FFF;
            overflow: hidden;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        /* Slider */
        
        .slider {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            z-index: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            align-content: center;
            -webkit-transition: -webkit-transform 1600ms;
            transition: -webkit-transform 1600ms, transform 1600ms;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        /* Slides Background Color */
        
        .slide-1 {
            background: #deb8af;
            left: 0;
        }
        
        .slide-2 {
            background: #deb8af;
            left: 100%
        }
        
        .slide-3 {
            background: #deb8af;
            left: 200%
        }
        
        .slide-4 {
            background: #deb8af;
            left: 300%;
        }
        
        .slider {
            display: flex;
            justify-content: flex-start;
        }
        
        .slider-content {
            width: 635px;
            padding-left: 100px;
        }
        /* Slider Inner Slide Effect */
        
        .slider h2 {
            color: #333333;
            font-weight: 900;
            text-transform: capitalize;
            font-size: 60px;
            font-weight: 300;
            line-height: 1.2;
            opacity: 0;
            /* -webkit-transform: translateX(500px);
            transform: translateX(500px); */
            margin-top: 0;
            letter-spacing: 2px;
        }
        
        .slider h4 {
            font-size: 22px;
            font-family: "Oswald";
            color: rgba(51, 51, 51, 0.349);
            font-weight: bold;
            text-transform: uppercase;
            line-height: 1.2;
            opacity: 0;
            /* -webkit-transform: translateX(500px);
            transform: translateX(500px); */
        }
        
        .slider>img {
            position: absolute;
            right: 10%;
            bottom: 0;
            height: 100%;
            opacity: 0;
            /* -webkit-transform: translateX(500px);
            transform: translateX(500px); */
        }
        
        .slide-1>img {
            right: 0;
        }
        
        .slider-content a {
            background-color: #ea2e49;
            width: 50%;
            height: 50px;
            border-radius: 30px;
            border: none;
            font-family: Montserrat;
            font-size: 20px;
            font-weight: 100;
            color: #fff;
            text-align: left;
            padding-left: 35px;
            position: relative;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            font-weight: bold;
        }
        
        .slider-content a:hover {
            box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
        }
        
        .slider .slider-content a:focus,
        .navigation .login-btn:focus {
            outline: none;
        }
        /* Slider Pagger */
        
        .slider-pagination {
            position: absolute;
            bottom: 30px;
            width: 575px;
            left: 100px;
            z-index: 1000;
            display: flex;
            align-items: center;
        }
        
        .slider-pagination label {
            width: 15px;
            height: 10px;
            border-radius: 5px;
            display: inline-block;
            background: #fff;
            margin: 0 10px;
            cursor: pointer;
        }
        /* Slider Pagger Event */
        
        .slide-radio1:checked~.slider-pagination .page1,
        .slide-radio2:checked~.slider-pagination .page2,
        .slide-radio3:checked~.slider-pagination .page3,
        .slide-radio4:checked~.slider-pagination .page4 {
            width: 20px;
            height: 10px;
            border: 2px solid #ea2e49;
            background: transparent;
            border-radius: 5px;
        }
        /* Slider Slide Effect */
        
        .slide-radio1:checked~.slider {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
        }
        
        .slide-radio2:checked~.slider {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
        
        .slide-radio3:checked~.slider {
            -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
        }
        
        .slide-radio4:checked~.slider {
            -webkit-transform: translateX(-300%);
            transform: translateX(-300%);
        }
        
        .slide-radio1:checked~.slide-1 h2,
        .slide-radio2:checked~.slide-2 h2,
        .slide-radio3:checked~.slide-3 h2,
        .slide-radio4:checked~.slide-4 h2,
        .slide-radio1:checked~.slide-1 h4,
        .slide-radio2:checked~.slide-2 h4,
        .slide-radio3:checked~.slide-3 h4,
        .slide-radio4:checked~.slide-4 h4,
        .slide-radio1:checked~.slide-1>img,
        .slide-radio2:checked~.slide-2>img,
        .slide-radio3:checked~.slide-3>img,
        .slide-radio4:checked~.slide-4>img {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1
        }
        /* Responsive */
        
        @media only screen and (max-width: 768px) {
            .slider h2 {
                font-size: 20px;
            }
            .slider h4 {
                font-size: 16px;
            }
            .slider-content {
                padding: 0 2%
            }
            .number-pagination {
                right: 2%;
            }
            .slider-pagination {
                left: 2%;
            }
            .slider .slider-content a {
                padding: 0 15px;
                width: 175px;
                height: 42px;
            }
            .slider .slider-content a:after {
                top: 15px;
            }
            .slider>img {
                right: 0;
            }
            .slide-1>img {
                right: -110px;
            }
        }
        
        .slider-content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100%;
        }
    </style>
</head>

<body>

    <!-- Slider Wrapper -->
    <div class="css-slider-wrapper">
        <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
        <input type="radio" name="slider" class="slide-radio2" id="slider_2">
        <input type="radio" name="slider" class="slide-radio3" id="slider_3">
        <input type="radio" name="slider" class="slide-radio4" id="slider_4">

        <!-- Slider Pagination -->
        <div class="slider-pagination">
            <label for="slider_1" class="page1"></label>
            <label for="slider_2" class="page2"></label>
            <label for="slider_3" class="page3"></label>
            <label for="slider_4" class="page4"></label>
        </div>

        <!-- Slider #1 -->
        <div class="slider slide-1">
            <img src="https://designmodo.com/demo/full-screen-slider/images/model-2.png" alt="">
            <div class="slider-content">
                <a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
            </div>
        </div>

        <!-- Slider #2 -->
        <div class="slider slide-2">
            <img src="https://designmodo.com/demo/full-screen-slider/images/model-3.png" alt="">
            <div class="slider-content">
                <a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
            </div>
        </div>

        <!-- Slider #3 -->
        <div class="slider slide-3">
            <img src="https://designmodo.com/demo/full-screen-slider/images/model-4.png" alt="">
            <div class="slider-content">
                <a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
            </div>
        </div>

        <!-- Slider #4 -->
        <div class="slider slide-4">
            <img src="https://designmodo.com/demo/full-screen-slider/images/model-1.png" alt="">
            <div class="slider-content">
                <a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
    <script>
        var TIMEOUT = 8000;
        var interval = setInterval(handleNext, TIMEOUT);

        function handleNext() {
            var $radios = $('input[class*="slide-radio"]');
            var $activeRadio = $('input[class*="slide-radio"]:checked');

            var currentIndex = $activeRadio.index();
            var radiosLength = $radios.length;
            $radios
                .attr('checked', false);
            if (currentIndex >= radiosLength - 1) {
                $radios
                    .first()
                    .attr('checked', true);
            } else {
                $activeRadio
                    .next('input[class*="slide-radio"]')
                    .attr('checked', true);
            }
        }
    </script>
</body>

</html>