Scribd Logo
Upload

Welcome to Scribd!

  • Nuevo Documento de Microsoft Word

    Uploaded by

    Rivaldo Nicolas Fabian
    6 views3 pages
    This document contains the code for an automatic image slider. It includes CSS code that defines styles for the slider container and image list, including setting the width, height, overflow properties and animation. It also includes HTML code that links to the CSS stylesheet and contains the image slider container and unordered list of images.

    Original Description:

    Original Title

    Nuevo Documento de Microsoft Word (2)

    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 contains the code for an automatic image slider. It includes CSS code that defines styles for the slider container and image list, including setting the width, height, overflow properties and animation. It also includes HTML code that links to the CSS stylesheet and contains the image slider container and unordered list of images.

    Copyright:

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

    Nuevo Documento de Microsoft Word

    Uploaded by

    Rivaldo Nicolas Fabian
    This document contains the code for an automatic image slider. It includes CSS code that defines styles for the slider container and image list, including setting the width, height, overflow properties and animation. It also includes HTML code that links to the CSS stylesheet and contains the image slider container and unordered list of images.

    Copyright:

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

    *{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    .slider{

    width: 100%;

    height: 600px;

    overflow: hidden;

    .slider ul{

    display: flex;

    animation: cambio 20s infinite alternate linear;

    width: 400%;

    .slider li{

    width: 100%;

    list-style: none;

    .slider img{

    width: 100%;

    height: 100%;

    @keyframes cambio{

    0%{margin-left: 0;}

    20%{margin-left: 0;}

    25%{margin-left: -100%;}

    45%{margin-left: -100%;}

    50%{margin-left: -200%;}
    70%{margin-left: -200%;}

    75%{margin-left: -300%;}

    100%{margin-left: -300%;}

    @media only screen and (min-width:320px) and (max-width:768px){

    .slider, .slider ul, .slider img{

    height: 100vh;

    27

    index.html

    @@ -0,0 +1,27 @@

    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,


    maximum-scale=1.0, minimum-scale=1.0">

    <title>Slider Automàtico</title>

    <link rel="stylesheet" href="estilos.css">

    </head>

    <body>

    <div class="slider">

    <ul>

    <li>

    <img
    src="https://i.pinimg.com/originals/74/52/db/7452db2aafa89196801ef4fe680137e0.jpg">

    </li>

    <li>

    <img src="https://s1.1zoom.me/big0/160/354276-admin.jpg">

    </li>
    <li>

    <img src="https://mobimg.b-cdn.net/pic/v2/gallery/preview/goroda-pejzazh-ulicy-
    22228.jpg">

    </li>

    <li>

    <img src="http://2.bp.blogspot.com/-dNtt1v-HAOE/UFdRpT_pY9I/AAAAAAAABXw/
    gBzxja1td3Y/s1600/fondos-escritorio-ciudades-1280.jpg">

    </li>

    </ul>

    </div>

    </body>

    </html>

    You might also like