我正在处理的页面上有多个滑块。
在台式机上，所有滑块都出现了，每个部分都堆叠了起来，并按预期工作。
在移动设备上，页面的每个部分都进入其自己的标签，但是滑块（第一个除外）的行为不正常。尽管我可以滑过第一个，但其他滑得太快，并且不遵守其初始化规则。
我尝试通过使用每个滑块的ID而不是批量初始化来初始化每个滑块。
这是我的页面布局
<div class="container ">
<ul class="tabs hide-on-med-and-up">
<li class="tab"><a href="#boulangerie">Boulangerie</a></li>
<li class="tab"><a href="#patisserie">Patisserie</a></li>
<li class="tab"><a href="#viennoiserie">Viennoiserie</a></li>
<li class="tab"><a href="#sandwicherie">Sandwicherie</a></li>
<li class="tab"><a href="#chocolaterie">Chocolaterie</a></li>
</ul>
<section id="boulangerie">
<h3 class="sectionTitle">Boulangerie</h3>
<div class="sectionContent row ">
<div class="carousel carousel-slider col s12 push-m6 m6" id="car_boula">
<a class="carousel-item" href="#one!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/boulangerie/boulang_1.jpg')}}" alt="images-boulangerie-1" id="boula_1"></a>
<a class="carousel-item" href="#two!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/boulangerie/boulang_2.jpg')}}" alt="images-boulangerie-2" id="boula_2"></a>
<a class="carousel-item" href="#three!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/boulangerie/boulang_3.jpg')}}" alt="images-boulangerie-3" id="boula_3"></a>
</div>
<div class=" col s12 pull-m6 m6 sectionText">
{% for para in textBoulangerie %}
<p>{{para}}</p>
{% endfor %}
</div>
</div>
</section>
<section id="patisserie">
<h3 class="sectionTitle">Patisserie</h3>
<div class="sectionContent row">
<div class="carousel carousel-slider col s12 m6" id="car_patti">
<a class="carousel-item" href="#one!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/patisserie/patis_1.jpg')}}" alt="images-patisserie-1" id="patti_1"></a>
<a class="carousel-item" href="#two!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/patisserie/patis_2.jpg')}}" alt="images-patisserie-2" id="patti_2"></a>
<a class="carousel-item" href="#three!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/patisserie/patis_3.jpg')}}" alt="images-patisserie-3" id="patti_3"></a>
</div>
<div class=" col s12 m6 sectionText">
{% for para in textPatisserie %}
<p>{{para}}</p>
{% endfor %}
</div>
</div>
</section>
<section id="viennoiserie">
<h3 class="sectionTitle">Viennoiserie</h3>
<div class="sectionContent row">
<div class="carousel carousel-slider col s12 push-m6 m6" id="car_vienn">
<a class="carousel-item" href="#one!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/viennoiserie/vienn_1.jpg')}}" alt="produit-viennoiserie-1" id="vienn_1"></a>
<a class="carousel-item" href="#two!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/viennoiserie/vienn_2.jpg')}}" alt="produit-viennoiserie-2" id="vienn_2"></a>
<a class="carousel-item" href="#three!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/viennoiserie/vienn_3.jpg')}}" alt="produit-viennoiserie-3" id="vienn_3"></a>
</div>
<div class=" col s12 pull-m6 m6 sectionText">
{% for para in textViennoiserie %}
<p>{{para}}</p>
{% endfor %}
</div>
</div>
</section>
<section id="sandwicherie">
<h3 class="sectionTitle">Sandwicherie</h3>
<div class="sectionContent row ">
<div class="carousel carousel-slider col s12 m6" id="car_sandw">
<a class="carousel-item" href="#one!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/sandwicherie/sandw_1.jpg')}}" alt="produit-sandwicherie-1" id="sandw_1"></a>
<a class="carousel-item" href="#two!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/sandwicherie/sandw_2.jpg')}}" alt="produit-sandwicherie-2" id="sandw_2"></a>
<a class="carousel-item" href="#three!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/sandwicherie/sandw_3.JPG')}}" alt="produit-sandwicherie-3" id="sandw_3"></a>
</div>
<div class=" col s12 m6 sectionText">
{% for para in textSandwicherie %}
<p>{{para}}</p>
{% endfor %}
</div>
</div>
</section>
<section id="chocolaterie">
<h3 class="sectionTitle">Chocolaterie</h3>
<div class="sectionContent row ">
<div class="carousel carousel-slider col s12 push-m6 m6" id="car_choco">
<a class="carousel-item" href="#one!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/chocolaterie/choco_1.jpg')}}" alt="produit-chocolaterie-1" id="choco_1"></a>
<a class="carousel-item" href="#two!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/chocolaterie/choco_2.jpg')}}" alt="produit-chocolaterie-2" id="choco_2"></a>
<a class="carousel-item" href="#three!"><img class="sectionImage" src="{{ url_for('static', filename='images/produits/chocolaterie/choco_3.jpg')}}" alt="produit-chocolaterie-3" id="choco_3"></a>
</div>
<div class=" col s12 pull-m6 m6 sectionText">
{% for para in textChocolaterie %}
<p>{{para}}</p>
{% endfor %}
</div>
</div>
</section>
</div>
这里是关联的javascript
var instance = M.Tabs.init(document.querySelectorAll('.tabs'), {'swipable':true});
document.addEventListener('DOMContentLoaded', function() {
var carousels = document.querySelectorAll('.carousel');
var carousel_instances = M.Carousel.init(
carousels,
{
'indicators':true,
'fullWidth':true,
'duration':300
}
);
});
我还添加了这段代码，以防止页面在进入和离开移动视图时依赖于选项卡式视图。
document.addEventListener('DOMContentLoaded', function() {
if(window.innerWidth > 600){
var tabs = document.querySelectorAll('.tabsContent');
tabs.forEach(element => {
element.classList.remove('tabsContent');
});
}
});
window.addEventListener("resize", function(event){
var tabs = document.querySelectorAll('.tabsContent');
if(window.innerWidth > 600){
tabs.forEach(element => {
element.classList.remove('tabsContent');
});
}
else if (window.innerWidth < 600){
tabs.forEach(element => {
element.classList.add('tabsContent');
});
}
});
我的问题在哪里？滑动速度在台式机上是一致的，但是一旦有了移动视图，事情就会一团糟。