jquery - Bootstrap を使用した垂直カルーセル

Question

Bootstrap のカルーセルを使用して Web サイトを実装しています。別の Web サイトにネストしたいのですが、選択すると「アクティブ」の値が失われ、表示されなくなります。彼らは私を助けることができますか？作ろうとしているコードを載せます

<div class="carousel-inner">
<!--<class="carousel-inner centered_div resized_div" >-->
<div class="item ">
    <img src="tree.png" alt="">
    <div class="carousel-caption hidden-desktop">
        <h4>HOME</h4>
    </div>
</div>
<div class="item active ">
    <div class="row">
        <div id="myCarousel1" class="carousel-vertical slide vertical">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                    <img src="http://placehold.it/600x400&text=First+Slide"/>
                </div>
                <div class="item">
                    <img src="http://placehold.it/600x400&text=Second+Slide">
                </div>
                <div class="item">
                    <img src="http://placehold.it/600x400&text=Third+Slide">
                </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left verticall" style="padding-left:30px;" href="#myCarousel1" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right verticall" style="padding-right:30px;" href="#myCarousel1" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="carousel-caption hidden-desktop">
        <h4>LISTS</h4>
    </div>
</div>