Use MultiItem Bootstrap Carousel SlideShow beside a Simple SlideShow - html

Question

i'm creating a website and must show product in sliders.i use a simple Carousel slide show and a multi Item Slide Show in one page.multi Item Slide Show had a css class.
when i add this class refrence to page simple Carousel slide show Disrupts and multi Item Slide Show not work correctly.
when i delete multi Item Slide Show css refrence simple Carousel slide work correctly.
i used multi Item Slide Show which doesnt need to css file and work perefect,but this multi Item Slide Show doesnt support responsive principles and i don't want to use this kind of multi Item Slide Show.
i gusse my pure bootstratp css Carousel code conflicts with multi Item Slide Show css file, How can i solve this problem.
UPDATE
I Attach snippe
d code below:
this is my head tag in _SharedView Page
<link href="~/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="~/bootstrap-4.3.1-dist/js/bootstrap.js"></script>
and my simple Carousel Slide Show in index.cshtml View:
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a> </div>
and multi Item Slide Show in index.cshtml View:
<div class="container">
<div class="carousel-wrapper">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner w-100 row no-gutters" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/888/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/DD2222?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/22DD22?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/FFCC11?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/0099FF?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300/4455DD?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="https://placehold.it/600x300?text=8" alt="slide 8">
</div>
</div>
<a class="carousel-control-prev text-dark my-auto" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-dark" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
I also Attach this css code to my project:
#media (min-width: 768px) {
.carousel-wrapper {
overflow-x:hidden;
}
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
and this java script:
$('.carousel').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var $t = $(this);
var $inner = $t.find('.carousel-inner');
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $t.find('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$t.find('.carousel-item').eq(i).appendTo($inner);
}
else {
$t.find('.carousel-item').eq(0).appendTo($inner);
}
}
}
});
but my simple Carousel distrupt and my multiItem Carousel not show any thing and not work

Answer 1

Try using owl carousel for your 'multi Item slide'.
If not share some code snippets so I can help.