Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

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.

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 :)

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.

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

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')); });

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: https://github.com/dynamicweb/swiffy-slider/issues/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 ./.

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

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

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

https://user-images.githubusercontent.com/4689792/195025647-dde076da-6c94-4aff-8a10-a22d1d7ed787.mp4

Desktop

• OS: Windows
• Browser: Chrome
• Version 106.0.5249.103

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

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>
  )
}```

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!

Introduces/changes the following functionalities:

1. Autoplay stops when the user interacts (clicks/taps prev or next buttons or slider indicators) For the case that the design features a pause button shown onhover (to indicate the "pause on hover" functionality), the class "slider-nav-autopause" is removed
2. Easier way to set the delay with which the indicators react

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

The problem solved with this PR is about the tag "template" who is parsed as an slide or an indicator when the library init the slider.

See issue https://github.com/dynamicweb/swiffy-slider/issues/46

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 https://github.com/dynamicweb/swiffy-slider/pull/47

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!

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.