javascript - 使用 Jquery 对齐轮播元素

我想用轮播的元素实现这个布局:

但这就是我能够完成的:

这是我的代码和 fiddle http://jsfiddle.net/xvac9usr/8/ :

HTML:

<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Card Carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">    

</head>

<body>
    <div class="carousel">    
         <button class="carousel__icon carousel__prev">
            Prev
        </button>
        <ul class="carousel__list">

            <li class="carousel__item">
                <div class="card card__small">
                    <div class="card__image card__image--1">
                        <h1 class="heading-primary">Wild</h1>
                        <h2 class="heading-secondary">Nevada</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Rocky</div>
                        </div>
                    </div>
                </div>
            </li>           
            <li class="carousel__item">
                <div class="card">
                    <div class="card__image card__image--2">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card card__active">
                    <div class="card__image card__image--3">
                        <h1 class="heading-primary">Refreshing</h1>
                        <h2 class="heading-secondary">Amazonas</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Rainy</div>
                            <div class="card__tag">Dangerous</div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card">
                    <div class="card__image card__image--4">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card card__small">
                    <div class="card__image card__image--5">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>            
        </ul>    
        <button class="carousel__icon carousel__next">
            Next
        </button>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

JS:

$(document).ready(() => {
  var carousel = $(".carousel__list"),
    carouselItems = $(".carousel__item"),
    clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
    itemWidth =
      carouselItems.width() +
      parseInt(carouselItems.first().css("marginRight"));

  const refreshChildPosition = () => {
    for(let i = 0; i < carouselItems.length; ++i){        
        $(carouselItems[i]).css("left", itemWidth * i);
    }    
  };

  refreshChildPosition();
  //carousel.width(itemWidth * carouselItems.length);

  $(".carousel__next").click(e => {
    e.preventDefault();
  });

  $(".carousel__prev").click(e => {
    e.preventDefault();
    moveRight();
  });

});

CSS:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }

body {
  font-family: "Open Sans", sans-serif; }

.card {
  overflow: hidden;
  width: 50rem;
  height: 60vh;
  border-radius: 0.8rem;
  box-shadow: 0px 122px 264px -115px black;
  transition: all 0.3s ease-out; }
  .card:hover {
    transform: translateY(-1rem);
    box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
  .card:not(:last-child) {
    margin-right: 9rem; }
  .card__image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: 3rem 0;
    z-index: 1;
    position: relative;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out; }


      .card__image--1 {
  background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
  background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
  background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
  background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
  background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
    .card__image:hover {
      transform: scale(1.03); }
  .card__tag-box {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2rem 3rem;
    display: flex;
    flex-wrap: wrap; }
  .card__tag {
    border: solid 1px white;
    padding: 3px 5px;
    border-radius: 3px;
    transition: transform 0.2s, background-position 0.3s ease-out;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
    background-size: 225%;
    display: inline-block;
    margin: 0.2rem 0; }
    .card__tag:hover {
      background-position: 100%;
      transform: translateY(-0.2rem); }
    .card__tag:not(:last-child) {
      margin-right: 1rem; }
  .card__active {
    transform: translateY(-0.5rem) scale(1.1); }
    .card__active:hover {
      transform: translateY(-2rem) scale(1.1); }
  .card__small {
    transform: scale(0.9); }
    .card__small:hover {
      transform: translateY(-1rem) scale(0.9); }

.carousel {
  height: 100vh;
  position: relative; }
  .carousel__list {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none; }
  .carousel__item {
    position: absolute; }
    .carousel__item:not(:last-child) {
      margin-right: 4%; }
  .carousel__icon {
    cursor: pointer;
    position: absolute;
    width: 5rem;
    height: 5rem; }
  .carousel__prev {
    left: 0;
    top: 50%;
    z-index: 100; }
  .carousel__next {
    right: 0;
    top: 50%;
    z-index: 100; }

body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem; }

.heading-primary {
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 2em; }

.heading-secondary {
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 1px; }

通过将位置减去 440，我似乎可以得到类似的结果，但它是一个硬编码解决方案并且没有响应。

最佳答案

尝试删除/注释这段 css 代码并测试您的应用程序

.carousel__item {
position: absolute; }

关于javascript - 使用 Jquery 对齐轮播元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52034153/

javascript - 使用 Jquery 对齐轮播元素

上一篇：javascript - Google 标签管理器问题类名以 '-ok' 结尾

下一篇：javascript - 如何在 Spring Boot 应用程序中设置 header X-Content-Type-Options "nosniff"？