dynamicweb / swiffy-slider Goto Github PK

Describe the bug
Slider buttons not working on Safari iOS, iPadOS, MacOS,... on fullscreen module.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://swiffyslider.com/examples/
2. Click on the image to open the fullscreen module.
3. Try to click the buttons to go to the next or previous.
4. No response

**Desktop **

• OS: MacOS 12.3.1
• Browser Safari
• Version 15.4

Smartphone

• Device: Iphone 12 Pro
• OS: iOS 15.4.1
• Browser: Safari
• Version: 15.4

Additional information
When disabling the CSSOM View Smooth Scrolling, the buttons work again.
Safari>Develop>Experimental features>CSSOM View Smooth Scrolling.

Tried adding the package for smooth scroll polypill, but that doesn't seem to help.

In my JS I import like this which works: import {swiffyslider} from 'swiffy-slider';
In my scss this doesn't work: @import "~swiffy-slider/dist/css/swiffy-slider.min.css";

Am I doing something wrong? Or does your package need to additionally export the css for NPM, Laravel Mix 6, ES6? Currently you have "exports": "./src/swiffy-slider.esm.js", which works for the js only for me.

Describe the bug
The slider work fine on desktop and on the adaptative view on desktop, but on my mobile the autoplay don't work, i see only the first image. (scroll works)

Smartphone (please complete the following information):

• Device: S20fe and iPhone XR
• OS: iOS 16, android 13
• Browser: Safari, chrome and firefox

Additional context
www.eliot.fr

First off, thank you for building such a fantastic slider/carousel! I have a unique project the layout for which requires a slider to initialize on card-style elements only for smaller viewports, and I'm wondering if you have a recommended method for initializing/de-initializing Swiffy via a resize event, say, with window.matchMedia or some other method? Thanks for any suggestions here!

Is your feature request related to a problem? Please describe.
I want the library to be compatible with AlpineJs and the Web HTML Element "template". AlpineJS use the "template" element for every actions, loop etc... and SwiffySlider take alld child element to display indicators and slide.
See AlpineJS Templating usage : https://alpinejs.dev/essentials/templating#looping-elements

Describe the solution you'd like
I already implemented the solution (PR in preparation) it simply consist in excluding the "template" from the children and let all other tags as is

PR #47

Please add the ability to make the slides zoom while displaying
Example I found on codepen: https://codepen.io/ibanez182/pen/LZPgrY

Also for ADA/WCAG, please allow a pause button option

Otherwise this slider is the best modern slider! Thank you

Hello, I love the project, but I got a question, it's possible to slide with drag'n drop instead arrows buttons?

In the examples I couldn't find the drag and drop behavior.

Is there a method to allow the left arrow to navigate to the last slide if we're at the first slide?

Hi,

Looping from right arrow is not working.

Swiffy slider jumps to start or end when loop is activated.
Slides do not actually loop. They just jump.

I was going to use this lib in my project, but I had to refuse when I realized that there was no infinite loop option.

Describe the bug
When attempting to import swiffyslider into a React project, I get Module not found: Can't resolve 'swiffy-slider'.

To Reproduce
Steps to reproduce the behavior:

1. Run yarn add swiffy-slider in fresh project.
2. Create index.js with import swiffyslider from 'swiffy-slider
3. Run node index.js

Expected behavior
The swiffyslider object is imported into the file, and I can use it.

Additional context
In attempting to debug this issue, I think part of it has to do with the package.json (it has "main": "dist/swiffy-slider.ESM.min.js" when I think it should be "main": "dist/js/swiffy-slider-ESM.min.js"). I think there might be an issue with ES6 Module Syntax vs CommonJS syntax.

The loop stops working when the browser is zoomed out or in (and with some zoom levels it still loops) or when OS is set up to interface scaling. Maybe it has something to do with grid-auto-columns.

Applies to at least Chrome, Edge.

I can import the css from ES6 but when from sass .scss file I get this error when I npm run dev:
Error: Package path ./src/swiffy-slider.css is not exported from package

Describe the bug
We are planing to use this slider on our SPA, but therefore we need a destroy() method, that is taking care of clean up and unbinding from all the event. Are you planing to implement that?

Is your feature request related to a problem? Please describe.
For a web application, we let users upload images, but we end up with images of different sizes

Describe the solution you'd like
It is possible to have a height that changes according to the size of the images rather than the size of the images ?

Additional context
At the end of this slider, there is an example of Autoheight

I like your slider, very easy to use :)

I'm trying to use the fullscreen swiffy-slider with image descriptions. I used your example as a starting point but I need to use a bootstrap 5 card inside the li element so it shows the image description below the image:

<li class="h-100" tabindex="-1">
<div class="card">
  <img src="../assets/img/photos/img2.webp" class="h-100 w-100 card-img-top" style="object-fit: cover;" loading="lazy" data-bs-dismiss="modal" alt="...">
  <div class="card-body">
    <p class="card-text">This is the image description...</p>
  </div>
</div>
</li>

My images are different in size and orientation (landscape/portrait) but I want them to be displayed in the original height/weight (max height/weight if possible but not exceeding the viewport) together with the image description.

How can I do this without getting a scrollbar and content outside of the viewport?

Hello,
Is there any way to hook in before slide changes, like a beforeSlide() event. Checked the readme. Did I miss something?

I'm looking for a way to stop a video playing before it plays on somewhere in Background.

Hello!
I like this slider. I managed to use it in my project but wanted to automatically play next slide only when video is ended or paused, but I couldn't figure out how to achieve this.
I am asking: how can this be done?
Thank you!

When using i.e. sticky navbars etc, arrows and indicators are placed on top because of z-index on those elements.
The z-index is there to layer the buttons on top of the shadow when that is enabled.

Change shadow to only use ::after to avoid z-index problems and remove z-index from navigation elements

Hi,

when "Mouse draggable" is set, the last slide switches to the first slide after repeated mouse click only. The first click on the right arrow makes the slide twitch a bit, and it switches only after the second click.

Tested on the latest FF, Chrome, and Chrome Canary.

You can check it on the first example from the Configurator with these settings.

Unfortunately, it isn't reproduced all the time on the configurator page, but I have this issue 100% of the time on my test page. I can email it to you if that's ok.

package.json:

    "dependencies": {
        ...
        "swiffy-slider": "^1.2.0"
    }

bootstrap.js:

import {swiffyslider} from 'swiffy-slider/dist/js/swiffy-slider.ESM.min.js';
window.swiffyslider = swiffyslider;
window.swiffyslider.init();

app.scss:
@import "~swiffy-slider/dist/css/swiffy-slider.min.css";

When I tried to upgrade from v1.2 to 1.4 the includes are no longer found when I npm run dev. I realized that the JS min was renamed to lowercase swiffy-slider.esm.min.js and I made the change but the assets are still not able to be loaded successfully the same way they were in the older version.

Is there anything really obvious I'm missing here?

I saw in a previous ticket from January that the asssets for a period of time were not included in the npm package? Why was the documentation changed to only show CDN examples? Could you please test this NPM/Laravel/Webpack implementation and then document it for other people that use ESM but do not want to have additional includes to a CDN?

Even the documentation on npmjs.com for ESM shows examples pointing to a specific version of Swiffy on CDN. Doesn't this ENTIRELY defeat the point of using NPM? Please correct your examples to something like mine if you can get it working with the new version.

The current implementation is great for horizontal sliders.
Are there any plans to support vertical sliders too?

I have a page topper slider on autoplay, but the rewind effect when the slider starts over is distracting as it slides left though all the slides already seen.

Is there a way to make the slides wrap, so after the last slide, it continues to auto play to the right, more like a carousel?

Here's a quick clip showing the default slider behavior I see now with two test slides: https://www.dropbox.com/s/juab27hic4ablyq/swiffy-slider-carousel-question.mp4?dl=0

Currently if "Mouse draggable" is set, it is not possible on mobile phones to drag the slider. I think is a problem and UX could be improved

Describe the solution you'd like
For a better/expected UX it should still be possible to swipe on smartphones even if the setting "Mouse draggable" is set.

Thank you!

Describe the bug
The position of the scrollbar is random and changes upon refresh.

To Reproduce

1. Go to https://lautstark-jrk.de/
2. Scroll down to sliders
3. Check scroll positions
4. Refresh to see changing random position

Expected behavior
With class slider-item-snapstart the scrollposition should be start, not a random position.

Screenshots

Desktop

• OS: Windows
• Browser: Chrome
• Version 106.0.5249.103

Problem seems not to occur on the following setups
IOS Safari & Chrome
Windows Firefox

The extension files shows some error. I have used it a few days ago it worked fine but is showing up this error from 2 days.

Uncaught TypeError: Cannot set properties of undefined (setting 'extensions')
at

Moreover, the mouse dragging feature is also not working. I have tried taking the script running on you website which shows no errors but it does not seem to work.

Hello,
clicking on the prev/next buttons makes the slider move by one slide, even if there are more than one slide displayed next to each other (slider-item-show5).

is it possible/can it be made possible to set the number of slides the slider moves?
Something like "slider-item-move5"?

That would make Swiffy Slider even a bit more awesome than it already is.

Best
Per

P.S. The top right "Download" button on swiffyslider.com leads nowhere.

Describe the bug
When the slider-nav-round icons are used, and the browser view is reduced to a mobile size, the background circles are now smaller than the svg icons and don't align perfectly.

To Reproduce
Steps to reproduce the behavior:

1. Go to the examples page https://swiffyslider.com/examples/
2. Reduce the browser view to a mobile size (less than 990px wide)
3. Scroll down to the "Articles" example carousel (4th carousel on the examples page)
4. See the next and previous nav icons.

Expected behavior
Icons expected to be centered in their background circle. Perhaps the background circle should not be reduced in size on mobile view. Or perhaps the svg icons should also be reduced in size to fit within the circles?

Screenshots

Desktop:

• OS: Windows 10
• Browser Chrome 99, Firefox 98, Vivaldi 5.1.2567.66, Edge 99.0.1150.46

Smartphone:

• Device: iPhone 11 Pro iOS 14.6 Safari 14 (emulated via Firefox Dev Tools)

Is there the possibility to make a "bare bones" version of Swiffy Slider? Or does that not fit into the concept?

I have replaced a couple of old sliders on clients' websites with Swiffy Slider, and for the new slider to fit into the whole design, I had to override quite a bit of the CSS.

I do love the possibility to style the slider just by adding classes, and I am not overly bothered by loading CSS I don't end up using. But it would be great to have a .pure class (or something) that does not style the elements, so I only have to add, not to override.

As I have said before – your slider is a dream come true when I had already given up on looking for something usable and also on trying to write my own. Many, many thanks for this great piece of software – and no less for the stellar support!

On https://swiffyslider.com/examples/, once you click start it ends up going crazy for me. Maybe because it is missing the indicators? 5 slides to 3 indicators? Just thought I would point it out. It speeds through to the next indicator, and after a couple minutes it was doing even stranger things.

When I click on the top right download button on https://swiffyslider.com/ , I get redirected here:
https://github.com/dynamicweb/swiffy-slider/releases/download/v1.6.0/swiffy-slider-1.6.0-dist.zip
There, I am told "Not Found".

This link works: https://github.com/dynamicweb/swiffy-slider/archive/refs/tags/v1.6.0.zip

First, congrats on your work, I am trying to know after reading the docs and see the Easy configuration of Swiffy Slider if:

1.- Is there any way to leave the users move the slides freely, I mean that when I try to move 2, for example it does not move 2 it goes 1 by 1. I tried "slider-item-nosnap" but it does not work.

2.- Is there any way to change the ratios (slider-item-ratio) according to the screens? I am working with Bulma and should I include the ratio css classes to the breakpoints? Would swiffy work?. That way in a mobile screen the ratio would be a different one from a dektop for example.

Thank you and all the best, congrats again for your work.

Is your feature request related to a problem? Please describe.
could not find any solution where indicators are automatically and responsively generated according number of slides

Describe the solution you'd like
calculate number of "pages" and insert the same amount of indicators to DOM accordingly

Describe alternatives you've considered
none :)

Additional context
currently it's hardcoded and thus not responsive

When "slider-nav-visible" option is set and "slider-nav-touch" is not set, navigation arrows are still visible for me on my phone. They shouldn't be, right?

Android 11, FF, Chrome.

I'm being nit-picky, but when I enable arrows, I'm seeing one on the left on initial load. It doesn't do anything, and I don't want it to. Wondering if it could just be hidden until the user clicks right one time.

Is this something I should implement on my end?

Swiffy slider is a great library ! No flaws loved the configuration feature provided which eases the development. Just no words for how smoothly it works on mobile. But I found one issue that is there is not option to show less number of slides on tablet devices. I am showing news cards as 5 in desktop and 1 in mobile want to show 3 of them in tablet/Ipad devices but found no option for that. So if possibe please add a feature to customise the number of slides shown on tablet/IPad.

Hi, I couldn't find documentation on how to import the CSS files outside of JS. I see there's another similar issue over here: #24 (I'm currently using version 1.5.1, which should have fixed that).

Currently, doing @import "swiffy-slider"; or @import swiffy-slider/dist/css/swiffy-slider; causes a whole lot of problems with Vite.js (which uses esbuild under the hood). For instance:

Error: Missing "./dist/css/swiffy-slider" export in "swiffy-slider" package

Error: Failed to resolve entry for package "swiffy-slider". 
The package may have incorrect main/module/exports specified in its package.json: 
Failed to resolve entry for package "swiffy-slider"

PS.: This might not have anything to do with it, but after looking at other packages, I notice that style and exports don't usually start with ./.

Hi!

Thank you for Swiffy slider - it's super easy to implement and understand.
I wanted to ask if it's possible to somehow add few sliders on the same page without them having same style/layout ?
I have tried few times, but it seems that as the classes are the same, any new slider on the page "takes up" the first one's formatting.

So I was working on a clients projects and being an e-commerce site it had several products to display. Reading through the docs the current behavior for example defaults from 6-4-2.

I'd prefer if I could choose my own breakpoints since some images/containers don't look how I want them to, e.g it looks too big for that specific break-point

I'm currently using Swiper JS as that's the one being used on the clients site at the moment, an alternative I've looked at is Glide and Splide JS

Describe the bug
We use error tracking software on our website and an event that is popping up regualrly relates to

'undefined is not an object'
f(t&&Object.prototype.hasOwnProperty.call(t,"addEventListener")){T(t,"addEventListener",function(o){var i={component:"".concat(e,".prototype

Crashed in non-app: ./node_modules/swiffy-slider/src/swiffy-slider.esm.js in handleIndicators

To Reproduce
unfortunatly we cannot provide steps to reproduce due to it been an intermittent issue.

Expected behavior
expected it not to occur?

Screenshots
N/A

Desktop (please complete the following information):

• Majority on Safari v15+
• Mac (18%)

Smartphone (please complete the following information):

• Safari Mobile 15.5 and 15.6 (57%)
• Iphone (74%)

Additional context
Our application is on NEXTJS.

and example of how swiffy is rendered in a component.

import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import Container from '../../Container';
import Image from 'next/image';
import Headings from '../../heading/Heading';
import { swiffyslider } from 'swiffy-slider';

function Classic({ data, title, cta }) {
  const { _metadata, content } = data.classic;

  const sliderRef = useRef()

  let dotsClass = 'desktop:hidden bg-dark'

  useEffect(() => {
    swiffyslider.initSlider(sliderRef.current)
  }, [])

  return (
    <section id={_metadata.uid} className="content-list bg-dawn-grey-10 standard-padding">
      <Container fullPage={false}>
        <Headings headingContent={title} headingClassName='h4 md:h2 text-center mx-12 mb-10' />
        <div className="block md:flex flex-row flex-wrap w-full justify-between mx-auto">
          <div className={`content-list-slider swiffy-slider slider-nav-autoplay slider-nav-visible slider-indicators-sm`} data-slider-nav-autoplay-interval={3000} ref={sliderRef}>
            <ul className="slider-container" tabIndex={0}>
              {content.map((item, index) => {

                return (
                  <li className="flex-1 px-4 mb-2.5" key={index}>
                    <div className="relative">
                      <Image
                        src={`${item.image.url}?disable=upscale`}
                        width={274}
                        height={204}
                        objectFit={"cover"}
                        layout={"responsive"}
                        alt={item.image.title.replace(/\.[^/.]+$/, "")}
                      />
                    </div>
                    {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == true ? <OverlayIcon icon={item.overlay_content.icon} /> : ""}
                    {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == false ? <OverlayText text={item.overlay_content.text} /> : ""}

                    <h3 className="sh10 md:sh9 text-center mb-2">{item.title}</h3>
                    <p className="text-center max-w-sm mx-auto body-r">{item.description}</p>
                  </li>
                )
              })}
            </ul>

            <div className={`slider-indicators slider-indicators-round z-30`}>
              {content.map((item, index) => {
                return (
                  // set first indicator to 'active'
                  <button key={`slider-indicator-${index}`} className={`${index === 0 ? 'active' : ''} ${dotsClass} slider-indicator`}>
                    <span className="sr-only">Slide {index}</span>
                  </button>
                )
              })}
            </div>
          </div>
        </div>
        <CallToAction show={cta.show_cta} data={cta} />
      </Container>
    </section>
  )
}```

Is it possible to animate the text content displayed on top of an image when used as a slideshow?

Instead of fading to a color between slides during fade, would there be a way to fade one slide into another. I wonder if it could be a brief overlap then opacity goes to 0 for the exiting slide? Here are a few examples (but it is hard to see in the screen recording)...

This was an old slider with a nice fade opacity effect...

This is the same slider with the swiffy fade using a light gray in between...

On the bottom of the readme.md file there is a link to Dynamicweb Swift Ecommerce Starter
This link leads to dead end and also the domain dynamicweb-cms.com/ does not resolve to any page and also does not support httpS.

maybe this link is outdated and can be removed.

Describe the bug
Incorrect behavior when dragging slider on its first and last slide, of course this only happens if you are using the extended version of the lib.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://swiffyslider.com/configuration/?slider-nav-mousedrag=slider-nav-mousedrag'
2. On the first image, drag the slider from left to right.
3. You will briefly see the second image on the slider, like we were dragging it from right to left, the reverse also happens if we are on the last image of the slider

Expected behavior
Either nothing or the slingshot effect, where you try to drag the slider, but as you release, it returns to its original position.

Screenshots

Desktop

• OS: Windows 11
• Browser: Brave (Chromium)
• Version: 1.41.100 Chromium: 103.0.5060.134 (Official Build) (64-bit)

I don't see any animations in the latest stable FF and Chrome on https://swiffyslider.com/configuration/. This is from FF 100:

Describe the bug
On a 5 image-slider, the script skips 2 and 4. You can see that the button list below is visited only on 1, 3 and 5. Why?

The code is as follows:

<div id="employees" class="swiffy-slider slider-nav-outside slider-nav-visible slider-nav-nodelay slider-nav-autoplay slider-nav-autopause slider-item-show1 slider-indicators-outside slider-nav-animation slider-nav-animation-fadein slider-nav-animation-slow slider-item-last-visible" data-slider-nav-autoplay-interval="5000"> <ul class="slider-container"> <li class="employee"> <img src="https://info.spiria.com/hubfs/Erika.png" alt="Erika"> <div> <div id="hs_cos_wrapper_module_165049619677012_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="employee_title"></div><br>Erika </div> </li> [...] </ul> <button type="button" class="slider-nav"></button> <button type="button" class="slider-nav slider-nav-next"></button> <div class="slider-indicators"> <button class=""></button> <button></button> <button class=""></button> <button></button> <button class="active"></button> </div> </div>

The script is fired this way:

window.addEventListener('load', () => { swiffyslider.initSlider(document.getElementById('employees')); });

I found it hard to close the full screen carousel since there is no close button in the top corner. After I hit "escape" and read the directions though, it made sense.

Add an option to see a close icon in top right to make closing full screen more intuitive. Now, clicking in top right advances to next slide.

If this is an easy addition on my side with scripting, no need to bake into the code.

Thank you! Very clean documentation.

Is your feature request related to a problem? Please describe.
It's difficult to style slider-indicator buttons because all of their classes are stripped when adding/removing the active class. I'm trying to dynamically style these using Tailwind, so using CSS / inline styles aren't really an option.

Describe the solution you'd like
Check if the element has the active class, then selectively remove that class instead of removing the entire class attribute.

Loving the simplicity of this slider, just want to be able to implement more color customization options beyond light & dark.

The slider-item-show2 class not working on mobile but works on Bigger devices