Skip to content
Advertisement

Tag: swiper.js

Swiper Js Slider – Images overlapping in fixed height slider

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

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)

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

Advertisement