<section>
<div class="container">
<div class="row justify-content-center m-0">
<div class="col-9 p-0">
<div class="form_wrapper position-relative">
<!--left tab genrate-->
<div class="get_thumbnail">
<ul class="new_steps pichtProlist">
<li class="thumbnail disabled step_0 personalInfo move" data-index="0">Slide 1</li>
</ul>
</div>
<!--end left tab genrate-->
<div class="form_box">
<ul class="sliders">
<!--tab 1 start here-->
<li class="slide active">
<h1>slide 1</h1>
</li>
<li class="slide">
<h1>slide 2</h1>
</li>
<li class="slide">
<h1>slide 3</h1>
</li>
<li class="slide">
<h1>slide 4</h1>
</li>
</ul>
</div>
<div class="sideBarElement">
<ul class="steps pichtProlist">
<li class="thumbnail step_1" data-index="1">Slide 2</li>
<li class="thumbnail step_2" data-index="2">Slide 3</li>
<li class="thumbnail step_3" data-index="3">Slide 4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.form_box {
overflow: hidden;
box-shadow: 1px 1px 65px 0 rgba(0, 0, 0, 0.16);
}
.sliders {
display: flex;
position: relative;
}
.slide {
height: 400px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.pichtProlist {
position: absolute;
width: 567px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
right: auto;
top: 220px;
}
.new_steps {
position: absolute;
left: -170px;
transform: rotate(-90deg);
right: auto;
width: 302px;
top: 98px;
text-align: center;
z-index: 1;
}
.pichtProlist li {
background-color: #034ea2;
font-size: 20px;
line-height: 32px;
color: #ffffff;
letter-spacing: 0.66px;
box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.2);
display: block;
padding: 8px 20px;
margin-top: -1px;
text-align: center;
transform: rotate(-180deg);
margin: 0 auto;
}
.steps li:not(:first-child) {
pointer-events: none;
opacity: 0.7;
}
.steps li:not(:first-child) {
border-top: 0;
}
.disabled {
pointer-events: none;
opacity: 0.7;
}
.thumbnail {
position: relative;
cursor: pointer;
}
.step_2 {
width: 90%;
}
.step_3 {
width: 80%;
}
var offset = $('.form_box').offset(),
setps = $('.steps'),
new_steps = $('.new_steps'),
form_wrapper = $('.form_wrapper'),
form_box_width = $('.form_box').width(),
// container width
container = $('.form_wrapper').width(),
// slide parent
slideWrapper = $('.sliders'),
// slides
slide = $('.slide'),
//thumbnail lists
thumbnailList = $('.thumbnail'),
count = 0;
//end of variables
slideWrapper.width(container * slide.length);
slide.width(container);
setoffset = () => {
$('.steps, .new_steps').width(slide.height());
$('.steps').offset({ left: (offset.left + form_box_width), top: offset.top });
$('.new_steps').offset({ left: offset.left - (thumbnailList.outerHeight() * $('.new_steps li').length), top: offset.top });
};
setoffset();
// thumbnailList click
thumbnailList.click(function (e) {
count++;
currentTarget = $(e.target);
currentIndex = currentTarget.attr('data-index');
currentTarget.toggleClass('move');
if (currentTarget.hasClass('move')) {
if (count != slide.length + 1)
currentTarget.animate({ top: - form_wrapper.width() - currentTarget.outerHeight() * count }, 1000).addClass('disabled');
slideWrapper.animate({ left: '-=' + container + 'px' }, 1000).find('.slide.active').removeClass('active').next().addClass('active');
setTimeout(() => {
currentTarget.animate({ top: 0 }, 0).prependTo('.get_thumbnail .new_steps');
currentTarget.next().removeClass('disabled');
setoffset();
}, 1000);
} else {
// console.log(currentIndex * container);
slideWrapper.animate({ left: - currentIndex * container }, 1000);
$('.steps').stop().css('margin-left', '0');
// currentTarget.animate({ top: form_wrapper.width() + (currentTarget.outerHeight() * count) }, 1000);
currentTarget.prevAll().animate({ top: form_wrapper.width() + (currentTarget.outerHeight() * count) }, 1000);
setTimeout(() => {
currentTarget.prevAll().not('personalInfo').animate({ top: 0 }, 0).prependTo('.steps').removeClass('disabled move');
// currentTarget.animate({ top: 0 }, 0).prependTo('.steps').removeClass('disabled move');
currentTarget.addClass('disabled move');
setoffset();
count = currentIndex;
}, 1000);
}
});