amp-carousel畫廊活動縮略圖

在放大器旋轉木馬的基本示例（Image Galleries with Previews）有沒有辦法改變活動按鈕的樣式？所以聚焦按鈕（甚至在自動播放模式），通過CSS樣式amp-carousel畫廊活動縮略圖

<amp-carousel id="carousel-with-preview" width="400" height="300" layout="responsive" type="slides" autoplay> 
<amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> 
<amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> 
<amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> 
<amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> 
</amp-carousel> 
<div class="carousel-preview"> 
<button on="tap:carousel-with-preview.goToSlide(index=0)"><amp-img src="https://unsplash.it/60/40?image=10" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button> 
<button on="tap:carousel-with-preview.goToSlide(index=1)"><amp-img src="https://unsplash.it/60/40?image=11" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button> 
<button on="tap:carousel-with-preview.goToSlide(index=2)"><amp-img src="https://unsplash.it/60/40?image=12" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button> 
<button on="tap:carousel-with-preview.goToSlide(index=3)"><amp-img src="https://unsplash.it/60/40?image=13" width="60" height="40" layout="responsive" alt="a sample image"></amp-img></button> 
</div>

來源

2017-07-30 Ashraf

強調，雖然我花了時間在發佈前尋找一種方式，我找到了解決辦法右後:)

這樣可以用安培綁定來實現，加功放綁定領導

<script async custom-element=\"amp-bind\" src=\"https://cdn.ampproject.org/v0/amp-bind-0.1.js\"></script>

旋轉木馬前添加此

<amp-state id="selected"><script type="application/json"> {"slide": 0} </script></amp-state>

和這對放大器傳送帶代碼

on="slideChange:AMP.setState({selected: {slide: event.index}})"

加載類來按鈕與活性類，如果選擇

<div class="carousel-preview"> 
<button [class]="selected.slide == 0 ? 'active' : ''" class="active" on="tap:carousel-with-preview.goToSlide(index=0)">title1</button> 
<button [class]="selected.slide == 1 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=1)">title2</button> 
<button [class]="selected.slide == 2 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=2)">title3</button> 
<button [class]="selected.slide == 3 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=3)">title4</button> 
<button [class]="selected.slide == 4 ? 'active' : ''" on="tap:carousel-with-preview.goToSlide(index=4)">title5</button> 
</div>

來源

2017-07-30 02:03:38 Ashraf

amp-carousel畫廊活動縮略圖

回答

相關問題