Непоследовательное поведение для нескольких каруселей на мобильном телефоне - PullRequest
Новая
       6

Непоследовательное поведение для нескольких каруселей на мобильном телефоне

0 голосов
/ 08 июня 2019

У меня есть несколько ползунков на странице, над которой я работаю.

На рабочем столе все мои ползунки отображаются, каждый раздел сложен и работает как положено.

На мобильных устройствах каждыйРаздел страницы переходит на собственную вкладку, но ползунки (за исключением первого) не работают должным образом.Хотя я могу скользить по первому, другие скользят слишком быстро, а также не соблюдают их правила инициализации.

Я попытался инициализировать каждый слайдер, используя их идентификатор вместо пакетной инициализации.

Вот мой макет страницы 


<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');
    });
  }

});

Где будет находиться моя проблема?Скорость скольжения на настольном компьютере одинакова, но как только появляется мобильное изображение, дела идут плохо.

...