<!DOCTYPE HTML>
<html lang="tr">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<link rel="stylesheet" type="text/css" href="lib/style.css">
</head>
<body>
<header class="header">
<div class="anchor-nav">
<ul class="anchor-list">
<li class="active item">
<a href="#section1" class="anchor">
<h3 class="title">
<em>
<strong> Uzun Süren </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section2" class="anchor">
<h3 class="title">
<em>
<strong> Sultan Melikşah</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section3" class="anchor">
<h3 class="title">
<em>
<strong>Oğlu Mahmud Hayat Felsefesi</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section4" class="anchor">
<h3 class="title">
<em>
<strong>Bunun Üzerine</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section5" class="anchor">
<h3 class="title">
<em>
<strong>Adalet</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section6" class="anchor">
<h3 class="title">
<em>
<strong>Test</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section7" class="anchor">
<h3 class="title">
<em>
<strong>Öneri </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
</ul>
</div>
</header>
<main class="mainContent">
<div class="swiper main-slider wrapper">
<div class="swiper-wrapper">
<section class="swiper-slide section-part" id="slide1">
slide 1
</section>
<section class="swiper-slide section-part" id="slide2">
slide 2
</section>
<section class="swiper-slide section-part" id="slide3">
slide 3
</section>
<section class="swiper-slide section-part" id="slide4">
slide 4
</section>
<section class="swiper-slide section-part" id="slide5">
slide 5
</section>
<section class="swiper-slide section-part" id="slide6">
slide 6
</section>
<section class="swiper-slide section-part" id="slide7">
slide 7
</section>
</div>
<div class="swiper-button-prev d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="previous">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_1561)">
<path d="M20.25 12L3.75 12" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 18.75L3.75 12L10.5 5.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_94_1561">
<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)"/>
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="swiper-button-next d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_2624)">
<path d="M3.75 12H20.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_103_2624">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="lib/script.js"></script>
</body>
</html>
.anchor-nav {
width: 100%;
position: relative;
height: 60px;
padding-left: 10px;
}
.anchor-nav .anchor {
font-size: 16px;
position: relative;
text-align: left;
font-family: var(--bs-site-main-font-bold);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title {
padding-bottom: 10px;
position: relative;
width: 100%;
text-align: left;
position: relative;
}
.anchor-nav ul li.active .anchor {
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title .circle {
width: 28px;
height: 20px;
display: block;
position: absolute;
background: var(--bs-white);
color: #d1d1d1;
bottom: -8px;
}
.anchor-nav .anchor .title .circle:after {
content: "";
position: absolute;
left: 50%;
right: auto;
top: 50%;
width: 8px;
height: 8px;
background: aliceblue;
border-radius: 100%;
transform:
translate(-50%, -50%);
}
.anchor-nav .anchor.active .circle:after {
background: var(--bs-site-red-color);
}
#previous,
#next {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
background: var(--bs-white);
border-radius: var(--bs-site-radius);
transition: var(--bs-site-transition);
flex: 0 0 40px;
max-width: 40px;
}
#previous:hover svg path,
#next:hover svg path {
stroke: var(--bs-white);
}
#previous:hover,
#next:hover {
background: var(--bs-site-red-color);
}
#previous svg path,
#next svg path {
transition: var(--bs-site-transition);
}
.anchor-nav ul::-webkit-scrollbar {
display: none;
}
.anchor-nav ul li {
flex-shrink: 0;
width: 40%;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar {
background: rgb(25 26 25 / 20%);
height: 2.5px;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--bs-site-red-color);
top: 0px;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
height: auto;
margin: 0;
width: auto;
transform: translate(0, -50%);
}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
display: none;
}
.anchor-nav .anchor-list {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.anchor-nav ul li.active .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.queries-block.part-area {
height: calc(100% - 60px);
overflow-y: auto;
padding: 0;
margin: 0;
flex-flow: inherit;
flex-direction: column;
vertical-align: top;
justify-content: start;
}
.main-slider .swiper-wrapper {
display: block;
}
.anchor-nav .anchor.active .title {
border-color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title em {
padding-right: 10px;
width: 100%;
display: block;
position: relative;
}
.anchor-nav .anchor .title em strong {
max-height: 30px;
overflow: hidden;
display: block;
}
.anchor-nav ul li.active .anchor .title .circle:after,
.anchor-nav .swiper-initialized .swiper-slide.active .anchor .title .circle:after {
background: url(../i/play-1.svg) no-repeat !important;
width: 18px;
height: 20px;
}
@media (min-width: 768px) {
.wrapper .section-part:last-child {
min-width: auto;
flex-shrink: 0;
width: 682px;
}
.main-slider .swiper-wrapper {
display: block;
}
.wrapper .section-part {
height: calc(100vh - 134px);
position: relative;
min-width: 100vw;
flex-shrink: 0;
overflow: hidden;
}
.wrapper .section-part>.container,.wrapper .section-part>.container-fluid, .wrapper .section-part>.container>.row,.wrapper .section-part>.container-fluid>.row, .wrapper .section-part>.container>.row>div,.wrapper .section-part>.container-fluid>.row>div {
height: 100%;
}
.p-container {
max-height: 100%;
}
.main-slider .swiper-wrapper {
display: flex;
}
.anchor-nav ul li {
flex-shrink: 1;
width: 100%;
list-style-type: none;
}
.anchor-nav .anchor .title {
text-align: center;
/* border-bottom: 2px solid var(--bs-site-red-color); */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.anchor-nav .anchor .title .circle {
transform: inherit;
left: 50%;
transform: translate(-50%, 0);
}
.anchor-nav .anchor {
font-size: 12px;
}
.anchor-nav {
padding: 0;
}
.part-head {
padding-top: 0;
}
.anchor-nav ul li.active~li .anchor {
color: rgb(25 26 25 / 30%);
}
.anchor-nav ul li.active~li .anchor .title:before {
background: #d1d1d1;
width: 0;
}
.anchor-nav .anchor .title:before {
content: "";
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
transition: all 0.25s ease;
background: var(--bs-site-red-color);
}
.anchor-nav .anchor .title:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 2px;
background: #d1d1d1;
z-index: -1;
}
.anchor-nav ul li:first-child .anchor .title:after {
left: 40%;
}
.anchor-nav ul li:first-child .anchor .title:before {
left: 40%;
width: 60%;
}
.anchor-nav ul li.active .anchor em:before {
content: "";
position: absolute;
left: 45%;
bottom: -5px;
height: 2px;
background: #d1d1d1 !important;
width: 55%;
}
.anchor-nav ul li .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.anchor-nav ul li.active~li .anchor .circle:after {
background: #d1d1d1;
}
.anchor-nav .anchor .title em {
height: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 15px;
}
.anchor-nav .anchor .title .circle {
bottom: 6px;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after,
.anchor-nav ul li.nonelist:last-child .anchor .title:before {
width: 50%;
background: #d1d1d1 !important;
}
.anchor-nav ul li:last-child .anchor .title em:before {
display: none;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.anchor.nonelist .title {
color: #5a5a5a;
}
.nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active .anchor .title:after {
background: #5a5a5a !important;
}
.anchor-nav ul li.nonelist.title .circle:after {
background: #5a5a5a !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active~li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.nonelist .anchor {
color: #757675;
}
.anchor-nav .nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active:last-child .anchor .title:after {
background: #757675 !important;
}
.anchor-nav ul li.nonelist .title .circle:after {
background: #757675 !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active.nonelist .title .circle:after {
background: #757675 !important;
}
.anchor-nav ul li.active~li.nonelist .anchor {
color: rgb(0 0 0 / 43%);
}
.anchor-nav ul li.active~li.nonelist .anchor .title .circle:after {
background: #d1d1d1 !important;
}
}
var init = false;
function swiperCard() {
if (window.innerWidth >= 768) {
if (!init) {
init = true;
swiper2 = new Swiper(".main-slider", {
loop: false,
spaceBetween: 0,
speed:1500,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: {
sensitivity: 1,
releaseOnEdges: true,
},
});
}
} else if (init) {
swiper2.destroy();
init = false;
}
}
swiperCard();
window.addEventListener("resize", swiperCard);