Question

我正在建立一个新的电子商务网站，并希望将“ Flickity”轮播与自定义jQuery和CSS代码一起使用，以为其提供进度条。它在Chrome，Opera，Edge等环境中都很好用，但在Firefox中却无法使用，因为轮播丢失了，尽管进度条仍然显示。但是，调整窗口大小将使其显示。

您可以在此处查看该网站：http://bp177.betapark.co.uk/

我已经尝试过最小高度等，以及jQuery窗口加载，但是我什么都无法工作。

任何建议都将不胜感激，因为到目前为止我已经花费了数小时试图解决此问题。

.carousel-cell {
width: 100%;
}

html {
overflow-y: scroll;
}

<div class="main-carousel" data-flickity=''>
    <div class="carousel-cell"><img src="/user/templates/flat-blue/slideshow-1.jpg"></div>
    <div class="carousel-cell"><img src="/user/templates/flat-blue/slideshow-2.jpg"></div>
</div>
<div class="carousel-progress">
    <div class="progress"></div>
</div>


<script type="text/javascript">

var duration = 3;
var interval = 5;
var slider = document.querySelector(".main-carousel");
var sliderWrapper = document.querySelector(".main-carousel");
var progressBar = document.querySelector(".progress");

var flkty = new Flickity(slider, {
    cellSelector: ".carousel-cell",
    cellAlign: "center",
    contain: true,
    draggable: true,
    wrapAround: true,
    prevNextButtons: true,
    fullscreen: true,
    groupCells: true
});


// Main Progress Bar Function

var percentTime, step, tick;

function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPaused = false;
    tick = window.setInterval(increase, interval);
}

function increase() {
    if (!isPaused) {
        step = duration * 1000 / interval;
        percentTime += 100 / step;
        progressBar.style.width = percentTime + "%";
        if (percentTime >= 100) {
            flkty.next();
            startProgressbar();
        }
    }
}

function resetProgressbar() {
    progressBar.style.width = 0 + "%";
    clearTimeout(tick);
}

startProgressbar();

// Pause Control

var isPaused = false;

sliderWrapper.addEventListener("mouseenter", function() {
    isPaused = true;
});

sliderWrapper.addEventListener("mouseleave", function() {
    isPaused = false;
});

// Pause Progress Bar when it's Hovered Over

$(".carousel-progress").mouseenter(function() {
    isPaused = true;
});

$(".carousel-progress").mouseleave(function() {
    isPaused = false;
});

// Resets Progress Bar on Drag

flkty.on("dragMove", function(progress) {
    startProgressbar();
    isPaused = true; //(Disable/delete line if pause on hover is not in use)
});

// Resets Progress Bar on Click of Previous/Next Buttons and Page Dots

$(".previous, .next, .flickity-page-dots").click(function() {
    startProgressbar();
    isPaused = true; //(Disable/delete line if pause on hover is not in use)
});

// Controls Visibility of Previous/Next Buttons on Carousel Hover

$(document).ready(function() {
    $(".flickity-viewport, .flickity-prev-next-button, .flickity-page-dots, .carousel-progress").mouseover(function() {
        $(".flickity-prev-next-button").css({
            "visibility": "visible",
            "opacity": "1"
        });
    });

    $(".flickity-viewport, .flickity-prev-next-button, .flickity-page-dots, .carousel-progress").mouseout(function() {
        $(".flickity-prev-next-button").css({
            "visibility": "hidden",
            "opacity": "0"
        });
    });
});
</script>

“ Flickity”轮播Firefox问题

0 个答案: