欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何水平對齊這些圖像，如果我添加另一個圖像，它將被水平添加

CSS
劉柏宏1年前8瀏覽0評論

我試圖創(chuàng)建一個帶有名稱和描述的圖像滑塊，但當我添加另一個圖像時，它是垂直添加的。我試圖改變顯示，但什么也沒發(fā)生。你能幫我嗎？我對css和html還不熟悉

我想創(chuàng)建這種圖像滑塊 在此輸入圖像描述 但是這一次卻發(fā)生了 在此輸入圖像描述

我現(xiàn)在擁有的:

.services {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.services-container {
  padding: 0 10vw;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.services-container::-webkit-scrollbar {
  display: none;
}

.service-card {
  flex: auto;
  display: inline-block;
  width: 300px;
  height: 450px;
  text-align: center;
  margin-right: 40px;
}

.service-image {
  position: relative;
  overflow: hidden;
  height: 350px;
  width: 100%;
}

.service-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<section class="services">
  <button class="pre-btn"> <img src="image/arrow.png" alt=""></button>
  <button class="next-btn"> <img src="image/arrow.png" alt=""></button>
  <div class="service-container">
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiacne.jpg" class="service-thumb" alt="">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Acne</h2>
        <p class="service-desc">Description</p>
      </div>
      <div class="service-container">
        <div class="service-card">
          <div class="service-image">
            <img src="image/antiageing.jpg" class="service-thumb" alt="">
          </div>
          <div class="service-info">
            <h2 class="service-name">Anti Aging</h2>
            <p class="service-desc">Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

html應(yīng)該是這樣的

.services {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<section class="services">
  <button class="pre-btn"> <img src="image/arrow.png" alt=""></button>
  <div class="service-container">
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiacne.jpg" class="service-thumb" alt="">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Acne</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiacne.jpg" class="service-thumb" alt="">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Acne</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
  </div>
  <button class="next-btn"> <img src="image/arrow.png" alt=""></button>
</section>

這是一個小而超級快速但詳細的回答。我更新了CSS來展示如何布局可視部分。

你所描述的通常被稱為& quot旋轉(zhuǎn)木馬& quot你移動和聚焦的地方——在這個例子中是你的& quot卡片& quot或者通常是一組圖像或圖片。

使用了兩種主要的導(dǎo)航技術(shù)。左/右按鈕導(dǎo)航和& quot縮略圖& quot或者像我在這里設(shè)置的一組簡單的& quot標題& quot點擊直接轉(zhuǎn)到& quot卡片& quot。

這不是& quot生產(chǎn)就緒& quot用一些難看的邊框和其他元素來顯示什么在哪里，讓事情看起來更清楚。

您可以單擊& lt或者& gt按鈕(我用了一個引導(dǎo)SVG，這樣我可以在懸停時調(diào)整它的大小和顏色，諸如此類)或者點擊& quot標題& quot在底部——所有樣式都結(jié)合了網(wǎng)格和flex——不花哨，但更能說明問題。

從https://stackoverflow.com/a/63773123/125981那里借了一些卷軸零件的代碼。

至于索引部分，這里有一些有用的信息:有可能得到元素& # 39；的數(shù)字索引，而不進行循環(huán)？

(function() {
  function getElementIndex(element) {
    return [...element.parentNode.children].indexOf(element);
  }

  function scrollTo(el) {
    const left = el.offsetLeft + el.offsetWidth;
    const parentLeft = el.parentNode.offsetLeft + el.parentNode.offsetWidth;

    //if element in view
    if (left >= parentLeft + el.parentNode.scrollLeft) {
      el.parentNode.scrollLeft = left - parentLeft;
    } else if (left <= el.parentNode.offsetLeft + el.parentNode.scrollLeft) {
      el.parentNode.scrollLeft = el.offsetLeft - el.parentNode.offsetLeft;
    }
  }

  const carousel = document.querySelector('.carousel');
  const left = document.querySelector('.pre-btn');
  const right = document.querySelector('.next-btn');
  const cards = [...document.querySelectorAll('.service-card')];
  const navNames = document.querySelectorAll('.service-name-nav');
  carousel.dataset.currentIndex = 0;

  right.addEventListener('click', function(e) {
    const idx = carousel.dataset.currentIndex * 1;
    let nextIndex = idx < (cards.length - 1) ? idx + 1 : 0;
    carousel.dataset.currentIndex = nextIndex;
    scrollTo(cards[nextIndex]);
  });
  left.addEventListener('click', function(e) {
    const idx = carousel.dataset.currentIndex;
    let nextIndex = idx <= 0 ? cards.length - 1 : idx - 1;
    carousel.dataset.currentIndex = nextIndex;
    scrollTo(cards[nextIndex]);
  });
  navNames.forEach(elem => elem.addEventListener("click", function(event) {
    const idx = getElementIndex(this);
    carousel.dataset.currentIndex = idx;
    scrollTo(cards[idx]);
  }));
})();

:root {
  --carousel-background: #FF000011;
  --nav-button-size: 5em;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.services {
  overflow: hidden;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: var(--nav-button-size) auto var(--nav-button-size);
  grid-template-areas: "leftnav cards rightnav" "mynav mynav mynav";
  align-items: center;
  justify-content: center;
  gap: 1.25em;
  border: solid 1px #00ff00;
  background-color: var(--carousel-background);
}

.services .scroll-button,
.services .scroll-button svg {
  width: var(--nav-button-size);
  height: var(--nav-button-size);
  color: #FFFFFF;
  border: none;
  /* background-color: var(--carousel-background);*/
}

.services .scroll-button:hover,
.services .scroll-button svg:hover {
  transform: scale(1.2);
  color: #FFFF00;
}

.services .scroll-button.prev-btn {
  grid-area: leftnav;
}

.service-container.carousel {
  grid-area: cards;
}

.services .scroll-button.next-btn {
  grid-area: rightnav;
}

.service-container {
  overflow: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: row;
  gap: 1.25em;
  border: solid 1px #ff4444;
  align-items: center;
  padding: .5em;
}

.service-container::-webkit-scrollbar {
  display: none;
}

.service-card {
  border: solid 1px #FF00FF;
  display: grid;
  place-items: center;
}

.service-image {
  display: grid;
  place-items: center;
  border: solid green 1px;
  padding: 0.25em;
  background-color: #0000FF11;
}

.service-thumb {
  /* em of 300 X 350 px */
  /*width: 18.75em;
  height: 21.875em;*/
  width: 15em;
  height: 12em;
  border: double #FF0000 3px;
}

.service-container-nav {
  grid-area: mynav;
  /* overflow-x: scroll;
  overflow-y: hidden;*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
  grid-auto-rows: 1fr;
  gap: 1em;
  text-align: center;
  border: solid yellow 2px;
}

.service-name-nav {
  border: solid green 2px;
}

<section class="services">
  <div class="pre-btn scroll-button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg></div>
  <div class="next-btn scroll-button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg></div>
  <div class="service-container carousel">
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiacne.jpg" class="service-thumb" alt="I am first acne">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Acne</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiageing.jpg" class="service-thumb" alt="I am aging">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Aging</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiageing.jpg" class="service-thumb" alt="I am not fun">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti fun</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiageing.jpg" class="service-thumb" alt="I am gun">
      </div>
      <div class="service-info">
        <h2 class="service-name">Fun Guys</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiageing.jpg" class="service-thumb" alt="I am grape">
      </div>
      <div class="service-info">
        <h2 class="service-name">Tester Out</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
  </div>
  <nav class="service-container-nav">
    <div class="service-name-nav">Anti Acne</div>
    <div class="service-name-nav">Anti Aging</div>
    <div class="service-name-nav">Anti fun</div>
    <div class="service-name-nav">Fun Guys</div>
    <div class="service-name-nav">Tester Out</div>
  </nav>
</section>