3D-карусель не вращается в Safari - PullRequest
Новая
       18

3D-карусель не вращается в Safari

0 голосов
/ 11 июля 2020

Когда я нажимаю кнопку, чтобы повернуть карусель, она не работает в Safari.

У меня есть div который содержит мою карусель ( карусель - контейнер ), в которой есть мой div карусель , который содержит мои изображения ( ячейка ). Когда вы нажимаете одну из кнопок, div carousel вращается с transform: rotateY .

Я думаю, проблема в Javascript и EventListener 'click'.

HTML

<section>
                    <div class="portfolio">
                        <div class="portfolio__content column">
                            <div class="caroucel--container">
                                <div class="carousel">
                                    <div class="cell img-1">
                                        <div class="img--warpper"></div>
                                    </div>
                                    <div class="cell img-2">
                                        <div class="img--warpper"></div>
                                    </div>
                                    <div class="cell img-3">
                                        <div class="img--warpper"></div>
                                    </div>
                                    <div class="cell img-4">
                                        <h2>Lyon</h2>
                                        <div class="img--warpper"></div>
                                    </div>
                                    <div class="cell img-5">
                                        <div class="img--warpper"></div>
                                    </div>
                                    <div class="cell img-6">
                                        <div class="img--warpper"></div>
                                    </div>
                                </div>

                            </div>
                            <div class="buttons">
                                <div class="buttons--left">
                                    <div class="button--left"></div>
                                </div>
                                <div class="buttons--right">
                                    <div class="button--right"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

S CSS

    .portfolio {
        .portfolio__content {
            .caroucel--container {
                height: 60vw;
                width: 60vw;
            }
            .carousel {
                width: 100%;
                height: 100%;
                transform: translateZ(-51.961vw);
                [class^="cell img-"] {
                    width: 50vw;
                    height: 50vw;
                    left: 5vw;
                    top: 5vw;
                }
            }
    
            @for $i from 1 through 5 {
                .cell:nth-child(#{$i + 1}) { transform: rotateY(#{$i * 60}deg) translateZ(-51.961vw); }
            }
    
            .cell:nth-child(1) { transform: rotateY(0deg) translateZ(-51.961vw); }

            .buttons {
                margin: 2vw 0;
            }
        }
    }
}

JS

{

let carousel = document.querySelector('.carousel');
let cellCount = 6;
let selectedIndex = 0;

function rotateCarousel() {
  let angle = selectedIndex / cellCount * -360;

  if (!isMobile) {
    carousel.style.transform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';
    carousel.style.webkitTransform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';
    carousel.style.MozTransform = 'translateZ(-60vw) rotateY(' + angle + 'deg)';
  }else {
    carousel.style.transform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';
    carousel.style.webkitTransform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';
    carousel.style.Moztransform = 'translateZ(-51.961vw) rotateY(' + angle + 'deg)';
  }
}

let prevButton = document.querySelector('.buttons--left');
prevButton.addEventListener( 'click', function() {
  selectedIndex--;
  rotateCarousel();
});

let nextButton = document.querySelector('.buttons--right');
nextButton.addEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

}
...