TW-elements carousel doesn't slide as in example

[jayrdi]

I have a carousel on my site taken from this example but, whereas in the example the images slide across from right to left, on my site they simply change with no animation.

Does anyone know what is causing this, and how I might implement it so that it has that "slide" effect?

Thanks

[juujisai]

Hi! I've checked on fresh vite install and here in snippets and it slides with an animation for me: https://tw-elements.com/snippets/tailwind/b-cylwik/5817708

Does tailwind create those classes for you? (you can check inspect tools for that). If they are added the animation should work properly.

If everything with the classes seems okay could you please show us some code you are using? Or is it the same exact code that is included bellow the Slides Only example?

Lastly, what stack are you using for your app?

[juujisai]

Did initializing via JS work for you? Everything looks good but since you are using ES package then we don't have to dispose the instance first. Just remove Carousel from the initTE

import {
  Carousel,
  Collapse,
  Dropdown,
  initTE,
} from "tw-elements";

initTE({ Collapse, Dropdown }, { allowReinits: true });

const carouselEl = document.getElementById("carousel-1");
new Carousel(carouselEl)

Just make sure that the component is initialized after route changes

[jayrdi]

Ah, so actually animations aren't working correctly in other elements. It does work properly with the "flush accordion", which is why I thought it was okay, but I just tested with the "drop in" (https://tw-elements.com/docs/standard/content-styles/animations-extended/) animation and that won't work.

I have added the class to "safelist", here is my tailwind.config.js (removed irrelevant lines):

const defaultTheme = require('tailwindcss/defaultTheme')
const { withAnimations } = require('animated-tailwindcss')

module.exports = withAnimations ({
  content: [
    ...
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  theme: {
    extend: {
      ...
    },
    safelist: 
      ['animate-[drop-in_0.5s]'],
  },
  plugins: [
    require("tw-elements/dist/plugin.cjs"),
  ],
  darkMode: "class"
})

I'm using Vite if that makes any difference? vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/site.css',
                'resources/js/site.js',
            ],
            refresh: true,
        }),
    ],
});

My JS referenced earlier is in site.js so that all seems to be correct. I mean, the functionality for my TW-elements stuff works, it seems to just be the animations that are failing.

I don't have a <script> link in my base HTML template, as I figure I don't need one because Vite is initialising the JS file.

Sorry, I'm not sure how to make sure that the component is initialising after route changes...

Thanks!

[juujisai]

Adding animation classes to safelist is necessary because we are using here dynamic arbitrary classes that tailwind on itself would ignore - thats why it wasn't working.
https://tw-elements.com/docs/standard/content-styles/animations/

As of the initialising after route changes, that may be an issue only for SPA so if the component works fine then there is no need to do anything with that.

You can try to initialize the component via JS like in my previous comments inside the site.js file. Did you try that? Was there any improvement or no differences at all?

[jayrdi]

No effect initialising the component via JS, unfortunately, other than losing my "back to top" button that appears on a page when you scroll down. That now only appears on the homepage and no other pages. My site.js currently:

// Tailwind Elements
import {
  Carousel,
  Collapse,
  Animate,
  Ripple,
  Dropdown,
  initTE,
} from "tw-elements";

initTE({ Collapse, Animate, Ripple, Dropdown }, { allowReinits: true });

// Get the button
const mybutton = document.getElementById("btn-back-to-top");
const carouselEl = document.getElementById("carousel-1");
new Carousel(carouselEl)

// When the user scrolls down 20px from the top of the document, show the button

const scrollFunction = () => {
  if (
    document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20
  ) {
    mybutton.classList.remove("hidden");
  } else {
    mybutton.classList.add("hidden");
  }
};
const backToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

window.addEventListener("scroll", scrollFunction);

As something of interest though, the "drop-in" box animation I dropped into the top of one of the pages as a test is still not working... I have it on the page as:

<div
    data-te-animation-init
    data-te-animation-start="onHover"
    data-te-animation-reset="true"
    data-te-animation="[drop-in_0.5s]"
    class="m-[20px] h-[130px] w-[130px] origin-[top_center] bg-[#fbfbfb] pt-10 text-center shadow-[0_2px_10px_0_rgba(0,0,0,0.14)] dark:bg-neutral-600">
    drop in
</div>

and in tailwind.config.js as:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './resources/**/*.antlers.html',
    './resources/**/*.antlers.php',
    './resources/**/*.blade.php',
    './resources/**/*.vue',
    './content/**/*.md',
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Montserrat', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        'jwmdrc-blue' : '#193d6b',
        'jwmdrc-red' : '#cf122e',
        'jwmdrc-light-blue' : '#7cadd3',
      },
      typography: {
        DEFAULT: {
          css: {
            a: {
              'text-decoration': 'none',
              'border-bottom-width': '2px',
              'border-color': 'rgb(207 18 46)',
              'font-weight': '700',
              '&:hover': {
                'border-bottom-width': '4px',
                'background-color': 'rgba(207, 18, 46, 0.25)',
              },
              '&:focus': {
                'border-bottom-width': '4px',
                'border-color': 'rgb(0 0 0)',
                'background-color': 'rgb(250 204 21)',
              },
            },
          },
        },
      },
    },
    safelist: [
      'animate-[drop-in_0.5s]',
    ]
  },
  plugins: [
    require('@tailwindcss/typography'),
    require("tw-elements/dist/plugin.cjs"),
  ],
  darkMode: "class"
}

The safelist is implemented correctly? I just wonder if it's all related, as that's two animations that don't work correctly.

[juujisai]

The safelist is implemented correctly, it works fine for me in my fresh app.

Maybe try checking again whether the classes are receiveing proper styles in inspect tools. The carousel animation is based on the transition-transform class and animations are based on animation classes - are the styles for those applied / created ?

You can also try linking our css (but make sure it doesn't overwrite your own styles) and see if anything changes

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />

or via js

import "tw-elements/dist/css/tw-elements.min.css";

You can also try to check whether your those issues occur in fresh vanilla app.

Other than that, I'm not sure what may cause those issues and how to help. Most likely it's some kind of config or the environment causing them I think.