是否可以在amp-carousel中的给定索引处添加/删除幻灯片，或者在多页面流中添加/删除给定索引处的页面，以及将幻灯片/页面绑定到选择器？
例如：
在下面的代码中，当选择一个地区时，城市＆amp;该区域的城市细节应该是可见的。如果取消选择区域1，则属于区域1的所有城市都应该从“城市”中隐藏。部分和城市细节＆＃39;部分。
此外，如果取消选择某个地区，并且从“城市详细信息”中删除了一个城市。部分，＆＃39;下一个城市＆＃39;按钮应该仍然能够链接到下一个可用的城市。
到目前为止，我有＆＃39;地区＆＃39;部分工作（隐藏/显示城市），但我希望得到一些帮助与城市细节＆＃39;部分。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>City Info</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP Components -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
/*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.3.0
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}
/* custom css */
#header {
height: 24px;
padding: 16px;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 24px;
}
.hidden {
display: none;
}
.center {
text-align: center;
}
div,
section {
padding: 30px 50px;
}
.regionOptions {
padding-top: 0;
}
.regionOptions p {
text-align: center;
font-weight: bold;
border: 1px solid #ccc;
box-shadow: 0 2px 2px #ccc;
padding: 30px;
width: 200px;
margin-right: 20px;
display: none;
}
.regionOptions p:hover,
.regionOptions p.selectedModel {
border-color: #62C3B1;
box-shadow: 0 2px 2px #62C3B1;
}
.regionOptions p.visible {
display: inline-block;
}
#regions option {
margin-right: 10px;
}
.btn {
position:relative;
}
.btn input {
position:absolute;
top: 0px;
}
.btn span {
font-weight: bold;
background-color: #aaa;
border:0px solid #000;
border-radius: 2px;
position: relative;
height: 36px;
margin: 0;
min-width: 55px;
padding: 0;
padding-left: 15px;
display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
color: #fff;
}
.btn input:checked + span {
background-color: #62C3B1;
}
.btn input + span > span.untag {
opacity: 0;
background: transparent;
padding: 0;
font-size: 10px;
}
.btn input:checked + span > span.untag {
opacity: 1;
}
.product-details-container {
/* border: 5px solid red; */
}
/* Sliding Stepper */
/* position details section */
.stepper.sliding {
position: relative;
overflow-x: hidden;
height: 400px;
max-width: 1200px;
margin: 0 auto;
border: 3px solid green;
padding: 0px;
}
/* position each detail 'page' horizontally */
.stepper.sliding .page {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 96%;
height: 90%;
padding: 16px;
transition: transform 0.25s cubic-bezier(0, 0, 0.3, 1);
}
/* position active page */
.stepper.sliding .page.active {
transform: translateX(0%);
pointer-events: auto;
}
/* position all other pages */
.stepper.sliding .page:not(.active) {
opacity: 0.5;
pointer-events: none;
}
/* animate position of prev & next pages */
.stepper.sliding .page.next {
transform: translateX(100%);
}
.stepper.sliding .page.previous {
transform: translateX(-100%);
}
/* Selected MODEL */
.regionOptions .selectedModel span {
color: red;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised {
color: black;
background-color: transparent;
text-align: center;
font-weight: bold;
border: 1px solid #ccc;
box-shadow: 0 2px 2px #ccc;
padding: 30px;
width: 200px;
margin: 15px;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised:hover {
border-color: #62C3B1;
box-shadow: 0 2px 2px #62C3B1;
}
</style>
</head>
<body>
<amp-state id="selected">
<script type="application/json">
{
"reion1": true,
"region2": true,
"region3": true,
"region4": true,
"city": ""
}
</script>
</amp-state>
<header id="header" class="mdl-color--black mdl-color-text--white">
<span class="mdl-color-text--blue">City</span>Info
</header>
<div>
<h3>Region</h3>
<label class="btn">
<input checked type="checkbox" value="region1" on="change:AMP.setState({selected:{region1: event.checked}})"/><span>Region 1 <span class="untag">X</span></span>
</label>
<label class="btn"><input checked type="checkbox" value="region2" on="change:AMP.setState({selected:{region2: event.checked}})" /><span>Region 2 <span class="untag">X</span> </span></label>
<label class="btn"> <input checked type="checkbox" value="region3" on="change:AMP.setState({selected:{region3: event.checked}})" /><span>Region 3 <span class="untag">X</span> </span></label>
<label class="btn"><input checked type="checkbox" value="region4" on="change:AMP.setState({selected:{region4: event.checked }})" ><span>Region 4 <span class="untag">X</span> </span></label>
</div>
<div class="regionOptions">
<h3>Cities</h3>
<p [class]="selected.region1 ? 'visible' : ''" class="visible selectedModel">City A From Region 1</p>
<p [class]="selected.region1 ? 'visible' : ''" class="visible">City B From Region 1</p>
<p [class]="selected.region2 ? 'visible' : ''" class=" visible">City C From Region 2</p>
<p [class]="selected.region2 ? 'visible' : ''" class=" visible">City D From Region 2</p>
<p [class]="selected.region3 ? 'visible' : ''" class=" visible">City E From Region 3</p>
<p [class]="selected.region3 ? 'visible' : ''"class=" visible">City F From Region 3</p>
<p [class]="selected.region4 ? 'visible' : ''"class=" visible">City G From Region 4</p>
<p [class]="selected.region4 ? 'visible' : ''"class=" visible">City H From Region 4</p>
</div>
<div class="product-details-container">
<h3 class="center">City Details</h3>
<div class="stepper sliding">
<!-- first position, active by default -->
<section class="page active product-details" [class]="slidingStepperPage > 0 ? 'page previous' : 'page active'">
<h3>Details: City A From Region 1</h3>
<div>
<button class="" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
</div>
</section>
<!-- other positions -->
<section class="page next product-details" [class]="slidingStepperPage < 1 ? 'page next' : (slidingStepperPage > 1 ? 'page previous' : 'page active')" [class]="selected.Product2FromUS ? 'active' : ''">
<h3>Details: City B From Region 1</h3>
<div>
<button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
<button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
</div>
</section>
<section class="page next product-details" [class]="slidingStepperPage < 2 ? 'page next' : (slidingStepperPage > 2 ? 'page previous' : 'page active')">
<h3>Details: City C From Region 2</h3>
<div>
<button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
<button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
</div>
</section>
<section class="page next product-details" [class]="slidingStepperPage < 3 ? 'page next' : (slidingStepperPage > 3 ? 'page previous' : 'page active')">
<h3>Details: City D From Region 2</h3>
<div>
<button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
<button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
</div>
</section>
<section class="page next product-details" [class]="slidingStepperPage < 4 ? 'page next' : (slidingStepperPage > 4 ? 'page previous' : 'page active')">
<h3>Details: City E From Region 3</h3>
<div>
<button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
<button class="stepper-btn " on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })">Next City</button>
</div>
</section>
<section class="page next product-details" [class]="slidingStepperPage < 5 ? 'page next' : (slidingStepperPage > 5 ? 'page previous' : 'page active')">
<h3>Details: City F From Region 3</h3>
<div>
<button class="stepper-btn back" on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage - 1 })">Previous City</button>
</div>
</section>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我认为你应该重新设计轮播，就像一条线不相互重叠。然后隐藏哪个页面需要与Cities相同的方法。使用类更改滑动方式：
.translateX-1 {
transform: translateX(100%);
}
.translateX-2 {
transform: translateX(200%);
}
.translateX-3 {
transform: translateX(300%);
}