Jumping to swiper slide items when clicking "ul li" list items,

Mustafa Şatıroğlu 0
Viewed 22

I'm having a problem. More precisely, I'm just learning javascript. There is something I cannot do. I'm just summarizing.

There is a list item 7 of them. These are in the ul li structure.

Below are 7 swiper slide elements.

I'm trying to make it go to the swiper slide items below when I click on the top "ul li" structure, but I couldn't.

For example, when I click on the 6th of the " ul li " above, I want it to go to the 6th of the swiper slide below, and I also want it to work the same way when I click on the arrows.

My Code Example is below. Can anyone help?

https://embed.plnkr.co/plunk/OOTXtXkbd33K1Svt

 

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);



 
.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;
    }

     
}
 
<!DOCTYPE HTML>
<html lang="tr">
<head>
    
    
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

 
 
</body>
</html>

swiper.js
1 Answers

You need to add a click eventListener for these anchor links calling the
swiper.slideTo(index, speed, runCallbacks) method as described in the swiper API docs

 //add event listeners navigation
let anchors = document.querySelectorAll('.anchor');
  anchors.forEach(function(anchor, i){
    anchor.addEventListener('click', function(e){
      //go to slide
      swiper2.slideTo(i)
    })
  })

Keep in mind: In JavaScript, indices always start with 0.
So you first slide would be opened via:

swiper2.slideTo(0)


var init = false;

function swiperCard() {
  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
      }
    });

    //add event listeners navigation
    let anchors = document.querySelectorAll(".anchor");
    anchors.forEach(function (anchor, i) {
      anchor.addEventListener("click", function (e) {
        //go to slide
        swiper2.slideTo(i);
      });
    });
  }
}

swiperCard();

window.addEventListener("resize", swiperCard);
.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;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<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>

herrstrietzel0
Related