How to make a jquery slider?

K

kot25662017-10-10 09:07:20

JavaScript

kot2566, 2017-10-10 09:07:20

I'm trying to make a slider, but when scrolling forward several slides, the previous slider more and more overlaps the current slide due to an incomprehensible indent between the slides:

https://jsfiddle.net/kepo4ka/28y0uxvx/

html+js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="section">
        <div class="container">
            <div class="row">

                <img src="http://cdn.fishki.net/upload/post/201411/26/1334081/57542_trava_priroda_doroga_leto_1920x1200_wwwgdefonru.jpg" alt="" srcset="">
            </div>
            <div class="row">

                <img src="http://zefirka.net/wp-content/uploads/2015/08/samaya-krasivaya-priroda-dlya-puteshestvij-sovsem-ryadom-1.jpg" alt="" srcset="">
            </div>
            <div class="row">

                <img src="http://7oom.ru/wp-content/uploads/foto-priroda-23.jpg" alt="" srcset="">
            </div>
            <div class="row">

                <img src="https://files1.adme.ru/files/news/part_79/793310/10095010-797ab841d30ecf2e893c6ff55e0e067a_970x-1000-224ec000e1-1484579184.jpg" alt="" srcset="">
            </div>
            <div class="row">

                <img src="https://files4.adme.ru/files/news/part_79/793310/10092760-7f39e393d96eae85cc92d48a40450aca_970x-1000-8e173efc7b-1484579184.jpg" alt="" srcset="">
            </div>

        </div>
    </div>

    <a href="javascript:void(null)" id="prevBt">previous</a>
    <a href="javascript:void(null)" id="nextBt">Next</a>
    <script src="jquery-3.2.1.js"></script>


    <script>
        var div = $(".container");
        $('#prevBt').click(function(e) {
            e.preventDefault();
            div.animate({
                marginLeft: '-=640px'

            }, "slow");
            var marginL = div.css('marginLeft');
            //  alert(marginL);
            // div.animate({
            //     marginLeft: '-240px'

            // }, 3000);
        });

        $('#nextBt').click(function(e) {
            e.preventDefault();

            div.animate({
                marginLeft: '+=640px'

            });
            var marginL = div.css('marginLeft');
            // alert(marginL);
            // div.animate({
            //     marginLeft: '-240px'

            // }, "slow");
        });
    </script>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container {
    background: #363632;
    width: 3218px;
    height: 360px;
    overflow: hidden;
    /* box-sizing: border-box; */
}

.section {
    width: 640px;
    overflow: hidden;
    /* box-sizing: border-box; */
}

.row {
    /* width: 600px; */
    display: inline-block;
    /* box-sizing: border-box; */
}

.row img {
    width: 640px;
    height: 360px;
}

a {
    z-index: 9999;
    font-size: 100px;
    margin: 30px;
    margin-top: 200px;
    top: 300px;
    text-decoration: none;
}

And how to make transitions through 'Left' and not through 'MarginLeft'?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Kalibrov, 2017-10-10
@kot2566

The indentation is due to whitespace that goes between elements in your html markup. Add display: flex; your container and the padding will be gone.
See corrected example here:
plnkr.co/edit/daOKbu9iXUcyS6dmbqNU?p=preview