I used one of Timothy Ricks Parrallax slides and it works a treat.
I want to display 2 of these on the same page. When I duplicate the section, the scroll only works on one of the carousels. I know it’s to do with the code or global styles, but I can’t seem to work it out :( Does anyone know how to fix this?
Theres code in the page settings, and theres a html embed for the global styles.
Hi @Yasmine,
replace the code inside your page settings footer(Before body tag) with this code instead.
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
let Carousel = ".tricks-slider";
let Slides = ".tricks-slider_slide";
let secondCarousel = ".second-tricks-slider";
let parallaxPercentage = 10;
((mainCarousel, mainSlides) => {
let flkty = new Flickity(mainCarousel, {
contain: true,
freeScroll: true,
percentPosition: true,
pageDots: false,
cellSelector: mainSlides,
cellAlign: "left",
resize: true,
selectedAttraction: 0.01,
dragThreshold: 1,
freeScrollFriction: 0.03
});
flkty.on("scroll", function (progress) {
setImagePositions();
$(".progress_fill").css("width", `${progress * 100}%`);
});
function setImagePositions() {
$(mainSlides).each(function (index) {
let targetElement = $(this);
let elementOffset =
targetElement.offset().left +
targetElement.width() -
$(mainCarousel).offset().left;
let parentWidth = $(mainCarousel).width() + targetElement.width();
let myProgress = elementOffset / parentWidth;
let slideProgress = parallaxPercentage * myProgress;
if (slideProgress > parallaxPercentage) {
slideProgress = parallaxPercentage;
} else if (slideProgress < 0) {
slideProgress = 0;
}
targetElement
.find(".image")
.css("transform", `translateX(-${slideProgress}%)`);
});
}
setImagePositions();
})(Carousel, Slides);
((mainCarousel, mainSlides) => {
let flkty = new Flickity(mainCarousel, {
contain: true,
freeScroll: true,
percentPosition: true,
pageDots: false,
cellSelector: mainSlides,
cellAlign: "left",
resize: true,
selectedAttraction: 0.01,
dragThreshold: 1,
freeScrollFriction: 0.03
});
flkty.on("scroll", function (progress) {
setImagePositions();
$(".progress_fill").css("width", `${progress * 100}%`);
});
function setImagePositions() {
$(mainSlides).each(function (index) {
let targetElement = $(this);
let elementOffset =
targetElement.offset().left +
targetElement.width() -
$(mainCarousel).offset().left;
let parentWidth = $(mainCarousel).width() + targetElement.width();
let myProgress = elementOffset / parentWidth;
let slideProgress = parallaxPercentage * myProgress;
if (slideProgress > parallaxPercentage) {
slideProgress = parallaxPercentage;
} else if (slideProgress < 0) {
slideProgress = 0;
}
targetElement
.find(".image")
.css("transform", `translateX(-${slideProgress}%)`);
});
}
setImagePositions();
})(secondCarousel, Slides);
</script>
and duplicate the the section but for the second one use the class second-tricks-slider instead of tricks-slider.
the reason why it only work with the first one is because the code only checks the first element that has that class but now by giving the second parent element that holds the slide element a different class and adjusting the code a bit we can make it recognize that one as well. also don’t forget to give the second class(second-tricks-slider) the same Webflow styles you gave to the first one(tricks-slider)
I can not test this myself since Javascript code only works on the published website but this should give you the desired results. However if it doesn’t let me know.