Вход

Просмотр полной версии : Карусель на чистом javascript

alexvtokar
17.05.2019, 15:54
Здравствуйте!
Готов оплатить работу на киви-кошелёк!

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

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

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

Спасибо за любую помощь, повторюсь, готовое решение с радостью оплачу (только на киви кошель).
Dilettante_Pro
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__bt n_right');
var sliderDots = document.querySelectorAll('.slider__dots-item'); //кружочки
var sliderItems=document.querySelectorAll('.slider__it em');
var sliderIndex=0;
var sliderScroll=document.querySelector('.slider__scro ll');
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>