How can i shift this block to a little upward. I want this carousel to import in my Project which is a multipage. Which is a container
So this code is from my project actual code snippet for the carousel is
https://codepen.io/mohit-04/pen/abWPwPq
i want to reduce the above space. Code when it comes to my project looks like
<!-- Carousel -->
<div class="container my-2">
<div class="main-container">
<div class="row">
<div class="col-md-12">
<div class="margin-check">
<h2 class="text-center my-2">Carousel</h2>
<%- include('./mohit/carousel') %>
</div>
</div>
</div>
</div>
</div>
where as carousel file is
<link rel="stylesheet" href="../css/carousel.css" />
<div class="slide hi-slide">
<div class="hi-prev"></div>
<div class="hi-next"></div>
<ul>
<li>
<div class="card">
<img
src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body space">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card">
<img
src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="140px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1600080972464-8e5f35f63d08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1564466809058-bf4114d55352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br /><br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="150px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
<br />
<br />
<br />
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem">
<img
src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt="Img 1"
height="90px"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p><br /><br /><br /></p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="css/script.js"></script>
<script>
(function ($) {
var slide = function (ele, options) {
var $ele = $(ele);
var setting = {
speed: 1000,
interval: 10000,
};
$.extend(true, setting, options);
var states = [
{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 134,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 0,
$opacity: 0.1,
},
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 110,
$opacity: 1,
},
{ $zIndex: 4, width: 250, height: 300, top: 0, left: 263, $opacity: 1 },
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 470,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 620,
$opacity: 1,
},
{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 500,
$opacity: 1,
},
];
var $lis = $ele.find("li");
var timer = null;
$ele.find(".hi-next").on("click", function () {
next();
});
$ele.find(".hi-prev").on("click", function () {
states.push(states.shift());
move();
});
$ele.on("mouseenter", function () {
clearInterval(timer);
timer = null;
});
// .on("mouseleave", function () {
// autoPlay();
// });
move();
autoPlay();
function move() {
$lis.each(function (index, element) {
var state = states[index];
$(element)
.css("zIndex", state.$zIndex)
.finish()
.animate(state, setting.speed)
.find("img")
.css("opacity", state.$opacity);
});
}
function next() {
states.unshift(states.pop());
move();
}
function autoPlay() {
timer = setInterval(next, setting.interval);
}
};
$.fn.hiSlide = function (options) {
$(this).each(function (index, ele) {
slide(ele, options);
});
return this;
};
})(jQuery);
$(".slide").hiSlide();
</script>
>Solution :
Your div container <div class="slide hi-slide"> has 115 top margin, just reduce this value or use relative margin size(%, viewport, rem).
