Слайдер с табами

Question

Подскажите слайдер с табами, что бы при переключении по стрелкам активный таб менялся, и по клику на таб, активный слайд менялся, можно библиотеку, нашел только как вариант Coda Slider, но он не совсем подходит. Может есть варианты не библитеки?

Answer 1

Ваша задача ввести 1 переменную, которая будет отвечать за активный слайд, и уже манипулируя этой переменной включать нужный слайд и вкладку, вот накидал простой пример:

console.clear();

const slider = () => {
  const slides  = Array.from(document.querySelectorAll('.slider__slide'));
  const nav     = Array.from(document.querySelectorAll('.slider__nav-btn'));
  const tabs    = Array.from(document.querySelectorAll('.slider__tab'));
  
  let activeSlide = 0;

  slides[activeSlide].classList.add('slider__slide_active');
  tabs[activeSlide].classList.add('slider__nav-btn_active');

  nav.forEach(item => {
    item.addEventListener('click', e => {
      slides[activeSlide].classList.remove('slider__slide_active');
      tabs[activeSlide].classList.remove('slider__nav-btn_active');

      if(e.target.classList.contains('slider__nav_prev')){
        if (activeSlide === 0) {
          activeSlide = slides.length - 1
        } else{
          activeSlide--
        }
      } else {
        if (activeSlide === slides.length - 1) {
          activeSlide = 0
        } else{
          activeSlide++
        }
      }
      slides[activeSlide].classList.add('slider__slide_active');
      tabs[activeSlide].classList.add('slider__nav-btn_active');
    })
  });
  
  
  tabs.forEach((item, i) => {
    item.addEventListener('click', () => {
      slides[activeSlide].classList.remove('slider__slide_active');
      tabs[activeSlide].classList.remove('slider__nav-btn_active');

      activeSlide = i;

      slides[activeSlide].classList.add('slider__slide_active');
      tabs[activeSlide].classList.add('slider__nav-btn_active');
    });
  });
}


slider()

body{
  padding: 30px;
  margin: 0;
  font-family: sans-serif;
}

.slider{
  display: block;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  display: flex;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,0,0,.1)
}

.slider__slide{
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background: #999;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 300;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  
  transition: 0.5s ease;
}

.slider__slide_active{
  opacity: 1;
}

.slider__slide:nth-of-type(odd){
  background: #eee;
  color: #222;
}


.slider__nav,
.slider__tabs{
  display: flex;
  padding: 15px 0;
}
.slider__nav{
  border-right: 1px solid #222;
  margin-right: 15px;
  margin-left: 15px;
}

button{
  display: block;
  padding: 5px 15px;
  background: #eee;
  border-radius: 4px;
  border: 1px solid #ccc  ;
  margin-right: 15px;
  outline:none;
  transition: .3s ease ;
}

button:hover{
  filter: brightness(.8)
}


.slider__nav-btn_active{
  background: #444;
  border-color: #000;
  color: #fff;
}



.slider__nav-and-tabs{
  display: flex;
  align-items: center;
  box-shadow: 0 0 30px rgba(0,0,0,.1);
  position: fixed; 
  width: 100%; 
  left: 0; 
  top: 0; 
  z-index: 9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

<div class="slider__nav-and-tabs">
  <nav class="slider__nav">
    <button class="slider__nav-btn slider__nav_prev">←</button>
    <button class="slider__nav-btn slider__nav_next">→</button>
  </nav>
  <div class="slider__tabs">
    <button class="slider__tab">tab 1</button>
    <button class="slider__tab">tab 2</button>
    <button class="slider__tab">tab 3</button>
    <button class="slider__tab">tab 4</button>
    <button class="slider__tab">tab 5</button>
    <button class="slider__tab">tab 6</button>
    <button class="slider__tab">tab 7</button>
  </div>
</div>
<div class="slider">
  <div class="slider__slide">slide 1</div>
  <div class="slider__slide">slide 2</div>
  <div class="slider__slide">slide 3</div>
  <div class="slider__slide">slide 4</div>
  <div class="slider__slide">slide 5</div>
  <div class="slider__slide">slide 6</div>
  <div class="slider__slide">slide 7</div>
</div>

БЛОГ НА HUSL

Слайдер с табами

Ответы (1 шт):