Форум

alexvtokar · #1 (**permalink**) 17.05.2019, 15:54

Здравствуйте!
Готов оплатить работу на киви-кошелёк!

Условия задачи:
Имеется множество svg-файлов (пример), с интерактивными элементами внутри. В них лезть, и что-то менять нельзя! Эти файлы необходимо выводить в html при помощи <object></object>.

Что требуется:
Вывести карусель из svg-картинок. У карусели должны быть элементы управления: стрелки вправо-влево, и кнопки вызова каждого слайда (не знаю, как назвать, типа точечки, показывающие, какой слайд сейчас активен). Элементы управления нельзя привязывать к родительскому элементу карусели (то есть, должна быть возможность элементы управления воткнуть в любом месте страницы). Карусель не должна быть avtoplay, она двигается только при нажатии элементов управления.

В чём моя проблема:
Под эти цели подходит обычная Bootstrap-3 carousel, однако, при её использовании перестают работать интерактивные элементы внутри svg-картинок. Я подозреваю, это потому, что слайды вызываются при помощи jQuery. Думаю, что если написать что-то подобное на чистом js, проблема исчезнет. Однако, с js у меня пока что натянутые отношения.

Спасибо за любую помощь, повторюсь, готовое решение с радостью оплачу (только на киви кошель).

Dilettante_Pro · #2 (**permalink**) 17.05.2019, 16:37

На сайте полно каруселей.
Пример на базе одной из каруселей от рони
Ничего не менял, кроме контента

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
  position: relative;
  }

  .slider__container{
  white-space: nowrap;
  overflow: hidden;
  max-width: 790px;
  margin: 0 auto;
  border: 1px solid #0000FF;
  }

  .slider__scroll{
  position: relative;
  left: 0;
  transform: translateX(0);
  transition: all 0.4s ease-in-out;
  display: inline-block;
  white-space: nowrap;
  }
  .slider__item{
  display: inline-block;
  margin: 0 30px;
  width: 600px;
  height: 200px;
 
  }


 .slider__dots-item{
  width: 13px;
  height: 13px;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  transition: all 0.4s;
}

.slider__dots-item.slider__dots-item_active{
  background: black;
  transition: all 0.4s;
}

.slider__dots-item:last-child{
  margin-right: 0;
}

.slider__dots-item:hover{
  background: black;
}

  </style>
</head>
<body>
 <div class="slider">
       <div class="slider__btn slider__btn_left">left</div>
       <div class="slider__btn slider__btn_right">right</div>

        <div class="slider__container">
          <div class="slider__scroll">
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
          </div>
       </div>

     <div class="slider__dots">
     <span class="slider__dots-item slider__dots-item_active"></span>
     <span class="slider__dots-item"></span>
     <span class="slider__dots-item"></span>
    </div>

</div>


  <script>
  var sliderBtnLeft=document.querySelector('.slider__btn_left');
  var sliderBtnRight=document.querySelector('.slider__btn_right');
  var sliderDots = document.querySelectorAll('.slider__dots-item'); //кружочки
  var sliderItems=document.querySelectorAll('.slider__item');
  var sliderIndex=0;
  var sliderScroll=document.querySelector('.slider__scroll');
  var Width=0;
  function sliderMove(up)
  {
  sliderDots[sliderIndex].classList.remove('slider__dots-item_active');
  sliderIndex=(sliderIndex + up + sliderItems.length)% sliderItems.length;
  sliderDots[sliderIndex].classList.add('slider__dots-item_active');
  Width=0;
  for(var i=0;i < sliderIndex;i++)
  {
  Width +=sliderItems[i].offsetWidth + 60
  }
  sliderScroll.style.transform='translateX(-' + Width + 'px)';
  }
  function dotMove(i)
  {
     sliderMove(i - sliderIndex);
  }
  [...sliderDots].forEach((dot, i) => dot.addEventListener('click', dotMove.bind(dot, i)));
  sliderBtnRight.onclick=sliderMove.bind(null,1);
  sliderBtnLeft.onclick=sliderMove.bind(null,-1);
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript