SSENSE/vue-carousel

Feature Request: Support variable slide widths

Open

#61 opened on Jun 15, 2017

View on GitHub
 (12 comments) (1 reaction) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
featurehelp wanted

Description

Hi there. Thanks for providing this slider in the first place 🙌🏻. But I have the following problem: I have a slider with images with variable widths (when height is matched). Lets imagine that the first image is about 70% width of the screen, and the second is just next to it. So first I want to display the first image and 30% should already be filled by the second image. If it slides 1 slide, I want it to stop as soon as the left edge of the second image is at the left edge of the slider wrapper. I see that I can adjust the perPage setting, but this would sometimes mess up my slides (I get empty slides at the end) or some images are never displayed. And most of all: so far all my slides have the same width...

Maybe you can give me a hint how to get this done. cheers

I have made some visualization what I am looking for: image image

Contributor guide

Tech stack
vuejavascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsCSSCarousel component logic
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the carousel component's source code in the repository, focusing on how slide widths are currently calculated (likely in a file like Carousel.vue). Review the 12 comments on the issue for any suggested approaches or partial implementations. Investigate how the 'perPage' setting affects layout and consider modifying the sliding logic to accommodate variable widths, possibly by reading each slide's natural width and adjusting the container's scroll position accordingly.