import { Controller } from '@hotwired/stimulus';
import Swiper from 'swiper/bundle';
export default class extends Controller {
 static values = {
 options: Object,
 paginationDelay: Number,
 menu: Array,
 };
 static targets = ['pagination', 'next', 'prev'];
 connect() {
 this.swiper = new Swiper(this.element, {
 ...this.swiperOptions(),
 on: {
 slideChangeTransitionEnd: () => {
 this.dispatch('slideChangeTransitionEnd', { detail: { activeSlideIndex: this.swiper.activeIndex } });
 },
 },
 });
 }
 disconnect() {
 if (this.swiper) {
 this.swiper.destroy();
 }
 }
 swiperOptions() {
 let options = {};
 if (this.optionsValue) {
 options = this.optionsValue;
 }
 if (this.hasPaginationTarget) {
 options.pagination ||= {};
 options.pagination.el = this.paginationTarget;
 if (this.hasMenuValue) {
 options.pagination.clickable = true;
 options.pagination.type = 'bullets';
 options.pagination.renderBullet = (index, className) => {
 return `<span>${this.menuValue[index]}</span>`;
 };
 }
 }
 if (this.hasNextTarget) {
 options.navigation &#124;&#124;= {};
 options.navigation.nextEl = this.nextTarget;
 }
 if (this.hasPrevTarget) {
 options.navigation &#124;&#124;= {};
 options.navigation.prevEl = this.prevTarget;
 }
 options.speed &#124;&#124;= 1200;
 return options;
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://coops.or.kr/assets/controllers/base/swiper_slide_controller-0d46f345.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://coops.or.kr/assets/controllers/base/swiper_slide_controller-0d46f345.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>