Jump to content

Having trouble with Owl Carousel being responsive


Recommended Posts

I need to build this carousel but I have a lot of trouble making it responsive.
What I would like is when there are 3 cards in a slide when the button is pressed all 3 of them move out of the container and on mobile if there is only one card when the button is pressed only one should move.

I tried doing it by separating the big slide and the cards and run javascript for each using matchMedia() but I didn't even get to that as I have some other bugs.

Another problem I have is when the width of the windows is resized the first element is getting out of the view, plus for some reason, they do not fit the way that they should fit inside the slider. The container is blue and you can see that the first and last card is outside the container.
I tried to position them with javascript but then, after I position the cards too, the second pair of cards (second slide) is pushed way out to the left. I think is because it also calculates the with of the slider.

This is the codepen:


Link to comment
Share on other sites

Did you design it from the smallest screen size, then scale it from there? That's the easiest way to make anything responsive. Set background colors on divs before putting in the content and make sure it is sizing the way you want it to then resize as the screen increases and when you want the divs to stop resizing, set a max width. Hope that helps. Happy coding 🙂.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...