Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Slider Responsive

    Uploaded by

    Sandi Alfian
    This document describes how to create a responsive slider with CSS. It includes HTML markup with three images and CSS code to style the slider. The CSS positions the images absolutely, sets their animation properties for an infinite sliding effect, and uses keyframe animations to transition between the images over 16 seconds for a smooth looping slideshow. On hover, the animation is paused to stop the sliding.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Slider Responsive

    Uploaded by

    Sandi Alfian
    4 views10 pages
    This document describes how to create a responsive slider with CSS. It includes HTML markup with three images and CSS code to style the slider. The CSS positions the images absolutely, sets their animation properties for an infinite sliding effect, and uses keyframe animations to transition between the images over 16 seconds for a smooth looping slideshow. On hover, the animation is paused to stop the sliding.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes how to create a responsive slider with CSS. It includes HTML markup with three images and CSS code to style the slider. The CSS positions the images absolutely, sets their animation properties for an infinite sliding effect, and uses keyframe animations to transition between the images over 16 seconds for a smooth looping slideshow. On hover, the animation is paused to stop the sliding.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    4 views10 pages

    Slider Responsive

    Uploaded by

    Sandi Alfian
    This document describes how to create a responsive slider with CSS. It includes HTML markup with three images and CSS code to style the slider. The CSS positions the images absolutely, sets their animation properties for an infinite sliding effect, and uses keyframe animations to transition between the images over 16 seconds for a smooth looping slideshow. On hover, the animation is paused to stop the sliding.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 10

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>Membuat Slider Responsive Dengan CSS - www.malasngoding.com</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <center>

    <h2>Membuat Slider Responsive Dengan CSS <br/> www.malasngoding.com</h2>

    </center>

    <div class=malasngoding-slider>

    <div class=isi-slider>

    <img src="gambar/gambar1.jpeg" alt="Gambar 1">

    <img src="gambar/gambar2.jpeg" alt="Gambar 2">

    <img src="gambar/gambar3.jpeg" alt="Gambar 3">

    </div>

    </div>

    </body>

    </html>

    h2{

    font-family: sans-serif;

    font-weight: normal;

    .malasngoding-slider {

    border: 10px solid #efefef;


    position: relative;

    overflow: hidden;

    background: #efefef;

    .malasngoding-slider {

    margin:20px auto;

    width: 768px;

    height: 450px;

    .isi-slider img {

    width: 768px;

    height: 450px;

    float: left;

    .isi-slider {

    position: absolute;

    width:3900px;

    /*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/

    animation-name:slider;

    animation-duration:16s;

    animation-timing-function: ease-in-out;

    animation-iteration-count:infinite;

    -webkit-animation-name:slider;

    -webkit-animation-duration:16s;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count:infinite;

    -moz-animation-name:slider;
    -moz-animation-duration:16s;

    -moz-animation-timing-function: ease-in-out;

    -moz-animation-iteration-count:infinite;

    -o-animation-name:slider;

    -o-animation-duration:16s;

    -o-animation-timing-function: ease-in-out;

    -o-animation-iteration-count:infinite;

    /*saat gambar di hover oleh cursor mouse maka berhenti slide*/

    .isi-slider:hover {

    -webkit-animation-play-state:paused;

    -moz-animation-play-state:paused;

    -o-animation-play-state:paused;

    animation-play-state:paused; }

    .isi-slider img {

    float: right;

    .malasngoding-slider:after {

    font-size: 150px;

    position: absolute;

    z-index: 12;

    color: rgba(255,255,255, 0);

    left: 300px; top: 80px;

    -webkit-transition: 1s all ease-in-out;

    -moz-transition: 1s all ease-in-out;


    transition: 1s all ease-in-out;

    .malasngoding-slider:hover:after {

    color: rgba(255,255,255, 0.6);

    @-moz-keyframes slider {

    0% {

    left: 0; opacity: 0;

    2% {

    opacity: 1;

    20% {

    left: 0; opacity: 1;

    21% {

    opacity: 0;

    24% {

    opacity: 0;

    25% {

    left: -768px; opacity: 1;

    45% {

    left: -768px; opacity: 1;


    }

    46% {

    opacity: 0;

    48% {

    opacity: 0;

    50% {

    left: -1536px; opacity: 1;

    70% {

    left: -1536px; opacity: 1;

    72% {

    opacity: 0;

    74% {

    opacity: 0;

    75% {

    left: -2304px; opacity: 1;

    95% {

    left: -2304px; opacity: 1;

    97% {

    left: -2304px; opacity: 0;


    }

    100% {

    left: 0; opacity: 0;

    @-webkit-keyframes slider {

    0% {

    left: 0; opacity: 0;

    2% {

    opacity: 1;

    20% {

    left: 0; opacity: 1;

    21% {

    opacity: 0;

    24% {

    opacity: 0;

    25% {

    left: -768px; opacity: 1;

    45% {

    left: -768px; opacity: 1;

    }
    46% {

    opacity: 0;

    48% {

    opacity: 0;

    50% {

    left: -1536px; opacity: 1;

    70% {

    left: -1536px; opacity: 1;

    72% {

    opacity: 0;

    74% {

    opacity: 0;

    75% {

    left: -2304px; opacity: 1;

    95% {

    left: -2304px; opacity: 1;

    97% {

    left: -2304px; opacity: 0;

    }
    100% {

    left: 0; opacity: 0;

    @keyframes slider {

    0% {

    left: 0; opacity: 0;

    2% {

    opacity: 1;

    20% {

    left: 0; opacity: 1;

    21% {

    opacity: 0;

    24% {

    opacity: 0;

    25% {

    left: -768px; opacity: 1;

    45% {

    left: -768px; opacity: 1;

    }
    46% {

    opacity: 0;

    48% {

    opacity: 0;

    50% {

    left: -1536px; opacity: 1;

    70% {

    left: -1536px; opacity: 1;

    72% {

    opacity: 0;

    74% {

    opacity: 0;

    75% {

    left: -2304px; opacity: 1;

    95% {

    left: -2304px; opacity: 1;

    97% {

    left: -2304px; opacity: 0;

    }
    100% {

    left: 0; opacity: 0;

    You might also like