Задать вопрос
kot2566
@kot2566
javascript

Как правильно сделать слайдер jquery?

Пытаюсь сделать слайдер, но при прокручивании на несколько слайдов вперёд предыдущий слайдер всё больше налезает на текущий слайд из-за непонятного отступа между слайдами:
h_1507615583_8157952_8ec3cd1fc8.png

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;
}



И как сделать переходы через 'Left', а не через 'MarginLeft'?
  • Вопрос задан
  • 419 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
rework
@rework
Помог ответ? В благодарность отметь его решением
Отступы образуются из-за пробелов, которые идут между элементов в вашей html разметке. Добавьте display: flex; вашему контейнеру и отступы пропадут.

Смотреть исправленный пример тут:
plnkr.co/edit/daOKbu9iXUcyS6dmbqNU?p=preview
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обновить дизайн карты метро Москвы
24 нояб. 2024, в 13:04
500 руб./в час
Сделать сайт на Tilda
24 нояб. 2024, в 12:29
3000 руб./за проект
Сделать 5 видеобэкграундов для выступления детей
24 нояб. 2024, в 12:25
500 руб./за проект
Ещё заказы