Finally, I modified like below in HorizontalModeTrait. :smile:

     _getElementSize: function _getElementSize() {
       if (!this._currentElementSize) {
//       this._currentElementSize = this.getBoundingClientRect().width;
         this._currentElementSize = this.clientWidth;
       }

       return this._currentElementSize;
     },

Hello,
I noticed that the amount of scrolling is incorrect with Carousel scaled by transform.
In the sample below, correct scrolling amount of 750px is required. However, only 563px has been scrolled.

<H1>Transform</H1>
<div style="transform: scale(0.75)">
<ons-carousel style="width: 750px; height:100px;" swipeable overscrollable auto-scroll>
  <ons-carousel-item style="background-color: red;">
    ONE
  </ons-carousel-item>
  <ons-carousel-item style="background-color: green;">
    TWO
  </ons-carousel-item>
  <ons-carousel-item style="background-color: red;">
    THREE
  </ons-carousel-item>
</ons-carousel>
</div>

Thank you very much!
:smile:

Thank you for your reply.
I want do like below.
Click outside the dialog for the first time. -> "Not yet!"
Click outside the dialog for the second time. -> “Bye bye!”

But, not dislpayed “bye-bye!” on log.

<ons-template id="mydialog.html" >
  <ons-dialog cancelable>
    My Dialog
  </ons-dialog>
</ons-template>

<script>
  var app = ons.bootstrap();
  var counter = 0;

  ons.ready(function() {
    var dialog = ons.createDialog('mydialog.html').then(function (dialog) {

      dialog.on('prehide', function (event) {
        if (++counter < 2) {
          console.log('Not yet!');
          event.cancel();
        } else {
          console.log('Bye bye!');
        }
      });
      dialog.show();
    });
  });
</script>

When I cancel the event of prehide on ons-dialog with cancelable attribute (event.cancel()), it’s be no more cancelable (‘Canceled in prehide event.’ displayed at log).
How to resume it to be cancelable again?

@Fran-Diox Thank you very much. :satisfied:

@Fran-Diox Yes, I’m using Onsen UI with Angular 1.

Yes, it works fine.
However, it does not work in rc15 when the same description in the template which specified in the page attribute of the Navigator. In rc6, it works even in this case.
setActiveIndex worked, sorry.

<ons-navigator id="myNavigator" page="page.html"></ons-navigator>

<ons-template id="page.html">
  <ons-carousel id="crsl" style="height: 400px; width: 400px" initial-index="1" swipeable overscrollable auto-scroll>
    <ons-carousel-item>
       Carousel Item 1
       <ons-button onclick="document.getElementById('crsl').setActiveIndex(1);">Click to Change</ons-button>
    </ons-carousel-item>
    <ons-carousel-item>
       Carousel Item 2
       <ons-button onclick="document.getElementById('crsl').setActiveIndex(0);">Click to Change</ons-button>
    </ons-carousel-item>
  </ons-carousel>
</ons-template>

Attribute of Carousel named “initial-index” is not working with version 2.0.0-rc.7 or later.
Method “setActiveIndex()” too.