How to realize the tab switching effect of the sliding year of the timeline with jquery+swiper components

This article mainly explains the "jquery+swiper component how to achieve the timeline sliding year tab switching effect", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how the jquery+swiper component to achieve timeline sliding year tab switching effect" bar!

Achieve results:

Implementation code: needs to be used with swiper components

Swiper basic demo address:

Https://www.swiper.com.cn/demo/index.html

HTML:

2019 2018 2017 2016 2015 2014 2019

2018

2017

2016

2015

2014

Required externally linked files:

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 00; 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,00,0100%); * /} .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: 00 7px 0;} .main-timeline .description {color: # 222; font-size: 15px; letter-spacing: 1px; text-align: justify; margin: 005px;}. 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;}

Js:

$(function () {$(".main-timeline .timeline") .click (function () {var TAG = $(this) .siblings () .length) If (TAG > = 1) {var index = $(this). Index () $(this) .addClass ('fd-active-line'). Siblings (). RemoveClass (' fd-active-line') $(this). Parent (). Parent (). Siblings ('.event _ list'). Children (). Eq (index). Show (). Siblings (). Hide ()}} ) var swiper = new Swiper ('.swiper-container' {slidesPerView: 4, direction: 'vertical', navigation: {nextEl:' .swiper-button-next', prevEl: '.swiper-button-prev',}, on: {resize: function () {swiper.changeDirection (getDirection ()) Thank you for your reading, the above is the content of "how jquery+swiper components achieve tab switching effect in timeline sliding years". After the study of this article, I believe you have a deeper understanding of how jquery+swiper components achieve timeline sliding year tab switching effect, and the specific usage still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!