# bubble上にて自動スライドのカールセルは実現できるのか

**URL:** https://www.nocode-faq.com/t/topic/2837
**Category:** bubble
**Tags:** フロントエンド
**Created:** [2022 年 4 月 29 日午後 8:02 UTC](https://www.nocode-faq.com/t/topic/2837 "2022-04-29T20:02:26Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)
#### Post date: [2022 年 4 月 29 日午後 8:02 UTC](https://www.nocode-faq.com/t/topic/2837/1 "2022-04-29T20:02:26Z")

</div>

###・前提条件 動的なデータを使用して自動スライドのカールセルを作成したいと考えているのですができるのでしょうか？

### スクリーンショット

 ![スクリーンショット 2022-04-30 5.01.04](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7c3e535a07294eaccac11c2bbf17fe6368581b57.png)

### 試したこと

javascriptを使用して動的な自動のスライドバーを作成しようとしたが動的な値をうまく引っ張ってくることができませんでした。

---

<div class="post-metadata">

### Author: ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)
#### Post date: [2022 年 4 月 29 日午後 9:05 UTC](https://www.nocode-faq.com/t/topic/2837/2 "2022-04-29T21:05:08Z")

</div>

カルーセル部分の設計がどのようになっているか不明ですが、javascriptで可能です。  
対象エレメントのscrollLeftの値を一定時間ごとに変更していけばスクロールされます。

一定時間ごとの動作はjavascriptの内部で一定時間停止する処理を挟んだループでも、Bubble側からタイマー発火でもどちらでも可能です。

ユーザーがスクロールを操作した時に自動スクロールを止める必要があると思うので、基本的にはBubble側でタイマー制御→ユーザー操作で停止が無難です。  
横方向のスクロールは下記でできると思います。

```auto
const target_element = document.getElementsById("scroll");

target_element.scrollLeft = target_element.scrollLeft + XXXX 
  // XXXXに任意の値を入れる（Exスクロールさせるパーツの中のパーツ横幅×画面内に収まっている数（例：ひとつ100pxのものが6個画面内に表示されるなら600）
  

```

---

<div class="post-metadata">

### Author: ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)
#### Post date: [2022 年 5 月 9 日午後 4:31 UTC](https://www.nocode-faq.com/t/topic/2837/3 "2022-05-09T16:31:00Z")

</div>

お礼の返信が遅くなってしまい、申し訳ございません。  
javascrptを書いて実装してみようと思います！  
お答えいただきありがとうございました。
