scss Matrix特色活动自定义3D旋转木马

Posted 2021-05-17

<div id="events">
    <div class="events-inner">
        {% assign sorted = List.Items %}  
        {% for Item in sorted limit: 3 -%}
        <div class="event-single">
            <div class="image"><img src="{{ Item.FieldValues.EventImage }}" /></div>
            <div class="text">
                <h4>{{ Item.FieldValues.EventTitle }}</h4>
                <span class="e-date">{{ Item.FieldValues.EventDate }}</span>
                <span class="e-time">{{ Item.FieldValues.EventTime }}</span>
                <span class="e-location">{{ Item.FieldValues.EventLocation }}</span>
                <p>{{ Item.FieldValues.EventDescription | Truncate: 175  }}</p>
                {% if Item.FieldValues.EventLink %}
                    <a href="{{ Item.FieldValues.EventLink }}" class="cta-btn">More Details</a>
                    {% else %}
                {% endif %}
                 
            </div>
        </div>
        {% endfor -%}
    </div>
    <div class="controls">
        <a id="previous" href="#" onClick="return false;"></a>
        <a id="next"href="#" onClick="return false;"></a>
    </div>
</div>

  $("#events").each(function () {
    var prevBtn = $("#previous");
    var nextBtn = $("#next");
    var firstChild = $(this).find(".event-single:nth-child(1)");
    var secondChild = $(this).find(".event-single:nth-child(2)");
    var thirdChild = $(this).find(".event-single:nth-child(3)");

    firstChild.addClass("top");
    secondChild.addClass("middle");
    thirdChild.addClass("bottom");

    prevBtn.click(function () {
      if (firstChild.hasClass("top")) {
        firstChild.removeClass("top").addClass("middle");
        secondChild.removeClass("middle").addClass("bottom");
        thirdChild.removeClass("bottom").addClass("top");
      } else if (firstChild.hasClass("middle")) {
        firstChild.removeClass("middle").addClass("bottom");
        secondChild.removeClass("bottom").addClass("top");
        thirdChild.removeClass("top").addClass("middle");
      } else {
        firstChild.removeClass("bottom").addClass("top");
        secondChild.removeClass("top").addClass("middle");
        thirdChild.removeClass("middle").addClass("bottom");
      }
    });

    nextBtn.click(function () {
      if (firstChild.hasClass("top")) {
        firstChild.removeClass("top").addClass("bottom");
        secondChild.removeClass("middle").addClass("top");
        thirdChild.removeClass("bottom").addClass("middle");
      } else if (firstChild.hasClass("middle")) {
        firstChild.removeClass("middle").addClass("top");
        secondChild.removeClass("bottom").addClass("middle");
        thirdChild.removeClass("top").addClass("bottom");
      } else {
        firstChild.removeClass("bottom").addClass("middle");
        secondChild.removeClass("top").addClass("bottom");
        thirdChild.removeClass("middle").addClass("top");
      }
    });
  });

#events {
      position: relative;
      padding: 125px 0;

      @media (min-width: 768px) {
        padding-bottom: 25px;
      }

      .events-inner {
        width: 75%;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        height: 500px;

        @media (max-width: 767px) {
          width: 100%;
          height: 550px;
          text-align: center;
        }

        @media (max-width: 600px) {
          height: 600px;
        }

        .event-single {
          width: 100%;
          max-height: 500px;
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          @media (max-width: 767px) {
            flex-direction: column;
          }

          .image {
            text-align: right;
            flex-basis: 40%;

            @media(max-width: 767px) {
              flex-basis: 50%;
              max-height: 300px;
              top: 0 !important;
              left: 50%;
              text-align: center;
              transform: translateX(-50%);

              img {
                height: 300px;
              }
            }

            img {
              max-height: 100%;
            }
          }

          .text {
            flex-basis: 35%;

            @media (max-width: 767px) {
              flex-basis: 100%
            }

            h1 {
              font-weight: bold;
              letter-spacing: 1px;
              margin-bottom: 10px;
            }

            span {
              display: block;
              color: $bluewash;
            }

            .e-date {
              &:before {
                content: "\f073";
                font-family: fontawesome;
                margin-right: 10px;
                text-align: center;
              }
            }

            .e-time {
              &:before {
                content: "\f017";
                font-family: fontawesome;
                margin-right: 10px;
                text-align: center;
              }
            }

            .e-location {
              &:before {
                content: "\f041";
                font-family: fontawesome;
                margin-right: 15px;
                text-align: center;
              }
            }

            p {
              margin-top: 15px;
            }
          }
        }
      }

      .controls {
        position: relative;
        text-align: center;
        width: 50vw;
        margin: 25px;

        @media (max-width: 767px) {
          z-index: 9;
          position: absolute;
          left: 0;
          top: 100px;
          margin: 0;
          width: 100%;
        }

        >a {
          font-size: 25px;
          margin: 50px;
          color: white;
          background: black;
          width: 60px;
          height: 60px;
          position: relative;
          transition: all .33s ease;
          transform: scale(1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          display: inline-block;
          &#previous {
            &:before {
              content: "\f0d9";
              font-family: fontawesome;
              color: white;
              font-size: 40px;
              line-height: .6;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
          &#next {
            &:before {
              content: "\f0da";
              font-family: fontawesome;
              color: white;
              font-size: 40px;
              line-height: .6;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
          &#next,
            &#previous {
              &:hover {
                transform: scale(1.1);
              }
            }
          @media(max-width: 767px) {
            margin: 0;
            height: 300px;
            line-height: 300px;
            width: 25vw;
            opacity: 1;
            box-shadow: none;
            top: 15px;
            &#previous {
              left: -15px;
              position: absolute; 
              background: linear-gradient(to right, rgba(0,0,0,.2) , transparent);
            }
            &#next {
              right: -15px;
              position: absolute;
              background: linear-gradient(to left, rgba(0,0,0,.2) , transparent);
            }
          }
        }
      }
    }