У меня есть интересный случай, когда у меня есть две карусели на одной странице и одна карусель для управления другой.
Если я нажимаю на миниатюру, она переходит к соответствующему шагу, и если я нажимаю на следующую в карусели шагов она перемещает карусель миниатюр.
Я пытаюсь заставить карусель миниатюр иметь активное состояние для правильного активного шага, однако мне не везет.
Любой Идея о том, как я могу выполнить sh это?
$(function () {
// Initialize Page Ready
console.log('Self Installation - Ready!');
$('#CarouselGuide .carousel-inner').html(
'<div class="item active" data-step-number="1" data-step-instructions="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' +
'Ipsum suspendisse ultrices gravida dictum fusce ut placerat.Sed elementum tempus egestas sed sed risus pretium quam.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+01" alt = "STEP 01" />' +
'</div>' +
'<div class="item" data-step-number="2" data-step-instructions="Proin libero nunc consequat interdum varius. Eu augue ut lectus arcu bibendum at varius vel. Tincidunt dui ut ornare lectus sit. In hac habitasse platea dictumst vestibulum rhoncus est.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+02" alt = "STEP 02" />' +
'</div>' +
'<div class="item" data-step-number="3" data-step-instructions="Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis enim ut tellus elementum sagittis vitae et leo duis. Dui faucibus' +
'in ornare quam viverra orci.Cursus mattis molestie a iaculis at erat pellentesque.Feugiat scelerisque varius morbi enim nunc faucibus.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+03" alt = "STEP 03" />' +
'</div>' +
'<div class="item" data-step-number="4" data-step-instructions="Gravida cum sociis natoque penatibus et magnis dis parturient. Vel quam elementum pulvinar etiam non. Etiam non quam lacus suspendisse' +
'faucibus interdum posuere lorem.Vel risus commodo viverra maecenas accumsan.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+04" alt = "STEP 04" />' +
'</div>' +
'<div class="item" data-step-number="5" data-step-instructions="Gravida cum sociis natoque penatibus et magnis dis parturient. Vel quam elementum pulvinar etiam non. Etiam non quam lacus suspendisse' +
'faucibus interdum posuere lorem.Vel risus commodo viverra maecenas accumsan.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+05" alt = "STEP 05" />' +
'</div>' +
'<div class="item" data-step-number="6" data-step-instructions="Gravida cum sociis natoque penatibus et magnis dis parturient. Vel quam elementum pulvinar etiam non. Etiam non quam lacus suspendisse' +
'faucibus interdum posuere lorem.Vel risus commodo viverra maecenas accumsan.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+06" alt = "STEP 06" />' +
'</div>' +
'<div class="item" data-step-number="7" data-step-instructions="Gravida cum sociis natoque penatibus et magnis dis parturient. Vel quam elementum pulvinar etiam non. Etiam non quam lacus suspendisse' +
'faucibus interdum posuere lorem.Vel risus commodo viverra maecenas accumsan.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+07" alt = "STEP 07" />'+
'</div>' +
'<div class="item" data-step-number="8" data-step-instructions="Gravida cum sociis natoque penatibus et magnis dis parturient. Vel quam elementum pulvinar etiam non. Etiam non quam lacus suspendisse' +
'faucibus interdum posuere lorem.Vel risus commodo viverra maecenas accumsan.">' +
'<img src= "http://placehold.it/800x800/c4c4c4/f4f4f4?text=STEP+08" alt = "STEP 08" />' +
'</div>'
)
$('#CarouselGuideThumbnails .carousel-inner').html(
'<div class="item active" data-step-number="1"> <div class="col-xs-3"> <a class="thumbnail active" data-target="#CarouselGuide" data-slide-to="0"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+01" alt = "STEP 01" /> </a> </div></div>' +
'<div class="item" data-step-number="2"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="1"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+02" alt = "STEP 02" /> </a> </div></div>' +
'<div class="item" data-step-number="3"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="2"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+03" alt = "STEP 03" /> </a> </div></div>' +
'<div class="item" data-step-number="4"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="3"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+04" alt = "STEP 04" /> </a> </div></div>' +
'<div class="item" data-step-number="5"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="4"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+05" alt = "STEP 05" /> </a> </div></div>' +
'<div class="item" data-step-number="6"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="5"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+06" alt = "STEP 06" /> </a> </div></div>' +
'<div class="item" data-step-number="7"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="6"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+07" alt = "STEP 07" /> </a> </div></div>' +
'<div class="item" data-step-number="8"> <div class="col-xs-3"> <a class="thumbnail" data-target="#CarouselGuide" data-slide-to="7"> <img src= "http://placehold.it/80x80/c4c4c4/f4f4f4?text=STEP+08" alt = "STEP 08" /> </a> </div></div>'
)
$('#CarouselGuide-Instructions>h6>strong> span.step-number').text($('#CarouselGuide .active').data('step-number'));
$('#CarouselGuide-Instructions>p').text($('#CarouselGuide .active').data('step-instructions'));
$('#CarouselGuideThumbnails-Counter>h6>strong> span.step-number').text($('#CarouselGuideThumbnails .active').data('step-number'));
$('#CarouselGuide, #CaourselGuideThumbnails').carousel({
interval: 0
})
$('.carousel[data-type="multi"] .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$('#CarouselGuide').on('slid.bs.carousel', function () {
activeStep = $(this).find('.active');
$('#CarouselGuide-Instructions>h6>strong> span.step-number').text(activeStep.data('step-number'));
$('#CarouselGuide-Instructions> p.step-instructions').text(activeStep.data('step-instructions'));
$('#CarouselGuideThumbnails-Counter>h6>strong> span.step-number').text(activeStep.data('step-number'));
$('#CarouselGuide, #CarouselGuideThumbnails').carousel(activeStep.index());
});
});
section#FTR-SelfInstallation_InstallationGuide {
margin-bottom: $spacer * 4;
background: gray("wild-sand");
border: 1px dashed magenta; // FPO
> .container {
@extend %container-default-properties;
}
.frontier-section {
padding: ($spacer * 4) 0 $spacer;
border: 1px dashed magenta; // FPO
&__heading {
font: $font-weight-normal $h4-font-size $font-family-nexa-xbold;
text-align: center;
color: gray("abbey");
width: 80%;
margin: 0 auto ($spacer * 2);
}
}
.carousel-text {
margin-bottom: $spacer;
border: 1px dashed magenta; // FPO
> h6, p {
display: inline;
font-size: $font-size-base;
}
> h6 strong {
font-family: $font-family-nexa-xbold;
color: color("punch");
margin-right: 0.5rem;
> span {
font: $font-weight-bold $font-size-base avenir black;
}
}
}
.carousel-inner {
background: gray("wild-sand");
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
font-size: $font-size-base;
color: $white;
text-align: center;
text-shadow: none;
background: transparent;
opacity: 0.5;
border: 1px dashed magenta; // FPO
&:hover,
&:focus {
outline: 0;
color: $white;
opacity: 0.9;
}
}
// Carousel Guide
div#CarouselGuide-Instructions {
height: 150px;
}
div#CarouselGuide {
width: 340px;
height: 340px;
margin-bottom: $spacer * 2;
background: gray("wild-sand");
border: 1px dashed magenta; // FPO
.carousel-inner {
width: 340px;
height: 340px;
}
.carousel-control {
&.left,
&.right {
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
background: color("punch");
border: 1px solid color("punch");
}
&.left {
left: 0;
right: auto;
border-radius: 0 2.5rem 2.5rem 0;
}
&.right {
left: auto;
right: 0;
border-radius: 2.5rem 0 0 2.5rem;
}
.fa-chevron-left,
.fa-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
}
.fa-chevron-left {
left: 50%;
margin-left: -4px;
}
.fa-chevron-right {
right: 50%;
margin-right: -4px;
}
}
}
// Carousel Guide Thumbnails
div#CarouselGuideThumbnails-Counter {
width: 340px;
height: 30px;
}
div#CarouselGuideThumbnails {
width: 340px;
height: 80px;
margin-bottom: $spacer * 2;
background: gray("wild-sand");
border: 1px dashed magenta; // FPO
.carousel-inner {
width: 340px;
height: 80px;
}
.thumbnail {
display: block;
width: 80px;
height: auto;
margin-bottom: 0;
padding: 4px;
background-color: $white;
border: 1px solid gray("silver");
border-radius: 0.4rem;
transition: border 0.2s ease-in-out;
cursor: pointer;
&:hover,
&:focus {
border-color: color("punch");
}
&.active {
border-color: red;
}
}
.carousel-control {
font-size: $font-size-base - 0.4;
&.left,
&.right {
width: 30px;
height: 100%;
background: color("punch");
border: 1px solid color("punch");
}
&.left {
left: 0;
right: auto;
border-radius: 0 0.4rem 0.4rem 0;
}
&.right {
left: auto;
right: 0;
border-radius: 0.4rem 0 0 0.4rem;
}
.fa-chevron-left,
.fa-chevron-right {
position: absolute;
top: 50%;
margin-top: -8px;
z-index: 5;
display: inline-block;
}
.fa-chevron-left {
left: 50%;
margin-left: 2px;
}
.fa-chevron-right {
right: 50%;
margin-right: 2px;
}
}
}
}
<section id="FTR-SelfInstallation_InstallationGuide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<article class="frontier-section">
<h2 class="frontier-section__heading">Step-by-Step Installation Guide</h2>
</article>
</div>
</div>
<!-- Installation Guide: Carousel Guide -->
<div class="row">
<div class="col-xs-12">
<!-- Carousel Guide: Instructions -->
<div class="carousel-text" id="CarouselGuide-Instructions">
<h6><strong>Step <span class="step-number"></span></strong></h6>
<p class="step-instructions"></p>
</div>
<!--/ Carousel Guide: Instructions -->
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="carousel slide" id="CarouselGuide" data-role="carousel">
<!-- Carousel Guide: Image Wrapper -->
<div class="row">
<div class="col-xs-12">
<div class="carousel-inner" role="listbox">
<p>Loading <i class="fa fa-spinner fa-spin"></i></p>
</div>
<!-- Carousel Control -->
<a class="carousel-control left" href="#CarouselGuide" role="button" data-slide="prev">
<span class="fa fa-chevron-left"></span>
</a>
<a class="carousel-control right" href="#CarouselGuide" role="button" data-slide="next">
<span class="fa fa-chevron-right"></span>
</a>
<!--/ Carousel Control -->
</div>
</div>
<!--/ Carousel Guide: Image Wrapper -->
</div>
</div>
</div>
<!--/ Installation Guide: Carousel Guide -->
<!-- Installation Guide: Carousel Guide Thumbnails -->
<div class="row">
<div class="col-xs-12">
<!-- Carousel Guide Thumbnails: Counter -->
<div class="carousel-text" id="CarouselGuideThumbnails-Counter">
<h6><strong>Step <span class="step-number"></span>/<span>26</span></strong></h6>
</div>
<!--/ Carousel Guide Thumbnails: Counter -->
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="carousel slide" id="CarouselGuideThumbnails" data-type="multi" role="carousel" data-interval="0">
<!-- Carousel Guide Thumbnails: Image Wrapper -->
<div class="row">
<div class="col-xs-12">
<div class="carousel-inner" role="listbox">
<p>Loading <i class="fa fa-spinner fa-spin"></i></p>
</div>
<!-- Carousel Controls -->
<a class="carousel-control left" href="#CarouselGuideThumbnails" role="button" data-slide="prev">
<span class="fa fa-chevron-left"></span>
</a>
<a class="carousel-control right" href="#CarouselGuideThumbnails" role="button" data-slide="next">
<span class="fa fa-chevron-right"></span>
</a>
<!--/ Carousel Controls -->
</div>
</div>
<!--/ Carousel Guide Thumbnails: Image Wrapper -->
</div>
</div>
</div>
<!--/ Installation Guide: Carousel Guide Thumbnails -->
</div>
</section>