Нестандартная длина прокрутки для рекламы в ампер-карусели [AMP-HTML] - PullRequest
Новая
       6

Нестандартная длина прокрутки для рекламы в ампер-карусели [AMP-HTML]

0 голосов
/ 31 октября 2018

Я впервые публикую вопрос, так что простите, если с ним что-то не так.

В настоящее время я работаю над пользовательским шаблоном рекламы с тремя слайдами, используя amp-carousel из проекта AMP.

Я предоставил вам свой шаблон по этой ссылке: https://jsfiddle.net/mlealrinaldi/6hvx15gb/

Среди помещений проекта есть два обязательных:

1) Второй слайд карусели должен быть частично виден в правом углу при отображении первого слайда (чтобы вызвать любопытство пользователя при просмотре рекламы).

2) В настольной версии при использовании кнопок «Вперед» и «Предыдущая» карусель должна прокручиваться к центру следующего или предыдущего изображения в последовательности.

Проблема, с которой я столкнулся, заключалась в том, что type = "carousel" позволяет мне частично отображать следующий слайд, но когда я нажимаю кнопку "следующий", он не прокручивается к центру следующего слайда , Вместо этого он прокручивается за пределы центра.

И когда я использую type = "slides" , навигационные кнопки правильно прокручиваются к центру следующего слайда, но не позволяют мне отображать часть следующего слайда (только один слайд на время).

Я ищу решение, которое предусматривает эти два требования. Для справки вот ссылка на документацию amp-carousel: https://www.ampproject.org/docs/reference/components/amp-carousel#type

Это часть HTML, которая содержит карусель: 

              <amp-carousel height="245" layout="fixed-height" type="carousel">

                <div class="slide" id="slide1" style="margin-left: 20px">
                    <img height="170" width="200" src="slide0.png"/>
                    <div>
                            <div class="cta" style="float:left"><p>São 100 carros todos os dias</p></div>
                            <div style="float:left;margin-top: 10px">
                                <a href="http://www.google.com.br" target="_blank">Participe</a>
                            </div>
                    </div>

                </div>

                <div class="slide" id="slide2">
                    <img height="170" width="200" src="slide1.png"/>
                    <div>
                            <div class="cta" style="float:left"><p>Se ligar, é seu!</p></div>
                            <div style="float:left;margin-top: 10px">
                                <a href="http://www.google.com.br" target="_blank">Participe</a>
                            </div>
                    </div>
                </div>

                <div class="slide" id="slide3">
                    <img height="170" width="200" src="slide0.png"/>
                    <div>
                            <div class="cta" style="float:left"><p>Faça o teste drive.</p></div>
                            <div style="float:left;margin-top: 10px">
                                <a href="http://www.google.com.br" target="_blank">Participe</a>
                            </div>
                    </div>
                </div>
          </amp-carousel>

Я также пытался изучить функции AMP .js, которые прослушивают щелчок по кнопкам навигации и заставляют работать карусель, но мои ограниченные знания только у меня забрали.

...