Tailwind CSS 的轮播组件
栏目分类:幻灯片 / 轮播图   发布日期:2021-09-02   浏览次数:

一个最小的、干净的、响应式的、由 Tailwind CSS 驱动的轮播组件,用于推荐、评论、引用等。

使用:

1. carousel 组件需要最新的 Font Awesome Iconic Font 和 Tailwind CSS 框架。

<link rel="stylesheet" href="/path/to/cdn/tailwind.min.css" />
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />

2. 推荐轮播的 HTML 结构。

<section class="wrapper_carousel flex flex-col justify-center w-full" role="region" aria-label="testimonial carousel">
  <div class="carousel-data relative overflow-hidden flex items-center justify-center w-full mt-8 mb-8">
      <div class="carousel-item" role="group" aria-label="slide 1 of 5">
          <div class="author-profile">
              <img src="1.jpg">
          </div>
          <p class="text_caption italic my-8">
              Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
          </p>
          <span class="caption-author">
              - William T. Riker
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 2 of 5">
          <div class="author-profile">
              <img src="2.jpg">
          </div>
          <p class="text_caption italic my-8">
              Taking seamless key performance indicators offline to maximise the long tail. User generated content in real-time will have multiple touchpoints for offshoring.
          </p>
          <span class="caption-author">
              - Sasha Banks
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 3 of 5">
          <div class="author-profile">
              <img src="3.jpg">
          </div>
          <p class="text_caption italic my-8">
              At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
          </p>
          <span class="caption-author">
              - Dana E. Owens
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 4 of 5">
          <div class="author-profile">
              <img src="4.jpg">
          </div>
          <p class="text_caption italic my-8">
              Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination.
          </p>
          <span class="caption-author">
              - Robert Booker
          </span>
      </div>
      <div class="carousel-item" role="group" aria-label="slide 5 of 5">
          <div class="author-profile">
              <img src="5.jpg">
          </div>
          <p class="text_caption italic my-8">
              Collaboratively administrate markets dynamically procrastinate user directed convergence after installed base benefits without revolutionary ROI.
          </p>
          <span class="caption-author">
              - Ororo Munroe
          </span>
      </div>
  </div>
  <div class="carousel-indicators flex items-center">    
  </div>
  <div class="carousel-controls flex justify-end mt-auto" aria-label="carousel controls">
      <button type="button" class="button_carousel-prev" aria-label="previous"><i class="fas fa-caret-left"></i></button>
      <button type="button" class="button_carousel-next ml-1" aria-label="next"><i class="fas fa-caret-right"></i></button>
  </div>
</section>

3. 在文档中加载主要的 carousel.js JavaScript。

<script src="carousel.js"></script>

4. 额外的 CSS 样式。

.wrapper_carousel {
  background: var(--primary-grey);
  height: 500px;
  border-radius: 12px;
  box-shadow: 2px 2px 12px 2px #a4a4a4;
}
  
.carousel-data {
  max-width: 600px;
  min-height: 320px;
  margin: 0 auto;
  z-index: 100;
  /*overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;*/
}
  
.carousel-item {
  opacity: 0;
  position: absolute;
  z-index: 500;
  transition: 500ms ease-in-out;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  
.initial-slide, .active-slide {
  opacity: 1;
  position: relative;
  z-index: 1000;
  visibility: visible;
}
  
.next, .prev {
  z-index: 900;
}
  
.next {
  -webkit-animation: animate-right 500ms;
          animation: animate-right 500ms;
}
  
.prev {
  -webkit-animation: animate-left 500ms;
          animation: animate-left 500ms;
}
  
@-webkit-keyframes animate-right {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}
  
@keyframes animate-right {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(100%);
  }
}
  
@-webkit-keyframes animate-left {
  100% {
      transform: translateX(-100%);
  }
  0% {
      transform: translateX(0);
  }
}
  
@keyframes animate-left {
  100% {
      transform: translateX(-100%);
  }
  0% {
      transform: translateX(0);
  }
}
  
  
.author-profile {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
}
  
.author-profile img {
  min-height: 108px;
  -o-object-fit: cover;
     object-fit: cover;
}
  
.text_caption {
  font-size: var(--text_lg);
  font-weight: var(--text_weight-medium);
}
  
.caption-author {
  font-weight: 700;
  font-size: 14px;
}
  
.carousel-indicators {
  margin: 0 auto;
}
  
.carousel-indicators button {
  width: 8px;
  height: 8px;
  background: #a4a4a4;
  border-radius: 50%;
  margin-left: 8px;
}
  
.carousel-indicators button:first-of-type {
  margin-left: 0;
}
  
.carousel-controls button {
  background: var(--yellow);
  padding: 24px;
  font-size: var(--text_md);
  width: 60px;
  max-width: 100%;
  height: 60px;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
.carousel-controls button .fas {
  line-height: 1em;
  font-size: 1.25em;
  pointer-events: none;
}
  
button.current-indicator {
  background: #197ABE;
}
  
@media only screen and (max-width: 768px) {
  
  .about-tagline {
      font-size: var(--text_display-lg);
  }
  
}
  
@media only screen and (max-width: 700px) {
  
  .carousel-data {
      padding: 0 16px;
  }
  
  .text_caption {
      font-size: var(--text_md);
  }
  
}
  
@media only screen and (max-width: 640px) {
  
  .about-tagline {
      font-size: var(--text_display-sm);
  }
  
  .wrapper_carousel {
      width: 100vw !important;
      position: relative;
      left: 50%;
      margin-left: -50vw;
  }
  
  .carousel-data {
      padding: 0 24px;
  }
  
  .text_caption {
      font-size: var(--text_default);
      line-height: 1.75em;
  }
  
  .carousel-controls button {
      width: 100%;
  }
  
}
  
@media only screen and (max-width: 400px) {
  
  .wrapper_carousel {
      height: 700px;
  }
  
  .wrapper_carousel .page_title {
      margin-top: 2rem !important;
  }
  
  .carousel-data {
      margin-bottom: 2rem !important;
  }
  
  .carousel-indicators {
      margin-bottom: 2rem;
  }
  
  .carousel-indicators button {
      width: 40px;
  }
  
}


官方网站:https://github.com/writhisdown/simple-carousel

相关热词: 旋转木马轮播Tailwind

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库