The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot :palm_tree:

• Swiper Version: 6.2.0
• Platform/Target and Browser Versions: All

Also posten on Stackoverflow: Swiper React | How to create custom navigation/pagination components using React refs?

What you did

const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)

  return (
    <Swiper
      navigation={{
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}

Expected Behavior

To work

Actual Behavior

Did not work

SwiperJS documentation states that navigation prevEl/nextEl can either be of type "string" or "HTMLElement". Using HTML nodes allows for navigation prevEl/nextEl to be scoped to each rendered instance of MySwiper. In React this is usually done with "refs".

const App = () => (
  <div>
    <MySwiper /> // MySwiper1
    <MySwiper /> // MySwiper2
  </div>
)

In the App example above, navigation prevEl/nextEl from "MySwiper2" should not trigger sliding of "MySwiper1", which is what would happen if one would have used string selectors like { prevEl: '.prev', nextEl: '.next' }. Obviously (if even possible within the application) one could generate unique classnames. A better solution would be to pass the HTML elements as these are already unique. Is this possible somehow with React refs?

My current hacky workaround:

const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)

  return (
    <Swiper
      navigation={{
        // Both prevEl & nextEl are null at render so this does not work
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
      onSwiper={(swiper) => {
        // Delay execution for the refs to be defined
        setTimeout(() => {
          // Override prevEl & nextEl now that refs are defined
          swiper.params.navigation.prevEl = navigationPrevRef.current
          swiper.params.navigation.nextEl = navigationNextRef.current

          // Re-init navigation
          swiper.navigation.destroy()
          swiper.navigation.init()
          swiper.navigation.update()
        })
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}

Thanks in advance!

Hi,

I'm experiencing non-functional links, pagination and next/prev arrow link with the 3.0.4 version.

I'm using Chrome 41.0.2272.76 m on Windows 8.1

I'm not only having the problem on an implementation I'm trying to build, but also on the plugins landing page: http://www.idangero.us/swiper/

If anyone know why this is happening, let me know.

Kind regards.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://nextjs.org/

Bug description

this happens when I try t recreate this example: https://codesandbox.io/s/wij5y?file=/src/App.jsx:473-942

Expected Behavior

No response

Actual Behavior

No response

Swiper version

"swiper": "^7.0.0"

Platform/Target and Browser Versions

chtome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: 4.0.1.

• Platform/Target and Browser Versions: -

What you did

I have installed Swiper as normal dependency in my Project and import it to my scripts file like this import Swiper from 'swiper'; If I try to bundle it to a production ready version with webpack i get this error

Unexpected token: name (Dom7) [./node_modules/dom7/dist/dom7.modular.js:14,0][js/vendor.a8b881e4dc98829fb5c4.js:36577,6]

ERROR in js/vendor.a8b881e4dc98829fb5c4.js from UglifyJs
Unexpected token: name (Dom7) [./node_modules/dom7/dist/dom7.modular.js:14,0][js/vendor.a8b881e4dc98829fb5c4.js:36577,6]

as soon as I downgrade Swiper to version 3.4.2 everything works as expected.

Expected Behavior

Bundling and compression via webpack is working

Actual Behavior

UglifyJS throws an error because of dom7

Hi, I would be happy to contribute to swipers Angular support.
Especially as the most popular Angular swiper library has End of life notice. This PR far away from to be ready. But many functionalities implemented, I'm trying to have the same API as React, Vue, and Svelte. There are a lot of types that were missing, I've added them, but without description (as I don't know what to write there). Also right now I'm importing everything from the build directory, as a temporary solution. Currently working on virtual slides implementation.

I would like to know if it's welcomed and if yes I would really appreciate your help and review. I understand if you will not want to include it, I'll make from it a standalone wrapper then.

Feature Request:

Make it so the height of each slide is calculated automatically, instead of having to hard code the height inside idangerous.swiper.css.

This would be useful for mobile/responsive layouts where the width of images within the slideshow needs to be set at 100% to fill the full width of the screen. It isn't possible to know the resultant height of the image if you're using 100% width and so it can't be set within a separate CSS file as it currently is.

This is a (multiple allowed):

• [ ] bug

• [x] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: v4.5.0

• Platform/Target and Browser Versions: EVERY PLATFORM

Expected Behavior

The slider should implement some of the features and html structure of the w3c slider example: https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1/carousel-1.html The w3c example also has a list of reasons why the features and html structure they used is accessible. This would make SwiperJS a lot more accessible. Some of the accessibility enhancements can be set with options, but this as the default would help users who don't know how to make it more accessible. It would also be a good reason to use this library instead of other slider libraries, because SwiperJS would be a good option for everyone who wants to apply wcag 2.1 standards. https://www.w3.org/TR/WCAG21/

Some of the features could only be implemented in the accessibility module, for users who don't want to use them.

Actual Behavior

SwiperJS is only partially accessible.

Features to implement:

• [x] <section> as the outer container, instead of an <div> element
• [x] outer container has aria-roledescription="carousel"
• [x] outer container has aria-label="Example Content" (Label can be set like the next/prev slider buttons text)
• [x] next and previous buttons are <a>-tags
• [x] next and previous buttons haverole="button"
• [x] next and previous buttons has aria-controls="swiperID" (this connects with the id of the content)
• [x] content container has id="swiperID" (this connects with the aria-attribute of the next and previous buttons)
• [x] content container has aria-live="off" when autoplay is on and aria-live="polite" when autoplay is off
• [x] content item has role="group"
• [x] content item has aria-roledescription="slide"
• [x] content item has the slide number as aria-label. Example:aria-label="1 of 6"
• [ ] Prevent tabbing to focusable items within out-of-view slides
• [ ] Make sure disabled controls/buttons are not focusable

Related Issues

The w3c example doesn't use clones, but this issue is also important to improve accessibility: https://github.com/nolimits4web/swiper/issues/2929 Maybe the improved keyboard accessiblity would also fix issues like this: https://github.com/nolimits4web/swiper/issues/2945

This is a (multiple allowed):

• [ ] bug
• [ ] enhancement
• [x] feature-discussion (RFC)

Expected Behavior

I would like to discuss new sliding effect, something like coverflow but the slides stack behind and a part of slides behind shown, will be nice if you add transparent option too for background slides

: {
        backTransparent: 0.9,
        depth: 100,
        slideShadows : true
}

Something sliding like the following demos: http://www.jqueryscript.net/demo/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js/ http://www.jqueryscript.net/demo/Cross-browser-3D-Rotator-Plugin-For-jQuery-rollingslider-js/

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: 3.4.2

• Platform/Target and Browser Versions: Firefox 55.0.3 (64 bits) on MacOS Sierra 10.12.6 (16G29)

What you did

We use Swiper to show a list of items. We observe a strange behavior on Firefox.

Expected Behavior

On Chrome, it works fine : our swiper is shown with 3 elements.

Actual Behavior

On Firefox, on page load, only one element is displayed and stretched on the whole page width. We need to resize the page to get the right layout. When inspecting the generated HTML, we can see that the style element on the swiper-slide divs containing width and margin is not set on first load, but is set after resize. Note that the elements of the slider are loaded asynchronously.

URL to reproduce : https://support-swiper-demo.dev.v3.aws.lead.fm Login : leadformance Pwd : password

Open it in Chrome or Firefox. After a while you should see "Nearest locations" section above "Our Events" section. We have created 3 stores located around Rostov-on-Don so that you should see locations based on your geolocation. Please let me know if you are located elsewhere so that I can create new locations working for you.

Screenshot on Firefox before resize (bug) https://s3-eu-west-1.amazonaws.com/swiper-demo-screenshots/Capture+d%E2%80%99e%CC%81cran+2017-09-27+a%CC%80+08.38.26.png

Screenshot on Firefox after resize (expected result) https://s3-eu-west-1.amazonaws.com/swiper-demo-screenshots/Capture+d%E2%80%99e%CC%81cran+2017-09-27+a%CC%80+08.39.37.png

Hi guys,

So Swiper 2 is almost ready and while i prepare new Swiper's website i want you to test the RC version that you can find at https://github.com/nolimits4web/Swiper/tree/master/dev.

Most of functions and logic was rewritten from scratch, in many cases it should work faster and better:)

First of all, due to the new features, in Swiper 2 already fixed the following issues: #188, #173, #163, #162, #157, #140, #118, #111, #78

Brand new "killer" features:)

Auto Mode

Now, with slidesPerView:'auto' and new internal "smart grid" you can use slides with different width (and height in vertical mode). This feature allows to build very unique interfaces.

Centerd Slides

Many asked this feature and now with centeredSlides:true parameter active slide will be always centered, not always the on at the left side like in Swiper 1

Slides Offset

With offsetPxBefore, offsetPxAfter, offsetSlidesBefore, offsetSlidesAfter you can achive slides "offset" from wrapper borders!

IE Support

Swiper 2 comes with extended IE support, now it works in all old IE browsers: IE7 (jQuery required), IE8, IE9 and IE10.

DOM Animation

Now Swiper has custom DOM animation for browsers that don't support transitions (IE7-IE9)!!! So all basics swipes will works like they should in these browsers

Smart keyboard control

Useful if you have few swipers per page. Now when clicking keyboard arrows swiper will be animated only if it is in the visible area of window!

Simple images preloader

With updateOnImagesReady:true parameter Swiper will be reinitialized automatically when all its images are loaded

Form elements

With releaseFormElements:true Swiper 2 automatically stops propagation of events on form elements like inputs, selects and textareas

Auto Height

With calculateHeight:true Swiper calcs container height depending on slides content. Useful only when you use it with images and want to make it full responsive like in #162.

"Clickable" pagination

With paginationClickable:true you will get to approproate slide after clicking on pagination button

Visibility API

Now Swiper adds "active" class to currently active slide (and pagination button) AND "visible" class to slides that currently visible in container frame! With this feature combaining with transitions you can create nice animation on swipes.

New Scroll Container

A bit reworking scroll container (and free mode) that comes now with almost native scrolling momentum and momentum sides bounces depending on touch-move velocity

Slides API

Now such methods like append, prepend, remove, insertAfter, etc. work with loop mode!

I ask you to test it, so probably you will find some bugs or have some purposes about these new features. Please submit new Swiper 2 issues into this issue

Dear community, as the maintainer of this project, I have put the repository in "vacation mode" so that I can take a much needed and deserved break without worrying about tasks piling up while I recharge. I hope you can understand the need to take this action and not just "turn off notifications". Anyone who has experienced a company-wide shutdown would understand, that it's much easier to disconnect from work when everyone does at the same time.

Know that your contributions are valuable and appreciated, so please subscribe to this issue and get notified when I'm back and ready to resume actively maintaining this project.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://github.com/AaronBeaudoin/swiper-bug

Bug description

IMPORTANT: Although, I have successfully created a reproduction, this issue can only be reproduced under specific circumstances due to it being influenced by monitor DPI (or something like that). I can literally drag the browser window from one monitor to another to toggle whether the bug appears, so read the description below carefully to understand what exactly I'm seeing.

Description

When I open the reproduction above in my browser (it is nothing but an index.html file) on my Macbook Pro's internal display, the Swiper does not correctly detect when it has been scrolled to the end.

The Swiper is in cssMode: true, so when I say "scrolled to the end" I mean that I've hovered my mouse over the .swiper-wrapper element and scrolled with two fingers horizontally to the end of the scrollable area inside the element.

When I do so, the .swiper-button-next element should have gotten the .swiper-button-disabled class, because the Swiper is at the end and therefore is not able to scroll further. However, the button remains unchanged. If the button is clicked, the Swiper then correctly detects that it is at the end and toggles the class correctly.

My Digging

I did some digging to save you some time, or in the case that you cannot reproduce the behavior with your monitor setup. Here's what I found.

When I add a breakpoint in core/update/updateProgress.js on line 20, the state when the Swiper has been scrolled all the way to the end is as follows:

translate: -157.5
swiper.minTranslate(): 0
swiper.maxTranslate(): -157.6
progress: 0.9993654822335025

The Swiper cannot at this point be scrolled further, although from the number it seems that it should. So it seems that either some math in there is wrong, or the progress should be relaxed to consider the Swiper to be at the end if it is within 1 pixel of the "expected" end value.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

8.4.5

Platform/Target and Browser Versions

macOS Chrome 108.0.5359.124 arm64

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

It seems spaceBetween allow percentage as string to be enter:

https://github.com/nolimits4web/swiper/blob/c949e85e3ec8773b223ed057b31c177f010484ba/src/core/update/updateSlides.js#L56-L58

But spaceBetween type restricted to number or undefined:

https://github.com/nolimits4web/swiper/blob/2bde0dab7147fefdb994d4932524cfbbb8efbef1/src/types/swiper-options.d.ts#L257-L264

which cause some type warning, here is the warning in vue [Vue warn]: Invalid prop: type check failed for prop "spaceBetween". Expected Number with value NaN, got String with value "5%"

Hi. Having a problem with identifying the appropriate type for a swiper module. As far as I know, a swiper module is a function that receives a single argument which is an object. Let's say I have the following code

function customModule(argument: ModuleArg) { console.log( }

const swiper = new Swiper(".swiper", {
  modules: [customModule]
})

What is the type of ModuleArg? I searched through your code base and documentation but couldn't find what I needed. for example I used Swiper type exported from swiper/types but it wasn't what was shown in log statement.
Thanks in advance

I am using Swiper in a React project. Problem: my slides are not autoplaying.

Code:

import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

import MyImage1 from "../pathToImage";
import MyImage2 from "../pathToImage";
import MyImage3 from "../pathToImage";

export default function Home() {
  <div className="swiper-container">
    <Swiper
      modules={[Autoplay, Pagination]}
      pagination={{ clickable: true }}
      spaceBetween={50}
      slidesPerView={1}
      autoHeight={true}
      loop={true}
      autoplay={true}
    >
      <SwiperSlide>
        <img src={MyImage1} />
      </SwiperSlide>
      <SwiperSlide>
        <img src={MyImage2} />
      </SwiperSlide>
      <SwiperSlide>
        <img src={MyImage3} />
      </SwiperSlide>
    </Swiper>
  </div>;
}

The strange thing is: when I add a new SwiperSlide-tag with just some text inside, the slides do start autoplaying:

<Swiper ...options... >
      <SwiperSlide>
        <img src={MyImage1} />
      </SwiperSlide>
      <SwiperSlide>some text</SwiperSlide>
      <SwiperSlide>
        <img src={MyImage2} />
      </SwiperSlide>
      <SwiperSlide>
        <img src={MyImage3} />
      </SwiperSlide>
</Swiper>

Is this a bug or am I doing something wrong? Versions: "swiper": "^8.4.5" "react": "^18.2.0",

Code language and versions

Svelte version: 3.0.0 Vite version 4.0.2 Typescript version 4.9.4 Swiper version 8.4.5 Node version 16.15.1

Description

I think there are a bug when using the combination of centeredSlides={true}, centeredSlidesBounds={true} and setting slidesPerView to a decimal number (2.2, 3.2 etc.). When navigating the second and the last bullet they are not marked as active. I guess it has something to do with the centered slide is the active one.

How to reproduce

1. Copy the code below into a svelte project with everything needed installed
2. Try using the navigation, either swipe or use the arrows, and see that the second and last is not set as active

Code:

<script lang="ts">
 // import Swiper JS
 import { Swiper, SwiperSlide } from "swiper/svelte";  // import Swiper styles
 import { Navigation, Pagination } from "swiper";
 // import the default css for swiper
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
</script>

<div>
 <Swiper 
     pagination={true}
     modules={[Pagination, Navigation]} 
     navigation={true} 
     class="mySwiper" 
     slidesPerView={3.2}
     spaceBetween={20} 
     centeredSlides={true}
     centeredSlidesBounds={true}>
       <SwiperSlide>
           slide 1
       </SwiperSlide>
       <SwiperSlide>
           slide 2
       </SwiperSlide>
       <SwiperSlide>
           slide 3
       </SwiperSlide>
       <SwiperSlide>
           slide 4
       </SwiperSlide>
       <SwiperSlide>
           slide 5
       </SwiperSlide>
       <SwiperSlide>
           slide 6
       </SwiperSlide>
       <SwiperSlide>
           slide 7
       </SwiperSlide>
       <SwiperSlide>
           slide 8
       </SwiperSlide>
   </Swiper>
</div>