Skip to content
Snippets Groups Projects
Commit 625008c2 authored by Your Name's avatar Your Name
Browse files

edit hp

parent f1818fe6
No related branches found
No related tags found
No related merge requests found
......@@ -94,6 +94,7 @@
</div>
</div>
<div class="col-lg-8" style="margin-top: 0rem;">
<h4 class="title" style="color: #573674;">offline visits</h4>
<p>
On July 18, 2023, despite still being in the summer vacation period, team members who remained in Beijing
formed an advance detachment and departed with anticipation for VJTbio. During the exchange, we gained <strong style="color: #8a61ad;">
......@@ -203,32 +204,32 @@
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/qitan-tech.png" alt="QiTan Logo" style="width:100%;margin-top: 2rem;">
</div>
</div>
<p>
During the visit and exchange at QiTan Tech, we not only toured many of the company's biotechnological equipments, but also gained
a deep understanding of the structure, properties, and meaningful applications of nanopore proteins. The company's years of efforts
in optimizing nanopore proteins are precisely what have led to the current level of accuracy in genetic sequencing.
</p>
<p>
We engaged in thorough discussions concerning protein optimization and design. During these discussions, we conveyed our team's
interests and the directions we intend to explore. Also,we learned that the company's algorithms in designing and optimizing nanopore
proteins have room for improvement, and our team believed that there is potential for collaboration in this area with the company.
However, through further dialogue, a consensus was reached between our team and the company. Namely, the company was focusing on
enhancing sequencing accuracy, and even incremental progress from 99% to 99.5% holds significant importance within the industry.
Nonetheless, this endeavor demands substantial time for accumulation and rigorous validation. As undergraduate students, rather than
graduate students, we probably should embark on tasks that leverage the creativity and imagination more inherent to undergraduates.
</p>
<p>
Furthermore, we also engaged in discussions with the company about the breakthroughs in the field of de novo protein design in 2023.
During the exchange, we emphasized that "de novo protein design" is highly challenging, currently achievable mainly by the David Baker
research group. This realization subsequently led us to consider focusing on antibodies with more predictable sequences and structures,
and <strong style="color: #8a61ad;">continuing our efforts in the design and optimization of antibodies</strong>.
</p>
<p>
During the visit and exchange at QiTan Tech, we not only toured many of the company's biotechnological equipments, but also gained
a deep understanding of the structure, properties, and meaningful applications of nanopore proteins. The company's years of efforts
in optimizing nanopore proteins are precisely what have led to the current level of accuracy in genetic sequencing.
</p>
<p>
We engaged in thorough discussions concerning protein optimization and design. During these discussions, we conveyed our team's
interests and the directions we intend to explore. Also,we learned that the company's algorithms in designing and optimizing nanopore
proteins have room for improvement, and our team believed that there is potential for collaboration in this area with the company.
However, through further dialogue, a consensus was reached between our team and the company. Namely, the company was focusing on
enhancing sequencing accuracy, and even incremental progress from 99% to 99.5% holds significant importance within the industry.
Nonetheless, this endeavor demands substantial time for accumulation and rigorous validation. As undergraduate students, rather than
graduate students, we probably should embark on tasks that leverage the creativity and imagination more inherent to undergraduates.
</p>
<p>
Furthermore, we also engaged in discussions with the company about the breakthroughs in the field of de novo protein design in 2023.
During the exchange, we emphasized that "de novo protein design" is highly challenging, currently achievable mainly by the David Baker
research group. This realization subsequently led us to consider focusing on antibodies with more predictable sequences and structures,
and <strong style="color: #8a61ad;">continuing our efforts in the design and optimization of antibodies</strong>.
</p>
<h3 id="ZGC" style="font-weight: bold;color:#573674">Zhongguancun Life Science Park in Beijing</h3>
<p>
We specifically visited the Zhongguancun Life Science Park, which focuses on cutting-edge tracks such as cell and gene therapy,
innovative pharmaceuticals, AI-driven drug development, AI-assisted diagnostics, and more. We visited some companies within the park,
with a particular emphasis on holding in discussions with Beijing Syngentech and BeiCell Biotechnology.
</p>
<p>
We specifically visited the Zhongguancun Life Science Park, which focuses on cutting-edge tracks such as cell and gene therapy,
innovative pharmaceuticals, AI-driven drug development, AI-assisted diagnostics, and more. We visited some companies within the park,
with a particular emphasis on holding in discussions with Beijing Syngentech and BeiCell Biotechnology.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h4 id="ZGC" style="font-weight: bold;color:#573674">Syngentech</h4>
......@@ -256,7 +257,7 @@
<p style="margin-top: -2rem;">
Through engagements with both companies, we not only toured many of the company's biotech instruments, enriching our biological background knowledge,
but also gained a deeper understanding of the role of synthetic biology in biomedicine and life health. We learned that AI has already played a
significant role in new drug development. What;'s more, both companies have utilized AI to optimize wet lab processes, making substantial contributions
significant role in new drug development. What's more, both companies have utilized AI to optimize wet lab processes, making substantial contributions
to clinical diagnosis, treatment, and drug development.
</p>
<p>
......@@ -268,38 +269,45 @@
Additionally, during the exchange, we also acknowledged the critical significance of "safety" in the new drug development process. In our project,
we placed significant emphasis on incorporating measures to <strong style="color: #8a61ad;">ensure the security of data sources and the integrity of algorithmic output sequences</strong>.
</p>
<h1 class="title" id="Header2">Scholarly exchanges</h1>
<div class="row" style="display: flex; align-items: flex-end;margin: 0;">
<h2 style="width:20%;font-weight: bold;color:#573674">Yinglu Cui</h2>
<h5 style="width:50%;font-weight: bold;margin-bottom: 12px;">(Chinese Academy of Sciences, Assoc. Prof.)</h5>
</div>
<p>
On April 19th, we had the privilege of inviting Yinglu Cui from the research group of Professor Bian Wu at the Chinese Academy of Sciences to visit Tsinghua University. We held a group
seminar where we engaged in extensive discussions regarding protein design and enzyme engineering.
</p>
<div style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/discuss-scolar.jpg" style="width: 50%; height: auto;">
</div><br>
<p>
<h1 class="title" id="Header2">Scholarly exchanges</h1>
<div class="row" style="display: flex; align-items: flex-end;margin: 0;">
<h2 style="width:20%;font-weight: bold;color:#573674">Yinglu Cui</h2>
<h5 style="width:50%;font-weight: bold;margin-bottom: 12px;">(Chinese Academy of Sciences, Assoc. Prof.)</h5>
</div>
<p>
On April 19th, we had the privilege of inviting Yinglu Cui from the research group of Professor Bian Wu at the Chinese Academy of Sciences to visit Tsinghua University. We held a group
seminar where we engaged in extensive discussions regarding protein design and enzyme engineering.
</p>
<div style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/discuss-scolar.jpg" style="width: 50%; height: auto;">
</div>
<br><p>
Professor Cui introduced to us the research undertaken by their group in the field of "computational-enzyme design." We reviewed the history of protein optimization and design,
highlighting areas such as rational design, semi-rational design, directed evolution, etc. She outlined the various breakthroughs and ongoing challenges in the transition to the
current phase of computational design. Further, she provided insights into the prospects of applying computer-designed non-natural enzymes in the field of biomedicine.
</p>
<p>
Our team presented our research and algorithm designs in protein optimization, sharing some of the algorithmic models we've experimented with. Professor Cui shared valuable insights
from their experience in this field, pointing out that the one-hot encoding we've been using lacks universality. Instead, she suggested we should include pre-encoding work and emphasized
the importance of assessing the generalization capability when researching model algorithms in the protein design realm. She noted that some current models, such as DLKcat, suffer from
from her lab's experience in this field, pointing out that the one-hot encoding we've been using lacks universality. Instead, she suggested we should include <strong style="color: #8a61ad;">pre-encoding work </strong>and emphasized
the importance of assessing the <strong style="color: #8a61ad;">generalization capability</strong> when researching model algorithms in the protein design realm. She noted that some current models, such as DLKcat, suffer from
weak generalization abilities. In response to Professor Cui's suggestions, we systematically worked on improvements, addressing each point.
</p>
<h2 id="2" style="font-weight: bold;color:#573674">Zhen Xie</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Professor Xie has extensive experience in both academia and industry, providing us with guidance on the
direction of our research topics and technical approach.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Professor Xie Zhen is a professor at the Center for Synthetic and Systems Biology at Tsinghua University,
as well as the founder and chief scientist of Syngentech.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h2 id="2" style="font-weight: bold;color:#573674">Zhen Xie</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Professor Xie has extensive experience in both academia and industry, providing us with guidance on the
direction of our research topics and technical approach.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Professor Xie Zhen is a professor at the Center for Synthetic and Systems Biology at Tsinghua University,
as well as the founder and chief scientist of Syngentech.
</p>
</div>
<div class="col-lg-3" style="margin-top: 0rem;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/zhen-xie.png" alt="Zhen Xie" style="width:80%;margin-top: 0rem;">
</div>
</div>
<p>
After communicating with several protein design and optimization companies, we have transitioned our focus from protein optimization design to antibody optimization design. However,
we haven't yet identified a specific task. Before establishing a concrete plan, we learned about recent breakthroughs in using artificial intelligence for de novo antibody design and
......@@ -309,32 +317,46 @@
<p>
We further investigated antibody humanization and found that traditional humanization techniques primarily involve a series of biological tools and simulation computations implemented
on computers, whereas machine learning deep learning methods are less used in the field, and are mainly employed for binary classification and humanization scoring of humanized antibodies.
We aim to delve deeper into using machine learning and deep learning tools to address challenges in this domain, incorporating considerations for antibody structures to outline a preliminary
We aim to delve deeper into using machine learning and deep learning tools to address challenges in this domain, incorporating considerations for antibody structures. When we propose a preliminary
technical route. We once again communicated with Professor Xie, who acknowledged our idea and expressed anticipation for us to construct a comprehensive automated tool and introduce innovative aspects.
</p>
<h2 id="3" style="font-weight: bold;color:#573674">Ziting Zhang</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Ziting Zhang provided us with an in-depth introduction to immunological knowledge related to antibodies. As a researcher in the field of immunology,
she expressed that our project holds significant meaning.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Ziting Zhang is a Ph.D. student in Bioinformatics at Tsinghua University, and she possesses unique insights in immunology.
Moreover, Zhang Ziting was a member of the Tsinghua-A team in 2020.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h2 id="3" style="font-weight: bold;color:#573674">Ziting Zhang</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Ziting Zhang provided us with an in-depth introduction to immunological knowledge related to antibodies. As a researcher in the field of immunology,
she expressed that our project holds significant meaning.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Ziting Zhang is a Ph.D. student in Bioinformatics at Tsinghua University, and she possesses unique insights in immunology.
Moreover, Zhang Ziting was a member of the Tsinghua-A team in 2020.
</p>
</div>
<div class="col-lg-3" style="margin-top: 0rem;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/ziting-zhang.png" alt="Ziting Zhang" style="width:80%;margin-top: 0rem;">
</div>
</div>
<p>
Ziting Zhang also pursued her undergraduate studies in the Department of Automation at Tsinghua University. Currently, her research interests converge at the intersection of bioinformatics.
Through exchanges with her, we gained a deeper understanding of immunological knowledge related to antibodies and how to leverage the advantages of our team's background in information.
She believes that our team's project this year holds considerable meaningand looks forward to the richness and experience of the Tsinghua-A team participating in the iGEM competition again after three years.
</p>
<h2 id="4" style="font-weight: bold;color:#573674">Xiangzhe Kong</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Xiangzhe Kong provided us with a lot of advice on CDR algorithm design, which helped us to understand the current situation
in the field of antibody CDR design in the international arena.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Xiangzhe Kong is a Ph.D. student at the Department of Computer Science, Tsinghua University, and the author of "Conditional Antibody Design as 3D Equivariant Graph Translation"
(ICLR 2023 Outstanding Paper Honorable Mention). He possesses extensive experience in computational de novo antibody design, especially CDR design.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h2 id="4" style="font-weight: bold;color:#573674">Xiangzhe Kong</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Xiangzhe Kong provided us with a lot of advice on CDR algorithm design, which helped us to understand the current situation
in the field of antibody CDR design in the international arena.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Xiangzhe Kong is a Ph.D. student at the Department of Computer Science, Tsinghua University, and the author of "Conditional Antibody Design as 3D Equivariant Graph Translation"
(ICLR 2023 Outstanding Paper Honorable Mention). He possesses extensive experience in computational de novo antibody design, especially CDR design.
</p>
</div>
<div class="col-lg-3" style="margin-top: 0rem;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/xiangzhe-kong.png" alt="Xiangzhe Kong" style="width:80%;margin-top: 2rem;">
</div>
</div>
<p>
Antibodies are divided into constant and variable regions, within the variable region are the high-frequency mutated CDR regions (where the antigen comes into contact with the antibody), and the relatively conserved and
species-specific FR regions. As the antigen-antibody binding region, CDR has garnered significant attention in the academic field, and there are a lot of difficulties in the design of CDR region, especially CDR-H3 loop.
......@@ -342,17 +364,24 @@
essential aspects of designing CDR regions from sequence to structure, and learned about some details of Equivariant Graph Neural Networks (EGNs). Through this exchange, we gained insights into the unique characteristics of
CDR regions and came to a full realization of the high variability of the CDR H3 loop. Based on this understanding, we made improvements to the structural scoring aspect of our project.
</p>
<h2 id="5" style="font-weight: bold;color:#573674">Wenbo Guo</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Wenbo Guo gave us valuable suggestions on our algorithms.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Wenbo Guo is a postdoctoral fellow in the bioinformatics direction at Tsinghua University, and has worked on classifying and annotating rare cell types using
OCLR (One Class Logistic Regression) promoted by One Class classifier.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h2 id="5" style="font-weight: bold;color:#573674">Wenbo Guo</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong> Wenbo Guo gave us valuable suggestions on our algorithms.
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong> Wenbo Guo is a postdoctoral fellow in the bioinformatics direction at Tsinghua University, and has worked on classifying and annotating rare cell types using
OCLR (One Class Logistic Regression) promoted by One Class classifier.
</p><br>
</div>
<div class="col-lg-3" style="margin-top: 0rem;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/wenbo-guo.png" alt="Xiangzhe Kong" style="width:80%;margin-top: 0rem;">
</div>
</div>
<p>
Since we apply One Class approach to scoring antibody sequences from rare species, we introduced our project and consulted with Dr. Guo about the key advantages of the one-class approach. Dr. Guo noted that the approach exhibits excellent scalability,
making it highly suitable for our application scenario. Additionally, we also sought advice from Dr. Zeyu Chen, who is also from the same research group. Dr. Chen recommended that we first experiment with methods such as SVM one class and IsolationForest,
making it highly suitable for our application scenario. Additionally, we also sought advice from Zeyu Chen, who is a Ph.D. student from the same research group. Dr. Chen recommended that we first experiment with methods such as SVM one class and IsolationForest,
which are commonly used for outlier detection.
</p>
<p>
......@@ -360,6 +389,23 @@
project. However, we also realized that the aforementioned traditional machine learning algorithms could be repurposed for outlier detection and integrated into our project to optimize it. Following several rounds of comparative validation, we selected
Local Outlier Factor as the method for outlier detection. Additionally, we embarked on constructing our own deep one class algorithm to score antibody sequences.
</p>
<div class="row" style="margin-top: 0rem;">
<div class="col-lg-9" style="margin-top: 0rem;">
<h2 id="5" style="font-weight: bold;color:#573674">Zeyu Chen</h2>
<p>
<strong style="color: #8a61ad;">The role:</strong>
</p>
<p>
<strong style="color: #8a61ad;">Profile:</strong>
</p>
</div>
<div class="col-lg-3" style="margin-top: 0rem;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/logo/zeyu-chen.png" alt="Xiangzhe Kong" style="width:80%;margin-top: 0rem;">
</div>
</div>
<p>
details
</p>
<h1 class="title" id="Header3">Team collaborations</h1>
<h2 id="6" style="font-weight: bold;color:#573674">CCiC</h2>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;width:50%;height: 280px;" class="swiper img-galary CCiCSwiper2">
......@@ -373,9 +419,9 @@
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div thumbsSlider="" class="swiper CCiCSwiper section-container" style="width:50%;height: 50px;">
<div thumbsSlider="" class="swiper CCiCSwiper section-container" style="width:50%;height: 50px;">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ccic-slide.jpg" />
......@@ -384,7 +430,7 @@
<img src="https://static.igem.wiki/teams/4771/wiki/hp/sj-ccic-slide.jpg" />
</div>
</div>
</div><br>
</div><br>
<p>
We listened to presentations from dozens of teams, both online and offline, as they shared their projects.
We also engaged in separate discussions with over ten teams. Through interactions with other teams, we gained
......@@ -400,29 +446,29 @@
careful consideration and technical feasibility validation, we decided to shift our theme towards antibody species-specification.
</p>
<h2 id="7" style="font-weight: bold;color:#573674">PekingHSC</h2>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;width:40%;height:400px" class="swiper img-galary HSCSwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary" style="background-color: #000;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide1.jpeg" style="object-fit: contain;" />
</div>
<div class="swiper-slide img-galary" style="background-color: #000;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide2.jpg" style="object-fit: contain;" />
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;width:40%;height:400px" class="swiper img-galary HSCSwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary" style="background-color: #000;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide1.jpeg" style="object-fit: contain;" />
</div>
<div class="swiper-slide img-galary" style="background-color: #000;">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide2.jpg" style="object-fit: contain;" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper HSCSwiper section-container" style="width:40%;height: 80px;">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide1.jpeg" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide2.jpg" />
</div>
</div>
</div><br>
<div thumbsSlider="" class="swiper HSCSwiper section-container" style="width:40%;height: 80px;">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide1.jpeg" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/hsc-slide2.jpg" />
</div>
</div>
</div><br>
<p>
When we were at CCiC, we had a preliminary understanding of PekingHSC's projects. Due to the geographical advantage, we visited Peking University's
main campus on July 24th and engaged in in-depth discussions with students from the School of Medicine at Peking University. We once again presented
......@@ -435,6 +481,67 @@
related topics. Members of PekingHSC also introduced us to some laboratories at Peking University dedicated to antibody research. Both of our
teams assisted each other, gained significant insights, and forged lasting friendships.
</p>
<h2 id="8" style="font-weight: bold;color:#573674">Synbio Plus AI Conference</h2>
<p>
We communicated with other teams about the applications of AI in synthetic biology, with a focus on introducing the algorithmic models and considerations
used in our project. Many teams utilized pre-trained models, and we shared some insights regarding generalization capabilities: emphasizing the alignment
between the data used during pre-training and the data employed in actual project is crucial for achieving better results.
</p>
<p>
In addition, we placed particular emphasis on our team's concern regarding the safety aspects of utilizing AI in new drug development, along with a series
of measures. We shared our insights derived from discussions with multiple companies. We believe that the current limitations of AI encompass: dataset quality,
interpretability, and security. Similar to the perspective of a member of SYSU-Software, we concur that sometimes data holds more significance than the algorithms
themselves. When applying AI technology to antibody design, limitations in data quality and quantity might constrain the potential risks associated with the designed
antibodies. Moreover, comprehending how AI models predict and optimize antibody sequences and characteristics is crucial for ensuring their reliability and safety.
However, prevailing deep learning models often possess intricate structures and parameters, making it difficult to elucidate the rationales behind their decisions,
which raises doubts about their reliability and trustworthiness. Hence, our team is also devoted to developing more interpretable models and algorithms, aiming to
provide explanations for the decision-making processes and outcomes of AI models in antibody design.
</p>
<p>
During the conference, we also delved into the ethical challenges AI faces, as well as the relevant legal regulations and academic standards. This prompted us to
engage in further reading about the legal regulations and academic standards related to AI after the discussions concluded. This, in turn, facilitated the refinement of our project.
</p>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;width:55%;height: 300px;" class="swiper img-galary AISwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-1.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-2.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-3.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-4.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-5.jpeg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper AISwiper section-container" style="width:55%;height: 70px;">
<div class="swiper-wrapper">
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-1.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-2.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-3.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-4.png" />
</div>
<div class="swiper-slide img-galary">
<img src="https://static.igem.wiki/teams/4771/wiki/hp/ai-5.jpeg" />
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -568,6 +675,28 @@
opacity: 1;
}
.AISwiper2 {
height: 400px;
width: 80%;
}
.AISwiper {
height: 200px;
box-sizing: border-box;
padding: 10px 0;
background-color: #000;
}
.AISwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.AISwiper .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-slide img {
display: block;
width: 100%;
......@@ -670,6 +799,30 @@
},
});
var swiper = new Swiper(".AISwiper", {
loop: true,
spaceBetween: 10,
slidesPerView: 6,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".AISwiper2", {
loop: true,
spaceBetween: 10,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
</script>
{% endblock %}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment