如何将轮播滑块中的项目居中？

问题描述 投票：0回答：1

我目前正在开发一个带有大约 14 个不同国家国旗的国旗滑块。

我想要的动画是有一个容器/卡片，卡片上仅显示 3 个国家，2 秒后滑动：

左侧的国家/地区移出容器 中间的国家移至左侧 右侧的国家/地区向中间移动，并在移动时稍微缩放（因此会弹出更多）。

一个新的国家移至

右侧。

我遇到的问题是我不知道如何将中间图像居中到卡片的中间，因为我实现它的方式是有 14 个图像，当我使用

justify-content: center; 

 时菲律宾在卡片上显示在中间，这是正常的，但不是期望的结果。

到目前为止我尝试过的：

    使用像素并计算它必须移动的量，但这不会使其具有响应能力，我希望它具有响应能力。
  • Justify-content: center;
     在 div 上
当前发生的情况：[

点击] 所需动画：[点击]

这是我的第一篇 Stackoverflow 帖子，我希望我能清楚地解释一切，如果没有，请随时提供有关如何改进我的帖子的反馈。

代码：

const slider = document.querySelector('.flag-slider'); const flags = document.querySelectorAll('.flag'); let currentIndex = 2; // Middle flag function updateFlags() { flags.forEach((flag, index) => { flag.classList.remove('active'); if (index === currentIndex - 1) { flag.classList.add('active'); } }); } function slideFlags() { // Slide to the left slider.style.transform = `translateX(-${(currentIndex - 1) * (75 / 3)}%)`; currentIndex++; if (currentIndex > flags.length) { console.log('reset'); currentIndex = 2; slider.style.transform = `translateX(0%)`; } updateFlags(); } // Initial flag setup updateFlags(); // Auto-slide every 2 seconds setInterval(slideFlags, 2000);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.countries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  padding: 20px;
}

.slider-container {
  width: 100%;
  margin: 50px auto;
  overflow: hidden;
  position: relative;
}

.flag-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.flag,
.last_flag {
  width: 33.33%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.flag img {
  width: 100%;
  object-fit: contain;
}

.flag.active {
  transform: scale(1.2);
}
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">
  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <div class="countries">
    <div class="slider-container">
      <div class="flag-slider">
        <img class="flag" src="https://picsum.photos/200" alt="Australia">
        <img class="flag" src="https://picsum.photos/200" alt="Austria">
        <img class="flag" src="https://picsum.photos/200" alt="Brazil">
        <img class="flag" src="https://picsum.photos/200" alt="Canada">
        <img class="flag" src="https://picsum.photos/200" alt="France">
        <img class="flag" src="https://picsum.photos/200" alt="Germany">
        <img class="flag" src="https://picsum.photos/200" alt="India">
        <img class="flag" src="https://picsum.photos/200" alt="Mexico">
        <img class="flag" src="https://picsum.photos/200" alt="Philippines">
        <img class="flag" src="https://picsum.photos/200" alt="South Africa">
        <img class="flag" src="https://picsum.photos/200" alt="Egypt">
        <img class="flag" src="https://picsum.photos/200" alt="UK">
        <img class="flag" src="https://picsum.photos/200" alt="USA">
        <img class="flag" src="https://picsum.photos/200" alt="Venezuela">
        <img class="flag" src="https://picsum.photos/200" alt="Australia">
        <img class="last_flag" src="https://picsum.photos/200" alt="Austria">
      </div>
    </div>
    <span>Different countries</span>
  </div>
  <script src="js/app.js"></script>
</body>

</html>






我尝试计算它并对其进行硬编码，但它适用于固定宽度，但如果屏幕较小，则不起作用。

    

	


javascript

html

css


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
值得称赞的是您自己编写了轮播元素。我发现您正在使用 CSS 
transform
 属性将元素从原始位置移动。如果您在此处使用更好的值进行计算，您的元素将居中。


// Changed 75 / 3 to 100 / 3
slider.style.transform = `translateX(-${(currentIndex - 1) * (100 / 3)}%)`;





const slider = document.querySelector('.flag-slider');
const flags = document.querySelectorAll('.flag');
let currentIndex = 2; // Middle flag

function updateFlags() {
  flags.forEach((flag, index) => {
    flag.classList.remove('active');
    if (index === currentIndex - 1) {
      flag.classList.add('active');
    }
  });
}

function slideFlags() {
  // Slide to the left
  slider.style.transform = `translateX(-${(currentIndex - 1) * (100 / 3)}%)`;

  currentIndex++;

  if (currentIndex > flags.length) {
    console.log('reset');
    currentIndex = 2;
    slider.style.transform = `translateX(0%)`;
  }

  updateFlags();
}

// Initial flag setup
updateFlags();

// Auto-slide every 2 seconds
setInterval(slideFlags, 2000);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.countries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  padding: 20px;
}

.slider-container {
  width: 100%;
  margin: 50px auto;
  overflow: hidden;
  position: relative;
}

.flag-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.flag,
.last_flag {
  width: 33.33%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.flag img {
  width: 100%;
  object-fit: contain;
}

.flag.active {
  transform: scale(1.2);
}
<div class="countries">
  <div class="slider-container">
    <div class="flag-slider">
      <img class="flag" src="https://picsum.photos/200" alt="Australia">
      <img class="flag" src="https://picsum.photos/200" alt="Austria">
      <img class="flag" src="https://picsum.photos/200" alt="Brazil">
      <img class="flag" src="https://picsum.photos/200" alt="Canada">
      <img class="flag" src="https://picsum.photos/200" alt="France">
      <img class="flag" src="https://picsum.photos/200" alt="Germany">
      <img class="flag" src="https://picsum.photos/200" alt="India">
      <img class="flag" src="https://picsum.photos/200" alt="Mexico">
      <img class="flag" src="https://picsum.photos/200" alt="Philippines">
      <img class="flag" src="https://picsum.photos/200" alt="South Africa">
      <img class="flag" src="https://picsum.photos/200" alt="Egypt">
      <img class="flag" src="https://picsum.photos/200" alt="UK">
      <img class="flag" src="https://picsum.photos/200" alt="USA">
      <img class="flag" src="https://picsum.photos/200" alt="Venezuela">
      <img class="flag" src="https://picsum.photos/200" alt="Australia">
      <img class="last_flag" src="https://picsum.photos/200" alt="Austria">
    </div>
  </div>
  <span>Different countries</span>
</div>





    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.