question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: Support variable slide widths

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:12 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Jones-Scommented, Jun 15, 2017

slider example

Here as nother example of how this looks right now. You can see empty slides and the little dots are linked incorrectly. After one slide the second image is gone already…

2reactions
quinnlangillecommented, Jan 3, 2019

Hey guys, this is definitely an issue with slide width calculation. We determine the width of the carousel on component creation by doing some math that assumes all slides are the same width which is causing the extra space. From what I can see, it’s not an easy fix as it would require lots of modifications that also rely on this logic.

@AmrKafina’s solution works, just wrapping your slide content in a parent component with a set static width would work as well, though it may not have the desired look.

Regardless, I think this is something we should consider so I’ll open this as a feature request (I somehow missed this when it initially opened?). Maybe someone will be interested in submitting a PR with the fix :octocat:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configure a default width for service catalog variables
Configure the default width for variables on a catalog item page to specify what percentage of the screen size that it can span....
Read more >
Slides: Open issues - Issue Tracker
TYPE TITLE STATUS VOTES LAST MODIFIED Feature Request Audio media play/pause Assigned 1 Nov 22, 2022 0... Feature Request Slide addition from one deck to...
Read more >
Feature Request: Native Variable Support - Share an idea
Problem: the design system my team uses is based on an 8px grid, ie. we want to limit sizes to multiples of 8....
Read more >
slick - the last carousel you'll ever need - Ken Wheeler
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, ... variableWidth, boolean, false, Variable width slides.
Read more >
vue-carousel-variable-width: Docs & Reviews
WARNING: vue-carousel is at pre-alpha stage of development and may undergo significant changes. Feel free to submit issues and feature requests here.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found