jquery+swiper implements timeline tab sliding switching display effect-JS Tutorial-php.cn

Switch tab page content based on the timeline? The following article will introduce to you jquery How to achieve the timeline tab switching effect combined with swiper to achieve the sliding display effect. I hope it will be helpful to everyone!

jquery+swiper implements timeline tab sliding switching display effect

Requirements: Switch tab page content according to the timeline (the timeline needs to be swiped to view and select)

Implementation Idea:

Combine with the swiper plug-in to achieve the sliding display effect

Implement the left switching effect according to transform: translateX (the specific css implementation is as follows) to achieve a non-scrolling click switching effect. Modify with swiper. [Related tutorial recommendations: jQuery Tutorial]

Implementation effect:

jquery+swiper implements timeline tab sliding switching display effect

Implementation code: Needs to be used with the swiper component; the left navigation is based on the HTML structure and css3 code, and the timeline effect is generated from http://www.htmleaf.com/css3/ui-design/201911275850.html

Swiper basic demo address: https://www.swiper.com.cn/demo/index.html

HTML:

  <div>
    <div>
      <div>
        <a>
          <div>
            <span>2019</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2018</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2017</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2016</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2015</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2014</span>
          </div>
        </a>
        <div></div>
      </div>
    </div>
  </div>

Copy after login

2019

jquery+swiper implements timeline tab sliding switching display effect

2018

2017

2016

2015

2014

Required external link files:

<script></script>  
<script></script>  
<link>

Copy after login

CSS

.page {
  width: 100%;
}
 
.main-timeline {
  font-family: 'Roboto', sans-serif;
  width: 200px;
  position: relative;
  float: left;
}
 
.main-timeline:after {
  content: '';
  display: block;
  clear: both;
}
 
.main-timeline:before {
  /* content: '';
  height: calc(100% + 80px);
  width: 0px;
  border: 2px solid #0870C5;
  transform: translateX(-50%);
  position: absolute;
  left: 114px;
  top: 0px; */
}
 
.main-timeline .timeline {
  width: 4%;
  /* padding: 140px 70px 0 25px; */
  margin: 0 50px 0 0;
  float: left;
  position: relative;
}
 
.main-timeline .timeline-content {
  /* padding: 15px 15px 15px 40px;
  border: 2px solid #00A79B; */
  border-radius: 15px 0 15px 15px;
  display: block;
  position: relative;
}
 
.main-timeline .timeline-content:hover {
  text-decoration: none;
}
 
.fd-active-line .timeline-content:after {
  content: '';
  background-color: #00A79B;
  height: 18px;
  width: 15px;
  position: absolute;
  right: -43px;
  top: 27px;
  /* clip-path: polygon(100% 0, 0 0, 0 100%); */
}
 
.main-timeline .timeline-year {
  color: #fff;
  background-color: #00A79B;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  right: -120px;
  top: -40px;
}
 
.main-timeline .timeline-year:after {
  content: '';
  height: 100px;
  width: 100px;
  border: 8px solid #00A79B;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  position: absolute;
  left: 50%;
  top: 50%;
}
 
.main-timeline .timeline-icon {
  color: #fff;
  background-color: #00A79B;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -25px;
  transition: all 0.3s;
}
 
.main-timeline .title {
  color: #222;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 7px 0;
}
 
.main-timeline .description {
  color: #222;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: justify;
  margin: 0 0 5px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-content {}
 
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  transform: rotateY(180deg);
  right: auto;
  left: 123px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-year:after {
  transform: translateX(-50%) translateY(-50%) rotate(200deg);
}
 
.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: -25px;
}
 
.timeline:nth-child(4n+2) .timeline-content,
.timeline:nth-child(4n+2) .timeline-year:after {
  border-color: #9E005D;
}
 
.timeline:nth-child(4n+2) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+2) .timeline-content:after,
.timeline:nth-child(4n+2) .timeline-icon,
.timeline:nth-child(4n+2) .timeline-year {
  background-color: #9E005D;
}
 
.timeline:nth-child(4n+3) .timeline-content,
.timeline:nth-child(4n+3) .timeline-year:after {
  border-color: #f24f0e;
}
 
.timeline:nth-child(4n+3) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+3) .timeline-content:after,
.timeline:nth-child(4n+3) .timeline-icon,
.timeline:nth-child(4n+3) .timeline-year {
  background-color: #f24f0e;
}
 
.timeline:nth-child(4n+4) .timeline-content,
.timeline:nth-child(4n+4) .timeline-year:after {
  border-color: #0870C5;
}
 
.timeline:nth-child(4n+4) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+4) .timeline-content:after,
.timeline:nth-child(4n+4) .timeline-icon,
.timeline:nth-child(4n+4) .timeline-year {
  background-color: #0870C5;
}
 
@media screen and (max-width:767px) {
  .main-timeline:before {
    display: none;
  }
 
  .main-timeline .timeline {
    width: 100%;
    padding-top: 80px;
    padding-right: 12px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline:nth-child(even) {
    padding-left: 10px;
    padding-top: 80px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline-content,
  .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
    background-color: #fff;
    padding-top: 25px;
  }
 
  .main-timeline .timeline-content:after {
    display: none;
  }
 
  .main-timeline .timeline-year {
    font-size: 24px;
    line-height: 70px;
    height: 70px;
    width: 70px;
    right: 0;
    top: -65px;
  }
 
  .main-timeline .timeline-year:after {
    display: none;
  }
 
  .main-timeline .timeline:nth-child(even) .timeline-year {
    left: 3px;
  }
}
 
@media screen and (max-width:567px) {
  .main-timeline .title {
    font-size: 18px;
  }
}
 
.swiper-container {
  width: 205px;
  height: 500px;
  float: left;
}
 
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
 
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
 
@media (max-width: 760px) {
  .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
  }
 
  .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
  }
}
.event_list img {
  width: 880px;
  height: 470px;
  object-fit: cover;
}
.xians {
  width: 3px;
  height: 100%;
  background: #0870C5;
  position: absolute;
  left: 82px;
  z-index: -1;
}

Copy after login

js:

  <script>
    $(function () {
      $(".main-timeline .timeline").click(function () {
        var TAG = $(this).siblings().length;
        if (TAG >= 1) {
          var index = $(this).index()
          $(this).addClass(&#39;fd-active-line&#39;).siblings().removeClass(&#39;fd-active-line&#39;)
          $(this).parent().parent().siblings(&#39;.event_list&#39;).children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new Swiper(&#39;.swiper-container&#39;, {
        slidesPerView: 4,
        direction: &#39;vertical&#39;,
        navigation: {
          nextEl: &#39;.swiper-button-next&#39;,
          prevEl: &#39;.swiper-button-prev&#39;,
        },
        on: {
          resize: function () {
            swiper.changeDirection(getDirection());
          }
        }
      });
    });
  </script>

Copy after login

swiper usage method

1. First load the plug-in. The files required are swiper-bundle.min.js and swiper-bundle.min.css. The file names used by different Swiper versions are slightly different. You can download Swiper files or use a CDN.

<link>
<script></script>

Copy after login

2.HTML content.

<div>
	<div>
		<div>Slide 1</div>
		<div>Slide 2</div>
		<div>Slide 3</div>
	</div>
	<!-- 如果需要分页器 -->
	<div></div>
	
	<!-- 如果需要导航按钮 -->
	<div></div>
	<div></div>
	
	<!-- 如果需要滚动条 -->
	<div></div>
</div>
导航等组件可以放在container之外

Copy after login

3. You may want to define a size for Swiper, but of course not.

.swiper-container {
    width: 600px;
    height: 300px;
}

Copy after login

4. Initialize Swiper. The default container before Swiper6 is '.swiper-container', and after Swiper7 it is '.swiper'.

<script>
	var mySwiper = new Swiper(&#39;.swiper-container&#39;, {
		direction: &#39;vertical&#39;, // 垂直切换选项
		loop: true, // 循环模式选项

		// 如果需要分页器
		pagination: {
			el: &#39;.swiper-pagination&#39;,
		},

		// 如果需要前进后退按钮
		navigation: {
			nextEl: &#39;.swiper-button-next&#39;,
			prevEl: &#39;.swiper-button-prev&#39;,
		},

		// 如果需要滚动条
		scrollbar: {
			el: &#39;.swiper-scrollbar&#39;,
		},
	})
</script>

Copy after login

5. Complete. Congratulations, your Swiper should now be able to switch normally.

If introduced as CommonJs or ES module

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
 
//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

Copy after login

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of jquery+swiper implements timeline tab sliding switching display effect. For more information, please follow other related articles on the PHP Chinese website!