0

Как сделать , что-то в таком духе , может есть какие решение готовые? введите сюда описание изображения

2
  • 1
    я немного не понял структуру, ссылка должна быть в слайдере или при выделеной ссылке отображался конкретный слайдер? 7 апр 2018 в 18:57
  • при выделенной ссылке отображался конкретный слайдер, хотелось бы без костылей 7 апр 2018 в 19:03

2 ответа 2

2

Зачем городить кучу кода, если есть циклы.

const carusel = document.getElementsByClassName('carusel');
const a = document.getElementsByTagName('a');

for (let i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    for (let i = 0; i < a.length; i++) {
      carusel[i].style.opacity = '0';
    }
    carusel[i].style.opacity = '1';
  })
}
ul {
  list-style: none;
  width: 100%;
  height: 30px;
}

ul li {
  float: left;
  width: 33%;
  height: 100%;
}

ul li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #444;
  transition: background .2s;
}

ul li a:hover {
  background: #aaa;
}

.caruselWrap {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

.carusel {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: #333;
  color: #fff;
  transition: opacity .2s;
}
<ul class="links">
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
  <li><a href="#">link3</a></li>
</ul>
<div class="caruselWrap">
  <div class="carusel">Slider1</div>
  <div class="carusel">Slider2</div>
  <div class="carusel">Slider3</div>
</div>

1
  • А мне твой ответ больше понравился 9 апр 2018 в 7:21
1

var slider1 = document.getElementsByClassName('slider1')[0];
var slider2 = document.getElementsByClassName('slider2')[0];
var slider3 = document.getElementsByClassName('slider3')[0];

function slider(count) {
  if (count == 1) {
    slider1.style.display = "block";
    slider2.style.display = "none";
    slider3.style.display = "none";
  } else if (count == 2) {
    slider1.style.display = "none";
    slider2.style.display = "block";
    slider3.style.display = "none";
  } else if (count == 3) {
    slider1.style.display = "none";
    slider2.style.display = "none";
    slider3.style.display = "block";
  }
}
ul {
  list-style: none;
  width: 100%;
  height: 30px;
}
ul li {
  float: left;
  width: 33%;
  height: 100%;
}
ul li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #444;
  transition: .2s;
}
ul li a:hover {
  background: #aaa;
}
.carusel {
  display: none;
  width: 100%;
  height: 200px;
  background: #333;
  color: #fff;
}
<ul class="links">
  <li><a href="#" onclick="slider(1);">link1</a></li>
  <li><a href="#" onclick="slider(2);">link2</a></li>
  <li><a href="#" onclick="slider(3);">link3</a></li>
</ul>

<div class="slider1 carusel">Slider1</div>
<div class="slider2 carusel">Slider2</div>
<div class="slider3 carusel">Slider3</div>

6
  • а на jquery примерно как будет ? 7 апр 2018 в 19:45
  • $('.slider1').css('display', 'none'); 7 апр 2018 в 19:46
  • или что именно на jquery? 7 апр 2018 в 19:47
  • то как вы реализовали на js сейчас слайдер , на jquery будет таким же громоздким ? 7 апр 2018 в 19:57
  • да, ещё компактнее сделать будет сложно 7 апр 2018 в 19:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.