Most modern mobile touch slider with hardware accelerated transitions

Overview

Get Started | Documentation | Demos

Financial Contributors on Open Collective Build status jsDelivr Hits tree-shakeable types included

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Sponsors

Features

  • Tree-shakeable: Only modules you use will be imported into your app's bundle.
  • Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
  • Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc
  • 1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can be configured through Swiper settings
  • Mutation Observer: Swiper has an option to enable Mutation Observer, with this feature Swiper will be automatically reinitialized and recalculate all required parameters if you make dynamic changes to the DOM, or in Swiper styles itself
  • Rich API: Swiper comes with a very rich API. It allows creating your own pagination, navigation buttons, parallax effects and many more
  • RTL: Swiper is the only slider that provides 100% RTL support with correct layout
  • Multi Row Slides Layout: Swiper allows a multiple row slides layout, with a few slides per column
  • Transition Effects: Fade, Flip, 3D Cube, 3D Coverflow
  • Two-way Control: Swiper may be used as controller for any number of other Swipers, and even be controlled at the same time
  • Full Navigation Control: Swiper comes with all required built-in navigation elements, such as Pagination, Navigation arrows and Scrollbar
  • Flexbox Layout: Swiper uses modern flexbox layout for slides layout, which solves a lot of problems and time with size caclulations. Such layout also allows configuring the Slides grid using pure CSS
  • Most Flexible Slides Layout Grid: Swiper has a lot of parameters on initialization to make it as flexible as possible. You can control slides per view, per column, per group, space between slides, and many more
  • Images Lazy Loading: Swiper Lazy Loading delays loading of images in inactive/invisible slides until the user swipes to them. Such feature could make the page load faster and improve Swiper performance
  • Virtual Slides: Swiper comes with Virtual Slides feature that is great when you have a lot of slides or content-heavy/image-heavy slides so it will keep just the required amount of slides in DOM
  • Loop mode
  • Autoplay
  • Keyboard control
  • Mousewheel control
  • Nested sliders
  • History navigation
  • Hash navigation
  • Breakpoints configuration
  • Accessibility (A11y)
  • And many more ...

Dist / Build

On production use files (JS and CSS) only from package/ folder, there will be the most stable versions, build/ folder is only for development purpose.

Development Build

Install all dependencies, in repo's root:


$ npm install

And build development version of Swiper:


$ npm run build:dev

The result is available in build/ folder.

Running demos:

All demos located in ./playground folder. There you will fine Core (HTML, JS), React, Vue, Svelte and Angular versions. To open demo, run:

  • Core: npm run core
  • React: npm run react
  • Vue: npm run vue
  • Svelte: npm run svelte
  • Angular: npm run angular

Production Build


$ npm run build:prod

Production version will available in package/ folder.

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Individuals

Issues
  • An in-range update of rollup is breaking the build 🚨

    An in-range update of rollup is breaking the build 🚨

    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.

    Status Details
    • continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

    Release Notes for v1.9.3

    2019-04-10

    Bug Fixes

    • Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

    Pull Requests

    • #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)
    Commits

    The new version differs by 3 commits.

    • 516a06d 1.9.3
    • a5526ea Update changelog
    • c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    stale 
    opened by greenkeeper[bot] 88
  • Clicks inside Swiper not working

    Clicks inside Swiper not working

    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.

    opened by SantzDesign 50
  • Multiple Instances of Swiper on Same page?

    Multiple Instances of Swiper on Same page?

    How can I initiate and control multiple instances of swiper slides on the same page?

    opened by nadirnasir 38
  • Webpack Production Bundling fails because of UglifyJS Error with Dom7

    Webpack Production Bundling fails because of UglifyJS Error with Dom7

    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

    opened by martinherweg 36
  • feat: Angular support

    feat: Angular support

    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.

    opened by vltansky 35
  • auto detect height

    auto detect height

    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.

    opened by Dobby89 30
  • Wrong width until page is resized on Firefox

    Wrong width until page is resized on Firefox

    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

    has workaround probably bug 
    opened by loriepisicchio 27
  • Swiper 2 RC

    Swiper 2 RC

    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

    opened by nolimits4web 26
  • swiper thumb gallery problem

    swiper thumb gallery problem

    Hey, I am using this demo of swiper the thumb gallery demo here: http://www.idangero.us/swiper/demos/23-thumbs-gallery.html

    All is working properly but I noticed a bug only on chrome. Sometimes it works properly and sometimes not. The issue is that the little thumbnail images sometimes stop clicking but still drag.... only on chrome... firefox always working.... all other functionalities in this demo are always working in chrome however sometimes clicking on the bottom floated thumbnail images will not swipe the big slide..... This bug wasnt in previous swiper versions.... it is in the demo itself so no need to post my code...

    Any help?!? Thankyou. Alain from Lebanon.

    opened by AlainYahchouchi 25
  • fade effect does not fade out inactive slides

    fade effect does not fade out inactive slides

    Can anyone else replicate?

    I have images that do not completely fill the slide and I can see slides behind when using this effect.

    opened by cjjuice 22
  • fix(a11y): Count aria-label without duplicated item in loop option

    fix(a11y): Count aria-label without duplicated item in loop option

    If the loop option is set, the aria label may only be attached to the non-duplicated elements. Only the elements that are not duplicated are counted.

    FIX: #4781

    opened by dpxgit 2
  • Count aria-label without duplicated item in loop option

    Count aria-label without duplicated item in loop option

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://swiperjs.com/demos#infinite-loop

    Bug description

    If the loop option is set, the aria-label count all DOM elements including the duplicated. There are 5 elements, but 7 are counted by the duplicates.

    Expected Behavior

    If the loop option is set, the aria label may only be attached to the non-duplicated elements. Only the elements that are not duplicated are counted.

    Actual Behavior

    No response

    Swiper version

    6.7.0

    Platform/Target and Browser Versions

    Independent of platform/browser

    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
    opened by dpxgit 0
  • Fixed typos in comments and function name

    Fixed typos in comments and function name

    Fixed typos in comments and function name

    opened by hiro0218 0
  • Spring Effect

    Spring Effect

    Clear and concise description of the problem

    const swiper = new Swiper('.swiper-container', { effect: 'spring', springEffect: { stiffness: 300, damping: 20 }, });

    Suggested solution

    use springer to interpolate translate

    Alternative

    No response

    Additional context

    No response

    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.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
    feature request 
    opened by L-Chris 0
  • Swiper auto navigates to random slide only on first open

    Swiper auto navigates to random slide only on first open

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://sharedgallery-staging.web.app/of/solodigitalis/ct5wy9O7b0eSeTCWNTcY

    Bug description

    1. Visit link
    2. Click "Full-screen" (near bottom), not slideshow
    3. BUG It auto-navigates to a slide near the end, often the very last one.
    4. If you close with the X and open again ("full screen"), now it starts from the beginning like expected.

    I've spent some hours removing things, stripping it down etc... can't see what causes this.

    Code:

    /* eslint-disable no-unused-vars */
    import React, { useRef } from 'react';
    import styled from 'styled-components';
    import { motion } from 'framer-motion';
    import SwiperCore, {
      Lazy, Autoplay, EffectFade, Pagination, Navigation,
    } from 'swiper/core';
    import { Swiper, SwiperSlide } from 'swiper/react';
    import { ReactComponent as CloseIcon } from '../assets/images/close.svg';
    import filenameFromMedia from '../utils/media';
    
    import 'swiper/swiper-bundle.min.css';
    
    const SlideshowContainer = motion.custom(styled.div`
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background-color: ${(props) => props.backgroundColor};
    
      // for arrows
      div.swiper-button-prev {
        color: var(--themeTertiary);
        margin-left: 20px;
      }
      div.swiper-button-next {
        color: var(--themeTertiary);
        margin-right: 20px;
      }
    
      // and for bullets
      span.swiper-pagination-bullet {
        background-color: var(--themeTertiary);
      }
    `);
    
    const SlideContainer = styled.div`
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    `;
    
    const IconContainer = styled.div`
      svg {
        .icon {
          stroke: var(--themeTertiary);
        }
      }
    `;
    
    const CloseButton = styled.button`
      position: absolute;
      top: 12px;
      right: 12px;
      margin: 0;
      padding: 0;
      border: 0;
      background-color: transparent;
      width: 50px;
      height: 50px;
      cursor: pointer;
      z-index: 9999;
    
      svg {
        display: block;
        width: 30px;
        height: 30px;
      }
    `;
    
    const ButtonWrap = styled.div`
      display: flex;
      justify-content: center;
      align-items: center;  
    `;
    
    const StyledMedia = styled.img`
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      height: 100%;
    
      @media (min-width: 768px) {}
    `;
    
    const StyledVideo = styled.video`
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      height: 100%;
    
      @media (min-width: 768px) {}
    `;
    
    // Install modules
    SwiperCore.use([Lazy, Autoplay, EffectFade, Pagination, Navigation]);
    
    // Default params
    const slideshowParams = {
      swiperParams: {
        observer: true,
        observeParents: true,
        lazy: true,
        preloadImages: false,
        effect: 'fade',
        fadeEffect: { crossFade: true },
        autoplay: { delay: 5000, disableOnInteraction: false },
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 30,
      },
      backgroundColor: '#efefef',
      show: {
        collages: true, nonCollages: true, videos: true, gifs: true,
      },
    };
    
    const fullscreenParams = {
      swiperParams: {
        observer: true,
        observeParents: true,
        lazy: true,
        preloadImages: false,
        navigation: true,
        pagination: { dynamicBullets: true },
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
      },
      backgroundColor: '#efefef',
      show: {
        collages: true, nonCollages: true, videos: true, gifs: true,
      },
    };
    
    export const SwiperParams = { slideshowParams, fullscreenParams };
    
    const SwiperJS = ({
      media,
      swiperParams,
      onClose,
      showClose,
      backgroundColor = '#efefef',
      setSwiperActiveIndex,
    }) => {
      const swiperRef = useRef();
    
      return (
        <SlideshowContainer
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          backgroundColor={backgroundColor}
        >
          <Swiper
            {...swiperParams}
            onSlideChange={(swiper) => {
              setSwiperActiveIndex(swiper.activeIndex);
              // play video
              const video = document.getElementById(`video-${swiper.activeIndex}`);
              if (video) video.play();
              for (let i = 0; i < media.length; i += 1) {
                const inactive = document.getElementById(`video-${i}`);
                if (inactive && inactive !== video) {
                  inactive.pause();
                  // inactive.currentTime = 0;
                }
              }
            }}
            onSwiper={(swiper) => { swiperRef.current = swiper; }}
          >
            <div style={{ position: 'relative' }}>
              {media.map((m, index) => (
                <SwiperSlide key={m.id} style={{ width: 'auto', maxWidth: '100%' }}>
                  {(props) => {
                    const isVideo = m && m.contentType && m.contentType.startsWith('video');
    
                    return (
                      <SlideContainer key={`container-${m.id}`}>
                        {!isVideo && (
                          <StyledMedia
                            alt={`thumbnail-${m.id}`}
                            src={m.fullUrl}
                            key={`img-${m.id}`}
                            onLoad={() => { swiperRef.current.update(); }}
                          />
                        )}
                        {isVideo && (
                          <StyledVideo
                            id={`video-${index}`}
                            alt={filenameFromMedia(m)}
                            title={filenameFromMedia(m)}
                            muted="muted"
                            webkit-playsinline="true"
                            playsinline="true"
                            controls
                            loop
                            autoPlay={false}
                            style={{ height: '100%' }}
                            onLoadedData={() => { swiperRef.current.update(); }}
                          >
                            <source src={m.fullUrl} type={m.contentType} />
                          </StyledVideo>
                        )}
                      </SlideContainer>
                    );
                  }}
                </SwiperSlide>
              ))}
            </div>
          </Swiper>
          {showClose && (
            <IconContainer>
              <CloseButton type="button" onClick={onClose}>
                <ButtonWrap>
                  <CloseIcon />
                </ButtonWrap>
              </CloseButton>
            </IconContainer>
          )}
        </SlideshowContainer>
      );
    };
    
    export default SwiperJS;
    
    

    Expected Behavior

    Start on the first slide and don't auto-navigate to random/last slide

    Actual Behavior

    No response

    Swiper version

    6.7.5

    Platform/Target and Browser Versions

    Chrome on MacOS

    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
    React 
    opened by xaphod 1
  • Fix #4705. Install modules in SvelteKit

    Fix #4705. Install modules in SvelteKit

    Add a new "modules" property to the Svelte component. To solve the problem with installing additional Swiper modules when used in SvelteKit.

    Fix #4705

    opened by slava-viktorov 0
  • Swiper flickers when multiple pointers interact with the component

    Swiper flickers when multiple pointers interact with the component

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://swiperjs.com/demos

    Bug description

    Firstly - I need to state that I'm not sure if this is actually a bug or an inherent limitation. To show an example of expected behavior, In any swiper component in Instagram, when two pointers are on the screen swiping it behaves fine, as can be seen below.

    https://user-images.githubusercontent.com/917752/125779954-ccfc58c8-ff62-407e-8dd6-efcd5cdc7746.mp4

    1. When two pointers are on the screen, the swipe direction follows the moving pointer.
    2. When both pointers move, I think it follows the direction of the first pointer move.
    3. (Not in video) When there are more than 2 pointers, there aren't any glitches, the swiping follows the direction of the moving pointer(s).

    Here is what happens when this same interaction is done with this library.

    https://user-images.githubusercontent.com/917752/125780252-4c59d6d7-aad5-43db-a0cd-6708c71d7ff1.mp4

    Observations:

    1. There is clear flickering between the slides. It looks like it breaks it since the component is rendering based on each of the pointers, and it jumps back and forth between them.
    2. (Not in video) If you keep the first pointer stationary and move the second pointer, there will be flickering.
    3. (Not in video) With more than 2 pointers, there's more flickering as the rendering jumps between locking on to each pointers movement.

    These are just some observations, but it's to be noted that nobody expects users to interact with the Swiper in this manner. But if they do, they can break the Swiper. This can be broken even more with nested swiping, the user could glitch out the interaction if they want.

    Expected Behavior

    The direction of movement of the swiper component should follow the moving pointer.

    Swiper version

    6.7.5

    Platform/Target and Browser Versions

    Chrome 91.0.4472.120

    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
    feature request 
    opened by ajaypillay 2
  • feat(pagination): hide 1 dot pagination

    feat(pagination): hide 1 dot pagination

    closes #2572

    opened by vltansky 0
  • Thumbs doesn't work properly

    Thumbs doesn't work properly

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://codesandbox.io/s/bug-swiper-qjp50

    Bug description

    Hi,

    I have created a codesandbox with an example of the error that you can find in this issue but it is basically the following:

    At first when you navigate through the slider it skipes some thumbs, and when you go through the slider completely and go back to the beginning, the active thumb stop working.

    https://user-images.githubusercontent.com/13077343/125082581-b1bd0280-e0c7-11eb-9e04-83603d38b8bd.mp4

    Expected Behavior

    At first when you navigate through the slider it skipes some thumbs, and when you go through the slider completely and go back to the beginning, the active thumb stop working.

    Actual Behavior

    I hope the thumbs change to active as I navigate the slider.

    Swiper version

    6.7.5

    Platform/Target and Browser Versions

    Windows 10 / Firefox

    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
    React 
    opened by RodrigoTomeES 0
Owner
Vladimir Kharlampidi
Front-end engineer. Creator of Framework7 and Swiper
Vladimir Kharlampidi
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 28k Jul 25, 2021
Slider Component of Vue.js.

vue-easy-slider Keep slider simple! Demo demo Install npm i -S vue-easy-slider Usage Plugin install: import Vue from 'vue' import EasySlider from 'vue

Suhaha 325 Jul 21, 2021
Image slider which comes with 20 cool transitions

Documentation and demos Version 5 documentation Version 6 documentation Version 6 demos Overview This is an image slider developed with Vuejs 2 which

null 378 Jul 20, 2021
animated slides in a fragmented look 🐞🌳✡️📐

vue-piece-slider (Demo) This library is a simplified Vue portal of an awesome Codrops Article by Luis Manuel (original source). In this version, just

Vincent Guo 93 Jul 16, 2021
dynamic content slider based on the Vue framework

ultrasites-vue-slider This is a dynamic content slider based on the Vue framework. You can render any contents, like texts, images or other ones. The

Ultra Sites Medienagentur 3 Apr 28, 2017
A Netflix like slider developed using Vuejs

vue-netflix-slider A Netflix like slider developed using Vuejs Demo http://vue-slider.surge.sh/ Todo Support RWD Infinity sliding Note Recommend to se

Jack Yeh 58 Jul 9, 2021
🎠 A customizable accessible carousel slider optimized for Vue

Hooper Vue.js carousel component, optimized to work with Vue. Features Easily customizable through rich API and addons. Touch, Keyboard, Mouse Wheel,

Baianat 597 Jul 20, 2021
Vue的移动端Slider滑动组件。无依赖、功能单一,只有左右滑动功能。如果你需要的仅仅是一个banner,那你可能需要它!

vue-onlySlider-x 内含支持vue1和vue2版本的组件各一个 默认是vue2的组件,vue1的组件相关文件,都放在 vue1.x目录中 Vue的移动端Slider组件。无依赖、功能单一,只有左右滑动功能。如果你需要的仅仅是一个banner,那你可能需要它! DEMO 在移动端调试器或

ChongZi 34 Feb 7, 2021
Modern lightweight Vue 3 carousel component

Modern lightweight Vue 3 carousel component

Abdelrahman Ismail 78 Jul 22, 2021
A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.

vue-l-carousel A responsive carousel(namely slider or swiper) component for Vue.js v2.x+. Live demo Pull requests are welcome :) License LGPL-V3 Featu

Light Leung 56 Mar 2, 2021
🎠 A carousel component for Vue.js

vue-agile A carousel component for Vue.js inspired by Slick. Powerful, responsive, touch-friendly, with Nuxt.js SSR support, without a jQuery dependen

Łukasz Florczak 1.2k Jul 23, 2021
Vue Slider Component is based on lory

lory ☀ Touch enabled minimalistic slider for Vue, it is based on lory. Installation $ npm install vue-lory --save Examples <template> <lory :options

null 43 Jun 21, 2021
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

?? ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

NAVER 1.7k Jul 23, 2021
Vue component for Owl Carousel 2

Intro The VueJS wrapper for Owl Carousel. Owl Carousel is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Ext

Leo Chien 129 Jun 6, 2021