Slider doesn´t work

1

Hello, this is the problem with jquery. I´m just starting and I can´t animate the slider. Can Anyone help me? Thanks in advance.

HTML code

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Balance-Salud Mental</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"/>
        <meta name="description" content="Tu salud mental es importante, cuidala con los profesiones adecuados. "/>
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/fontello.css">
        <link rel="stylesheet" href="css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet"/>

    </head>

    <body>            
        
        <header>
                <a href="index.html">
                <img src="img/logo.png" class="brand" alt="Salud Mental Peru">
                </a>
            
                
                <input type="checkbox" id="menu-bar">
                <label class="icon-menu-outline" for="menu-bar"></label>
        
                <nav class="menu">
                    <a href="">¿Quienes Somos?</a>
                    <a href="">Nuestros Profesionales</a>
                    <a href="">Consultas y Citas</a>
                    <a href="">Artículos</a>
                </nav>            
        </header>
        <div id="c-slider">
            <div id="slider">
                <section>
                    <img src="img/adiccion.jpg" />
                    <h2>Adicción</h2>
                </section>
                
                <section>
                    <img src="img/ansiedad.jpg" />
                    <h2>Ansiedad</h2>
                </section>
                
                <section>
                    <img src="img/bullying.jpg" />
                    <h2>Bullying</h2>
                </section>
                
                <section>
                    <img src="img/terapia_pareja.jpg" />
                    <h2>Terapia de Pareja</h2>
                </section>
                
                <section>
                    <img src="img/depresion.jpg" />
                    <h2>Depresión</h2>
                </section>
                
                <section>
                    <img src="img/estres.jpg" />
                    <h2>Estrés</h2>
                </section>
                
                <section>
                    <img src="img/panico.jpg" />
                    <h2>Pánico</h2>
                </section>
                
                <section>
                    <img src="img/ira.jpg" />
                    <h2>Ira</h2>
                </section>
                
            </div>
            <div id="btn-prev">&#60;</div>
            <div id="btn-next">&#62;</div>
                   
        </div>
        
        <footer class="pie">
        2018-2020 Balance Salud Mental - Designed by Watermelon
        </footer>
        <script src="js/slider.js"></script>
    </body>
</html>

CSS code

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: #9acd32;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

header {

    border: 1px solid yellow;

    width: 100%;

    height: 13%;

    background: white;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 100;

    

}

.brand {

    width: 50%;

    margin: 5px 5px;

}

#c-slider {

    margin: auto;

    margin-top: 50%;

    width: 80%;

    max-width: 900px;

    position: relative;

    overflow: hidden;

}

#slider {

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: flex;

    width: 800%;

}

#slider section {

    width: 100%;

}

#slider img {

    display: block;

    width: 100%;

    height: 80%;

}

#btn-prev, #btn-next {

    width: 30px;

    height: 30px;

    background: rgba(255, 255, 255, 0.5);

    position: absolute;

    top: 40%;

    transform: translateY(-50%);

    line-height: 30px;

    font-size: 20px;

    font-weight: bold;

    text-align: center;

    border-radius: 50%;

    cursor: pointer;

    font-family: monospace;

}

#btn-prev {

    left: 5px;

}

#btn-next {

    right: 5px;

}

#btn-prev:hover, #btn-next:hover {

    background: rgba(255, 255, 255, 1);

}

JS code:

var slider = $('#slider');
var siguiente = $('#btn-next');
var anterior = $('#btn-prev');

$('#slider section:last').insertBefore('#slider section:first');

slider.css('margin-left', '-'+100+'%');

function moverD() {
    slider.animate({
        marginleft:'-'+200+'%'
    }   ,700, function(){

    });
}

siguiente.on('click',function() {
    moverD();
});
2

It’s marginLeft not marginleft (in your moverD function)

1 Like
3

@jenovs thank you very much.