Показать сообщение отдельно
  #1 (permalink)  
Старый 05.05.2018, 12:13
Новичок на форуме
Отправить личное сообщение для antegria Посмотреть профиль Найти все сообщения от antegria
 
Регистрация: 05.05.2018
Сообщений: 9

Анимация infinite-jquery карусели
Пример карусели, которую необходимо реализовать. Анимация работает нормально за исключением случаев, когда последний слайд становится на место первого (если листаешь влево то не выходит анимировать переход с 1 на 14, если вправо - с 14 на 1). Самостоятельно решить не могу и нуждаюсь в помощи.

Посмотреть можно здесь

<head>
    <meta charset="UTF-8">
    <title>Карусель + галерея</title>
    <style>
        body {
            text-align: center;
            padding: 30px;
        }
        h1{
            font-size: 20px;
            margin: 15px 0;
        }
        p, span{
            font-size: 14px;
        }
        .carousel-hider {
            width: 550px;
            overflow: hidden;
            display: inline-block;
        }
        .carousel-list {
            list-style: none;
            width: 10000px;
            padding: 0px;
            position: relative;
        }
        .carousel-element {
            display: block;
            margin-right: 5px;
            float: left;
            position: relative;
        }
        .carousel-element img {
            max-width: 106px;
            cursor: pointer;
        }
        .carousel-arrow-left,
        .carousel-arrow-right {
            vertical-align: top;
            display: inline-block;
            background-color: #ffdcdc;
            padding: 8px;
            margin-top: 40px;
            border: 5px solid #ffd2d2;
            border-radius: 5px;
        }
        .carousel-arrow-left:hover,
        .carousel-arrow-right:hover {
            cursor: pointer;
            background-color: #ffa3a3;
        }
        .carousel-arrow-left {
            margin-right: 25px;
        }
        .carousel-arrow-right {
            margin-left: 25px;
        }
        .title-appear{
            font-size: 20px;
            color: #9a0000;
            margin: 15px 0;
        }
        .wrap{
            font-size: 0;
            padding-left: 8px;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var leftUIEl = $('.carousel-arrow-left');
            var rightUIEl = $('.carousel-arrow-right');
            var elementsList = $('.carousel-list');

            var pixelsOffset = 111;
            var currentLeftValue = 0;
            var elementsCount = elementsList.find('li').length;

            var minimumOffset = -((elementsCount - 5) * pixelsOffset);
            var maximumOffset = 0;

            leftUIEl.click(function() {
                if (currentLeftValue != maximumOffset) {
                    currentLeftValue += 111;
                    elementsList.animate({
                        left: currentLeftValue + "px"
                    }, 500);

                } else {
                    $('.carousel-element:last').insertBefore($(".carousel-element:first"));
                }
            });

            rightUIEl.click(function() {
                if (currentLeftValue != minimumOffset) {
                    currentLeftValue -= 111;
                    elementsList.animate({
                        left: currentLeftValue + "px"
                    }, 500);

                } else {
                    $('.carousel-element:first').insertAfter($(".carousel-element:last"));
                }
            });

            $('.carousel-element img').click(function() {

                var largePath = $(this).attr("src");
                var largeAlt = $(this).attr("title")

                $("#largeImg").attr({src: largePath});
                $('h1').html('<h2 class="title-appear">' + largeAlt + '</h2>'); return false;
            })

        });
    </script>
</head>

<body>
    <h1>Название изображения</h1>
    <div class="contain-img">
        <img id="largeImg" src="img/img1-lg.jpg" alt="Large image" /> </div>
        <div class="wrap">
    <div class="carousel-arrow-left"><span>Влево</span></div>
    <div class="carousel-hider">
        <ul class="carousel-list">
            <li class="carousel-element"><img src="img/img1-lg.jpg" title="Название 1">
                <p>Описание 1</p>
            </li>
            <li class="carousel-element"><img src="img/img2-lg.jpg" title="Название 2">
                <p>Описание 2</p>
            </li>
            <li class="carousel-element"><img src="img/img3-lg.jpg" title="Название 3">
                <p>Описание 3</p>
            </li>
            <li class="carousel-element"><img src="img/img4-lg.jpg" title="Название 4">
                <p>Описание 4</p>
            </li>
            <li class="carousel-element"><img src="img/img1-lg.jpg" title="Название 5">
                <p>Описание 5</p>
            </li>
            <li class="carousel-element"><img src="img/img2-lg.jpg" title="Название 6">
                <p>Описание 6</p>
            </li>
            <li class="carousel-element"><img src="img/img3-lg.jpg" title="Название 7">
                <p>Описание 7</p>
            </li>
            <li class="carousel-element"><img src="img/img4-lg.jpg" title="Название 8">
                <p>Описание 8</p>
            </li>
            <li class="carousel-element"><img src="img/img1-lg.jpg" title="Название 9">
                <p>Описание 9</p>
            </li>
            <li class="carousel-element"><img src="img/img2-lg.jpg" title="Название 10">
                <p>Описание 10</p>
            </li>
            <li class="carousel-element"><img src="img/img3-lg.jpg" title="Название 11">
                <p>Описание 11</p>
            </li>
            <li class="carousel-element"><img src="img/img4-lg.jpg" title="Название 12">
                <p>Описание 12</p>
            </li>
            <li class="carousel-element"><img src="img/img3-lg.jpg" title="Название 13">
                <p>Описание 13</p>
            </li>
            <li class="carousel-element"><img src="img/img4-lg.jpg" title="Название 14">
                <p>Описание 14</p>
            </li>
        </ul>
    </div>
    <div class="carousel-arrow-right"><span>Вправо</span></div>
    
    </div>
</body>

Последний раз редактировалось antegria, 05.05.2018 в 12:41. Причина: Прикреплен пример
Ответить с цитированием