Question

我正在尝试使用flexbox为移动网站构建一个简单的轮播。我发现了一些我用来构建我的例子。我有一个我无法解决的问题。

向左滑动时，转换不起作用。转换开始之前，当前图像消失。当我向右滑动时，它工作正常。

感谢您的帮助。

这是我的代码：

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <style>
    .flex, .flex-c
    {
        display: box;
        display: flexbox;
        display: flex;   
    }

    .flex-c
    {
        flex-direction: column;
    }

        .carousel-container
        {
            overflow: hidden;
        }

        .carousel-element
        {
            flex: 1 0 100%; 
            transform: translateX(0);
            order: 2;
        }

        .carousel-swipeleft
        {
            transform: translateX(100%);
        }

        .carousel-swiperight
        {
            transform: translateX(-100%);
        }

        .carousel-transition
        {
            transform: none !important;
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .carousel-ocontainer
        {
            margin: 10px 0;
            justify-content: center;
        }

        .carousel-o
        {
            background: lightgray none repeat scroll 0 0;
            -ms-border-radius: 5px;
            border-radius: 5px;
            height: 10px;
            margin: 0 5px;
            outline: 0 none;
            text-indent: -9999px;
            width: 10px;
            padding-bottom: 10px;
        }

        .carousel-oactive
        {
            background: black none repeat scroll 0 0;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
    <script type="text/javascript">
        $.mobile.pushStateEnabled = false; 
        Oog = function () {};
        Oog.Carousel = function (containerClass, loop)
        {
            var self = this;

            self.loop = loop;
            self.elementClass = "carousel-element";
            self.LazyClass = "carousel-lazy";
            self.oContainerClass = containerClass + "-carousel-ocontainer";
            self.oClass = "carousel-o";
            self.oActiveClass = "carousel-oactive";
            self.swipeleftClass = "carousel-swipeleft";
            self.swiperightClass = "carousel-swiperight";
            self.transitionClass = "carousel-transition";

            self.containerSelector = "." + containerClass;
            self.elementSelector = self.containerSelector + " ." + self.elementClass;
            self.LazySelector = self.containerSelector + " ." + self.LazyClass;
            self.findLazySelector = "." + self.LazyClass;
            self.oContainerSelector = "." + self.oContainerClass;
            self.oSelector = self.oContainerSelector + " ." + self.oClass;
        };

        Oog.Carousel.prototype = 
        {
            initialize: function()
            {
                var self = this;

                // Bullet points
                var elements = $(self.elementSelector);
                var html = "<div class='" + self.oContainerClass + " / carousel-ocontainer / flex'>";
                for (var i = 0; i < elements.length; i++)
                {
                    html = html + "<p class='" + self.oClass + "' data-id='" + $(elements[i]).data("id") + "'> O </p> ";
                }
                html = html + "</div>";
                $(html).insertAfter(self.containerSelector);

                // Affiche les bullets points si et seulement si le carousel est affiché
                // -> nécessite que l'event existe (créé dans oog-mobile-script.js)
                var oContainerSelector = self.oContainerSelector;
                $(self.containerSelector).bind("displayChanged", function ()
                {
                    if ($(this).css("display") === "none")
                    {
                        $(oContainerSelector).hide();
                    } else
                    {
                        $(oContainerSelector).show();
                    }
                });

                // Affichage du 1er élément du carousel
                $(self.LazySelector).first().attr("src", $(self.LazySelector).first().data("src"));
                $(self.oContainerSelector).hide();
                $(self.oSelector).first().addClass(self.oActiveClass);

                // Gestion des déplacements vers la gauche ou la droite
                $(self.elementSelector).on("swipeleft", function ()
                {
                    self.swipe(this, "swipeleft");
                });

                $(self.elementSelector).on("swiperight", function ()
                {
                    self.swipe(this, "swiperight");
                });
            },
            swipe: function(element, swipe)
            {
                var self = this;

                var elements = $(self.elementSelector);
                var nextElement;
                if (swipe === "swipeleft")
                {
                    elements.removeClass(self.swiperightClass);
                    elements.addClass(self.swipeleftClass);
                    nextElement = self.next(element, self.loop);
                }
                else
                {
                    elements.removeClass(self.swipeleftClass);
                    elements.addClass(self.swiperightClass);
                    nextElement = self.prev(element, self.loop);
                }

                if (nextElement.length > 0)
                {
                    $(self.oSelector).removeClass(self.oActiveClass);
                    $(self.oSelector + '[data-id="' + nextElement.data("id") + '"]').addClass(self.oActiveClass);
                    nextElement.find(self.findLazySelector).attr("src", nextElement.find(self.findLazySelector).data("src"));
                    for (var i = 0; i < elements.length; i++)
                    {
                        nextElement.css("order", (i + 1).toString());
                        nextElement = self.next(nextElement, true);
                    }
                    elements.removeClass(self.transitionClass);
                    setTimeout(function () { elements.addClass(self.transitionClass) }, 50);
                }
            },
            next: function(element, loop)
            {
                var self = this;

                return self.nextorprev(element, "swipeleft", loop);
            },
            prev: function (element, loop)
            {
                var self = this;

                return self.nextorprev(element, "swiperight", loop);
            },
            nextorprev: function (element, swipe, loop) {
                var self = this;

                var elements = $(self.elementSelector);
                var current = $(element);
                var next;
                if (swipe === "swipeleft") {
                    next = current.next();
                    if (next.length === 0 && loop) {
                        next = elements.first();
                    }
                } else {
                    next = current.prev();
                    if (next.length === 0 && loop) {
                        next = elements.last();
                    }
                }

                return next;
            }
        };

        $(document).ready(function() 
        {
            var accessoryCarousel = new Oog.Carousel("product-tabAccessories", false);
            accessoryCarousel.initialize();
        });
    </script>
</head>
<body class="body">
    <div class="product-tabs / flex">
        <div class="product-tab / product-tabAccessories / carousel-container / flex" data-tab="Accessories">
            <a href="/prod-16768-Plaque-ONDUVILLA-217m2-rouge-ombre.html" title="Plaque ONDUVILLA rouge ombr&#233;, plusieurs surfaces disponibles" class="product-accessory / carousel-element / flex" data-id="16768">
                <img class="carousel-lazy" alt="Plaque ONDUVILLA 2.17m&#178; rouge ombr&#233;" data-src="http://media.oogarden.com/Product/0290/0290-0007-Thumb.jpg"/>
                <div class="flex-c" style="justify-content: space-around; margin-left: 10px;">
                    <label>Plaque ONDUVILLA rouge ombr&#233;, plusieurs surfaces disponibles</label>
                </div>
            </a>
            <a href="/prod-16769-Pointes-pour-feutre-bitumeux-x1200.html" title="Pointes pour bardeaux et feutres bitumeux " class="product-accessory / carousel-element / flex" data-id="16769">
                <img class="carousel-lazy" alt="Pointes pour bardeaux et feutres bitumeux " data-src="http://media.oogarden.com/Product/0290/0290-0008-Thumb.jpg"/>
                <div class="flex-c" style="justify-content: space-around; margin-left: 10px;">
                    <label>Pointes pour bardeaux et feutres bitumeux </label>
                </div>
            </a>
            <a href="/prod-16782-Bardoline-100-3m2-bleu-ardoise.html" title="Bardoline couleur ardoise surface 3 m&#178;" class="product-accessory / carousel-element / flex" data-id="16782">
                <img class="carousel-lazy" alt="Bardoline couleur ardoise surface 3 m&#178;" data-src="http://media.oogarden.com/Product/0290/0290-0004-Thumb.jpg"/>
                <div class="flex-c" style="justify-content: space-around; margin-left: 10px;">
                    <label>Bardoline couleur ardoise surface 3 m&#178;</label>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

Flexbox轮播过渡问题

0 个答案: