Desire output: I am trying to implement a slider with a fixed height and auto width. The images should be adjusted to e.g. height: 800px and the width should be true to the image resolution. My Implementation: https://playground-f2831f.webflow.io/model-images/provident-at-sunt-incidunt How it is supposed to be: https://artworld.agency/artists/sarah-bassett My slider param: Answer 1 of 2: Set slidesPerView: “auto”. Docs demo: https://swiperjs.com/demos#slides-per-view-auto In your
Tag: swiper.js
How to init hidden swiper on page load?
I have a swiper positioned inside a tab on a wordpress site, thus it is not initiated on page load, so the navigation function does not work. You can see it here by clicking on the “görüşler” tab. I did a research and I found out that it’s a common issue and it can be initiated with some custom jquery.
Substring all aria-label elements of an array
HTML Here I have a JS script working to get the number of the active slide in result of a variable. to get it, I’ve substring info from “aria-label” (keeping only slide number before ” / 13″) of the active slide: result // numactiveslide: “4” **How to get the same for not 1 but 3 special slides (prev,active,next). I try
SwipeJS not functioning properly
So I tried to use Swipe.Js today. When I’m importing I used this code line. So I looked at the node_modules folder and then I found where is the Swiper and SwiperSlide functions are. So I imported that file by using this line. import { Swiper, SwiperSlide } from ‘swiper/react/swiper-react.js’; But it also giving a error like this. So how
How to change Delay in swiper in swiper.js?
I am using swiper.js for making a slideshow of images and videos. Here i want to change delay when user click on a button. But i don’t know how to change delay in swiper or any other method to do it?? I have read documentation of swiper.js but there is no function to change delay after creating swiper object. JSFiddle(code)
Display a Swiper slider when clicking a thumbnail in a gallery
I’m building a thumbnail gallery with a slider feature using Swiper. By default, the slider is hidden, and when the user clicks one of the images, the slider must be displayed showing the clicked image. Once the slider is open, the user can click a Close button to hide it and return to the thumbnail gallery. This is the code
How to use swiper breakpoints in Vue Js
Good morning, I’m making a site using VueJS for the frontend, I have installed SwiperJS via npm for Vue to make sliders. It works fine but i’m not able to make functioning breakpoints to have a responsive number of slides. I used this code to make a responsive post section that has all 4 posts showed in the PC view
Trouble installing Swiper in my React project
I’m trying to add Swiper to my React Web App, I’m having trouble with the regular plugin, so I decided to use this framework instead: swiper-react specifically designed for React. Following the getting started tutorial: It says that I need to import these CSS files but when I try to import them in my Component, at runtime I’m getting: without
How to customize arrow buttons in Swiper
How can I customize the arrow buttons below from swipers? I did it crudely but it does not seem to be the right way because I get some margin on the right of the button. The entire code: I don’t want the margin. Any ideas? EDIT: How do I change the colour blue on the arrow to black? Does not