>source

부트 스트랩 4 회전 목마 을 사용하고 있으며 프로젝트를 위해 사용자 정의했습니다.

내 기본 요구 사항은입니다

    • 다음 슬라이드를 클릭하면 현재 슬라이드가 활성화되고 새로운 다음 슬라이드가로드되어 뷰포트 오른쪽의 외부에서 오는 것처럼 애니메이션해야합니다.
    • 현재 활성 슬라이드는 이전에 사용 가능한 슬라이드가 뷰포트 왼쪽 밖에서가는 것처럼 움직여야합니다.
  1. 이전 클릭으로 동일합니다.

빠른 개요 :

  • 모든 다음 슬라이드는 뷰포트
  • 의 오른쪽에서 오는 것입니다.
  • 모든 이전 슬라이드가 와야하고 뷰포트
  • 의 왼쪽에서 가야합니다.

왼쪽 슬라이드는 다음과 같습니다. 이전 중간 슬라이드는 다음과 같습니다 오른쪽 슬라이드는 다음과 같습니다 : Next.

여기에 내 회전 목마 code 스 니펫이 있습니다. 나는 jQuery 3.5.1과 부트 스트랩 4.6을 사용했습니다

$moreAboutSlideCount= $('.carousel-card').length;
if ($moreAboutSlideCount > 2) {
    $('#more-about-carousel .carousel-inner').children().removeClass('prev active next');
    if ($moreAboutSlideCount % 2== 0) {
        $('.carousel-card:nth-child(' + ($moreAboutSlideCount /2) + ')').addClass('active');
        $('.carousel-card:nth-child(' + ($moreAboutSlideCount /2) + ')').prev().addClass('prev');
        $('.carousel-card:nth-child(' + ($moreAboutSlideCount /2) + ')').next().addClass('next');
    } else {
        $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) /2) + ')').addClass('active');
        $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) /2) + ')').prev().addClass('prev');
        $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) /2) + ')').next().addClass('next');
    }
    $('.carousel-card').click(function() {
        const moreAboutSlider= document.querySelector('#more-about-carousel .carousel-inner');
        if (moreAboutSlider.lastElementChild=== this) {
            $(this).parent().append($(this).siblings().first());
        }
        if (moreAboutSlider.firstElementChild=== this) {
            $(this).parent().prepend($(this).siblings().last());
        }
        $(this).removeClass('prev next');
        $(this).siblings().removeClass('prev active next');
        $(this).addClass('active');
        $(this).prev().addClass('prev');
        $(this).next().addClass('next');
    });
}

#more-about-carousel {
  height: 350px;
}
#more-about-carousel .carousel-inner {
  height: 96%;
  width: 92%;
  margin: 2% 4%;
  align-items: center;
  justify-content: center;
}
#more-about-carousel .carousel-card {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  background: #2e5266;
  background: linear-gradient(to top, #2e5266, #6e8898);
  transition: 1s;
}
#more-about-carousel .carousel-card:after {
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 100%;
  background-color: rgba(73, 73, 73, 0.3);
  bottom: -5rem;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
#more-about-carousel .carousel-card:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: rgb(180, 56, 56);
}
#more-about-carousel .carousel-card.active {
  z-index: 3;
  left: 33.3333333%;
  top: 0;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
  cursor: default;
  position: absolute;
}
#more-about-carousel .carousel-card.prev,
#more-about-carousel .carousel-card.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
  transform: scale(0.8) translateY(-1rem) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
  display: flex;
  position: absolute;
}
#more-about-carousel .carousel-card.prev {
  left: 0;
}
#more-about-carousel .carousel-card.next {
  left: 66.66666666%;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/><div class="bg-light pb-5">  <div class="m-0 p-5">    <div class="about-carousel">      <div id="more-about-carousel" class="carousel slide" data-ride="carousel" data-interval="60000">        <div class="carousel-inner row">          <div class="carousel-item col-12 col-md-4 card carousel-card text-center">            <h5 class="card-title">One</h5>            <h6 class="card-subtitle">1</h6>            <div class="card-body p-0">              <p class="card-text text-center text-monospace">Card -1p>          

참고 : 스크립트 오류가 여기에 표시되어 있고, 내 로컬 컴퓨터가 아닌

센터가 활성화 된 한 번에 3 장의 카드가 필요합니까?

Shashank Gb2021-05-15 22:04:07

@shashankgb 예. 중간 하나는 활성이고 다른 두 가지는 이전에 다음과 같습니다.

ajayg28082021-05-15 22:04:07
javascripthtmljquerycssbootstrap-4
  • 이전 PHP 및 XPath -특정 요소의 자식 요소를 통한 루프
  • 다음 android : API 레벨 28 아래의 Bulletspan에서 총알 반지름을 설정하는 방법은 무엇입니까?