Есть слайд со скрытыми блоками на больших размерах экранов(на маленьких будут отображаться), как можно пропускать пустой слайд на больших экранах?
.carousel-inner {
background: url(../img/bgsl.png);
background-size: cover;
background-repeat: no-repeat;
}
.hidden {
display: none!important;
}
.nav-item {
margin-left: 3vh;
margin-right: 3vh;
}
.slideritem {
font-family: 'Century Gothic';
width: 18%;
margin: 1vh!important;
display: inline-block;
margin: 0;
padding: 0;
font-weight: 800;
border-width: 1px!important;
border-color: black;
border-style: solid;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid main">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-center">
<p><span class="txttop">Мы предоставляем Вам сервис,<br>
а не просто продаем по вкусным ценам!</span></p>
<p><span class="mainhtext">Примеры цен на металочерепицу от 50м<sup>2</sup>:</span></p>
<a href=""><img src="img/arrowbottom.png" class="img-fluid imgarr"></a>
</div>
</div>
</div>
<div class="container">
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators" style="bottom: -50px;">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active" style="background:#fa7268;height: 5px;width: 25px;"></li>
<li data-target="#carousel-example-1z" data-slide-to="1" style="background:#fa7268;height: 5px;width: 25px;"></li>
<li data-target="#carousel-example-1z" data-slide-to="2" style="background:#fa7268;height: 5px;width: 25px;"></li>
<li data-target="#carousel-example-1z" data-slide-to="3" style="background:#fa7268;height: 5px;width: 25px;"></li>
<li data-target="#carousel-example-1z" class="hidden" data-slide-to="3" style="background:#fa7268;height: 5px;width: 25px;"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox" style="margin-top: 2vh;">
<!--First slide-->
<div class="carousel-item active text-center">
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/sl1.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem" style="">
<p>Дешево и сердито</p>
<img src="img/sl2.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem hiddobj">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
</div>
<div class="carousel-item text-center">
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem" style="">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem hiddobj">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item text-center">
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem hiddobj">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item text-center">
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem hiddobj">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
</div>
<div class="carousel-item text-center hidden">
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
<div class="slideritem">
<p>Дешево и сердито</p>
<img src="img/example.jpg" class="img-fluid" style="min-height: 140px!important;">
<p>280 м<sup>2</sup></p>
<p class="smlet">Китай Г 0,4мм</p>
<p class="smlet">Китай Г 0,4мм</p>
<a class="btnprod" type="button" data-toggle="modal" data-target="#myModal">ЗАКАЗАТЬ</a>
</div>
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><img class="img-fluid arrleft" src="img/arrowbottom.jpg"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"><img class="img-fluid" src="img/arrowbottom.jpg"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div>
<div class="container text-center">
<button class="btn_top">Хочу все цены</button>
</div>
</div>
</div>
</div>