Подскажите, есть ли возможность при создании amp версии страници сайта, создать элемент как на рисунке
Иначе говоря, мне необходима некая карусель с условными кнопками - Новые| Популярные|Автоматы|Рулетки ... по нажатию на которые будет происходить пересборка списка с ссылками ? Или это из области фантастики ? Буду благодарен за элементарный пример, если это возможно
Добавить комментарий
|
1 ответ
Наверное вам может быть полезно что то похожее:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<title>Carousele, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.blue-box, .red-box, .green-box {
width: 100%;
height: 280px;
}
.blue-box {
background: blue;
}
.green-box {
background: green;
}
.red-box {
background: red;
}
#custom-button .amp-carousel-button-prev {
left: 5%;
background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}
#custom-button .amp-carousel-button-next {
right: 5%;
background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-carousel height="300"
layout="fixed-height"
type="carousel">
<a href=#><amp-img src="/img/image1.jpg"
width="400"
height="300"
alt="a sample image"></amp-img></a>
<a href=#><amp-img src="/img/image2.jpg"
width="400"
height="300"
alt="another sample image"></amp-img></a>
<a href=#><amp-img src="/img/image3.jpg"
width="400"
height="300"
alt="and another sample image"></amp-img></a>
</amp-carousel>
</body>
</html>
Здесь вы можете пробовать установить тэги а внутри изображения также. Без картинок трудно тестировать и определиться.
-
В качестве картинок можно подгружать плейстхолдеры placeholder.com Но вопрос не за карусель, а именно за вывод списков по нажатию на кнопки 4 сен 2018 в 4:38
-
Ну, вы можете применить элемент title или создать стили для tooltips. Здесь непонятно что вы имеете ввиду под выражениями: "пересборка списка с ссылками" и "вывод списков".– nikant255 сен 2018 в 6:15