search

Wikiki / bulma-carousel

Display a carousel
MIT License
135 stars 98 forks source link

Multiple carousel on Angular #38

Closed alexssandrog closed 6 years ago

alexssandrog commented 6 years ago

Hello, I'm trying to use multiple carousels on the same page, with Angular5+. But after adding the second carousel on page, nothing else works, neither the animation nor the navigation buttons.

Does something need to be done to function properly?

Dante1349 commented 6 years ago

@alexssandrog Hey, could you please tell me how you imported the carousel to your angular app? Iḿ currently trying to do that to but it doesn't work properly. The Stylesheet is not the Problem, but how did you import the javascript? Iḿ also planing to add multiple carousels to my app, maybe Iĺl step into the same Problem here.

Wikiki commented 6 years ago

Hi, I'm working on a new release which should, I hope, fix this kind of issue. Are you ready to test a pre-release version with angular ? If so, I'll add a new branch this afternoon, so you'll be able to get the code and test it within your application

Dante1349 commented 6 years ago

@Wikiki Yeah I would, but I did't found out how to integrate the javascript to angular

alexssandrog commented 6 years ago

@Wikiki Yes!!!!

alexssandrog commented 6 years ago

@Dante1349 I did it this way, no mistery:

npm i bulma npm i bulma-carousel

On angular-cli.json, include this line on scripts: "../node_modules/bulma-carousel/dist/bulma-carousel.min.js"

I use SASS, so import the CSS on src/style.sass: @import "~bulma"; @import "~bulma-carousel";

On the template of component, I include the carousel as it appears on the examples page. Like this:

<section class="hero is-medium has-carousel">
  <div id="banner-carousel" class="hero-carousel carousel-animated carousel-animate-fade" data-autoplay="true">
    <div class='carousel-container'>
      <div class='carousel-item has-background is-active'>
        <a [routerLink]="['pacote','inglaterra',1]">
          <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','alemanha',2]">
          <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','tailandia',3]">
          <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','israel',4]">
          <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" />
        </a>
      </div>
    </div>
    <div class="carousel-navigation is-overlay">
      <div class="carousel-nav-left">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="carousel-nav-right">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>

  <div class="hero-body">
    <div class="columns is-mobile">
      <div class="column is-half-desktop">
        <div class="container">
          <h1 class="title has-text-amarelo">
            My title
          </h1>
          <h2 class="subtitle has-text-amarelo">
            My subtitle
          </h2>
        </div>
      </div>
    </div>
  </div>
</section>
Dante1349 commented 6 years ago

@alexssandrog thank you very much, thats what i needed, I'm using almost the same configuration, except for sass, its scss in our usecase, but I will post what I experience. Especially what happens when I enter more carousels. BTW thank you for your exact answer ;-)

Wikiki commented 6 years ago

Can you please try with the source into the "release/2.0.0" branch for multiple carousels on the same page ? Don't forget to instanciate carousels by calling the static attach() method. There is no automatic instanciation anymore. var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances

Dante1349 commented 6 years ago

I thought that I was missing the script part, but I had that in my angular-cli.json

"scripts": [
  "../node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel.min.js"
],

this is what i did in styles.scss:

@import "../../node_modules/bulma/bulma";
@import "../../node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel";

my component:

<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background' *ngFor="let file of files" [class.is-active]="file==activeFile">
      <img class="is-background" src="{{file.url}}" alt="" width="640" height="310" />
      <div class="title">{{file.name}}</div>
    </div>
  </div>
  <div class="carousel-navigation is-overlay">
    <div class="carousel-nav-left" (click)="back()">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right" (click)="next()">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

But nothing works, even with the example code

abadilah1 commented 5 years ago

@alexssandrog I did it this way, no mistery:

npm i bulma npm i bulma-carousel

On angular-cli.json, include this line on scripts: "../node_modules/bulma-carousel/dist/bulma-carousel.min.js"

I use SASS, so import the CSS on src/style.sass: @import "~bulma"; @import "~bulma-carousel";

On the template of component, I include the carousel as it appears on the examples page. Like this:

<section class="hero is-medium has-carousel">
  <div id="banner-carousel" class="hero-carousel carousel-animated carousel-animate-fade" data-autoplay="true">
    <div class='carousel-container'>
      <div class='carousel-item has-background is-active'>
        <a [routerLink]="['pacote','inglaterra',1]">
          <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','alemanha',2]">
          <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','tailandia',3]">
          <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','israel',4]">
          <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" />
        </a>
      </div>
    </div>
    <div class="carousel-navigation is-overlay">
      <div class="carousel-nav-left">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="carousel-nav-right">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>

  <div class="hero-body">
    <div class="columns is-mobile">
      <div class="column is-half-desktop">
        <div class="container">
          <h1 class="title has-text-amarelo">
            My title
          </h1>
          <h2 class="subtitle has-text-amarelo">
            My subtitle
          </h2>
        </div>
      </div>
    </div>
  </div>
</section>

How is it initialized after all in the .ts file ??

Muhammadinaam commented 5 years ago

@Dante1349 I did it this way, no mistery:

npm i bulma npm i bulma-carousel

On angular-cli.json, include this line on scripts: "../node_modules/bulma-carousel/dist/bulma-carousel.min.js"

I use SASS, so import the CSS on src/style.sass: @import "~bulma"; @import "~bulma-carousel";

On the template of component, I include the carousel as it appears on the examples page. Like this:

<section class="hero is-medium has-carousel">
  <div id="banner-carousel" class="hero-carousel carousel-animated carousel-animate-fade" data-autoplay="true">
    <div class='carousel-container'>
      <div class='carousel-item has-background is-active'>
        <a [routerLink]="['pacote','inglaterra',1]">
          <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','alemanha',2]">
          <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','tailandia',3]">
          <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" />
        </a>
      </div>
      <div class='carousel-item has-background'>
        <a [routerLink]="['pacote','israel',4]">
          <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" />
        </a>
      </div>
    </div>
    <div class="carousel-navigation is-overlay">
      <div class="carousel-nav-left">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="carousel-nav-right">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>

  <div class="hero-body">
    <div class="columns is-mobile">
      <div class="column is-half-desktop">
        <div class="container">
          <h1 class="title has-text-amarelo">
            My title
          </h1>
          <h2 class="subtitle has-text-amarelo">
            My subtitle
          </h2>
        </div>
      </div>
    </div>
  </div>
</section>

@alexssandrog where did you write following javascript:?

// Initialize all div with carousel class var carousels = bulmaCarousel.attach('.carousel', options);