Onsen UIのカルーセル（ons-carousel）の縦位置を固定したいです

前提・実現したいこと

Onsen UIのカルーセル（ons-carousel）をページ上部に固定したいです。
カルーセルは一画面に複数表示させ、スワイプで切り替えられるものにしたいと思いっています。

環境：Onsen UI, JavaScript

発生している問題・エラーメッセージ

ons-carouselタグにposition: fixedの属性をつけたところ、
カルーセルのスワイプが効かなくなりました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
7    <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
8  </head>
9  <body>
10  <ons-page>
11    <ons-toolbar>
12      <div class="center">SAMPLE</div>
13    </ons-toolbar>
14
15    <ons-carousel swipeable auto-scroll overscrollable id="carousel" item-width="300px">
16      <ons-carousel-item><div>1</div></ons-carousel-item>
17      <ons-carousel-item><div>2</div></ons-carousel-item>
18      <ons-carousel-item><div>3</div></ons-carousel-item>
19      <ons-carousel-item><div>4</div></ons-carousel-item>
20      <ons-carousel-item><div>5</div></ons-carousel-item>
21      <ons-carousel-item><div>6</div></ons-carousel-item>
22      <ons-carousel-item><div>7</div></ons-carousel-item>
23      <ons-carousel-item><div>8</div></ons-carousel-item>
24      <ons-carousel-item><div>9</div></ons-carousel-item>
25    </ons-carousel>
26    <div>
27      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
28      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
29      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
30      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
31      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
32      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
33      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
34      <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
35    </div>
36  </ons-page>
37
38  <style>
39    ons-carousel {
40      position: fixed;
41      z-index: 999;
42    }
43    
44    ons-carousel-item {
45      background-color: #085078;
46      margin: 5px;
47    }
48
49    ons-carousel-item > div {
50      text-align: center;
51      font-size: 30px;
52      color: #fff;
53      margin: 20px 0;
54    }
55  </style>
56</body>
57</html>