Split 3D 輪播圖片旋轉問題

Question

我找到了一個旋轉木馬 ( https://codepen.io/paulnoble/pen/yVyQxv )，它有一些很棒的過渡，我認為將它集成到我正在處理的項目中會很好： https://joshrodg.com/名人堂/

我的代碼在這里： https://codepen.io/joshrodgers/pen/MWBPXBx

設計的響應能力需要稍微調整，因為對我來說，內容拆分（左、右）在較小的屏幕（如手機）上效果不佳——這幾乎無法閱讀。 所以，我的想法是將右側的內容一起刪除。

我有那個工作，它看起來完全符合我的預期，除了一件事......

基本上，幻燈片右側有垂直分頁。 當您單擊下一個圓圈時，它會向前旋轉到下一張幻燈片，當您單擊上一個圓圈時，它會向后旋轉到上一張幻燈片。 在桌面屏幕（大於 900 像素）上，分頁區域位於旋轉圖像之上，這使得幻燈片旋轉看起來非常漂亮。 在我的 iPhone 上，我猜在其他小屏幕上，旋轉圖像似乎在分頁區域頂部旋轉，然后重新出現。

我確信這是一個簡單的調整，但是有沒有辦法在桌面和 iPhone 等小屏幕上旋轉圖像時將分頁區域保持在頂部？

這也是原始輪播的問題，所以我不確定如何解決。

分頁區域確實有一個z-index: 1但由於某種原因圖像仍然在分頁區域的頂部旋轉。 我什至嘗試將其設置得更高： z-index: 1000 ，但這似乎沒有任何作用。

有人有主意嗎？

謝謝
喬什

Answer 1

在進一步研究之后，我找到了解決方案！

我的carousel__control div 是控制垂直分頁的東西，它在carousel容器中，這是理所當然的，因為它控制着里面所有東西的 position。 但是，這也導致了我描述的問題，不太確定為什么。

我所做的就是將carousel__control移出carousel容器 - 基本上就在文檔的正上方。 然后必須設置我的邊距以匹配並調整它的 position。我無法保持margin: auto和top: 0 。 一旦我調整了這兩個屬性，一切都開始按預期工作。

我在這里更新了筆： https://codepen.io/joshrodgers/pen/MWBPXBx

謝謝，
喬什