stimulus-components/stimulus-carousel

A Stimulus controller to deal with carousel.

Stimulus components

👉 Introducing Stimulus components.

📚 Documentation

See Stimulus Components Website.

👷 Contributing

Do not hesitate to contribute to the controllers by adapting or adding features ! Bug reports or pull requests are welcome.

Don't forget to drop a 🌟 on GitHub to support the project.

📝 License

This project is released under the MIT license.

stimulus-carousel's Issues

Doesn't play well with bootstrap

The demo works fine until I add bootstrap. The libraries are loaded via an importmap (as esm modules), I suspect the problem is with swiper.js but I don't know.

I've set up a really simple Symfony demo that shows the problem

git clone [email protected]:survos-sites/carousel-demo.git && cd carousel-demo
composer install
bin/console importmap:install
symfony server:start -d
symfony open:local

If you open assets/app.js and remove the lines that load the bootstrap js and css, the arrows work.

Slightly more details in the README at https://github.com/survos-sites/carousel-demo

Cannot find module 'swiper/bundle'

I'm sorry I need a bit of help. I followed the guide at https://stimulus-components.netlify.app/docs/stimulus-carousel/

But I get the following error:

Any help?

(New Rails 6 project, NPM 3.0.0 stimulus-carousel)

Reference multiple instances from controller

Hi,

I've been struggling to work out how to achieve the swiper thumbs navigation like here:

Thumbs

How would i set up multiple carousels and pass the reference of one to the other with stimulus? Like this:

<script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper,
        },
      });
    </script>

Les options custom ne marche plus avec la version 2.0.0

Bonjour,

Je constate un soucis sur la dernière version du package, les options data-carousel-options plus pris en compte, uniquement les paramètres globaux dans le controller ici:

import Carousel from "stimulus-carousel"

export default class extends Carousel {
  get defaultOptions () {
    return {
      slidesPerView: 4.2,
      spaceBetween: 10,
      grabCursor: true
    }
  }
}

Exemple qui marche quand le rollback en 1.0.2 et plus avec 2.0.0:

.swiper-container.slider-navigation.pb-13(data-controller="carousel" data-carousel-options="{  'freeMode': false, 'slidesPerView': 1, 'pagination': { 'el': '.swiper-pagination', 'dots': true, 'centerMode': true, 'clickable': true }, 'navigation': { 'nextEl': '.swiper-button-next', 'prevEl': '.swiper-button-prev' }, 'navigation': { 'nextEl': '.swiper-button-next', 'prevEl': '.swiper-button-prev' } }")
  .swiper-wrapper
    .swiper-slide 1
    .swiper-slide 2
              ....

  .swiper-pagination
  .swiper-button-next
  .swiper-button-prev

Merci pour la réponse !

swiper options don't recognized

i have in my controller: carousel_controller.js

import Carousel from 'stimulus-carousel'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default class extends Carousel {
    connect() {
        super.connect()
        this.swiper
        this.defaultOptions
    }

    // You can set default options in this getter.
    get defaultOptions() {
        return {
            preloadImages: false,
            lazy: true,
            spaceBetween: 0,
            speed: 500,
            centeredSlides: true,
            loop: true,
            autoplay: {
                delay: 1300,
                disableOnInteraction: true,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                type: 'progressbar'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar'
            },
        }
    }
}

and
this in a twig file

<div class="col-lg-4">
	<div class="post-entry-1 lg">
		{% if encyclopedie['dernier'].image %}
			<a href="single-post.html"><img src="{{asset(encyclopedie['dernier'].image)}}" alt="" class="img-fluid " data-controller="apparaitre" data-apparaitre-class-value="shadow-drop-bl"></a>
		{% endif %}
		<div class="post-meta">
			<span class="date">{{encyclopedie['dernier'].getCategoriesjoin}}</span>
			<span>{{(encyclopedie['dernier'].updatedAt?encyclopedie['dernier'].updatedAt:encyclopedie['dernier'].createdAt)|date('d/m à H:i', "Europe/Paris")}}</span>
		</div>
		<h2>
			<a href="single-post.html">{{encyclopedie['dernier'].titre}}</a>
		</h2>
		<p class="mb-4 d-block">{{TBckintro(encyclopedie['dernier'].article)}}</p>
		<div class="d-flex align-items-right author">
			<button class="btn btn-primary col">Lire l'article</button>
		</div>

	</div>

</div>

My problem is the option pagination. The twig is don't recognized.

Do you have a idea ?

Module not found: Error: Can't resolve 'swiper/bundle' in 'stimulus-carousel/dist'

Here's the error message that pops up

ERROR in ./node_modules/stimulus-carousel/dist/stimulus-carousel.es.js
Module not found: Error: Can't resolve 'swiper/bundle' in '/Users/foobar/zeit/project/node_modules/stimulus-carousel/dist'
resolve 'swiper/bundle' in '/Users/foobar/zeit/project/node_modules/stimulus-carousel/dist'
  Parsed request is a module
  using description file: /Users/foobar/zeit/project/node_modules/stimulus-carousel/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
    .....

// index.js
import Carousel from "stimulus-carousel";

const application = Application.start();
application.register("carousel", Carousel);
...

// application.scss
...
@import "~swiper/swiper-bundle";
...

It simply fails to compile.

Running

• Node 15.14.x
• stimulus-carousel 3.0.0
• stimulus 2.0.0
• rails 6.1.4.x

swiper import fails on compilation

node_modules/stimulus-carousel/dist/stimulus-carousel.es.js file has this line:
import Swiper from "swiper/bundle";
The above won't compile because the name of the swiper js file is different. It's swiper/swiper-bundle.esm.js, not swiper/bundle...

If I change it to the following, compilation is successful and the carousel works:
import Swiper from "swiper/swiper-bundle";

Any comments on this please? Is this a bug in this library or something wrong on my system?

Environment:

• Ruby 3.0.2
• Rails 6.1.4.1
• Node 17.5.0
• Webpack 4.46.0
• Webpacker 5.4.2

Using with importmaps

Anyone have any tips on how to get this running using import maps? I've pinned the Swiper package, and I've imported the CSS via @import url in my application.scss but no dice.

Doesn't work with rails 7.0.4 with Tailwind

Hey maybe you have some thoughts about how to force to work this component with the 7th rails on tailwind.
Because if you just follow the instructions it doesn't work. I also using importmap