Why does my code center in mobile view but not in Desktop? How can I solve this issue?
I have tried using
display: block; margin: auto; width:100%;text-align: center;, but it did not work.
let $slides, interval, $selectors, $btns, currentIndex, nextIndex;
let cycle = index => {
let $currentSlide, $nextSlide, $currentSelector, $nextSelector;
nextIndex = index !== undefined ? index : nextIndex;
$currentSlide = $($slides.get(currentIndex));
$currentSelector = $($selectors.get(currentIndex));
$nextSlide = $($slides.get(nextIndex));
$nextSelector = $($selectors.get(nextIndex));
$currentSlide.removeClass("active").css("z-index", "0");
$nextSlide.addClass("active").css("z-index", "1");
$currentSelector.removeClass("current");
$nextSelector.addClass("current");
currentIndex = index !== undefined ?
nextIndex :
currentIndex < $slides.length - 1 ?
currentIndex + 1 :
0;
nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};
$(() => {
currentIndex = 0;
nextIndex = 1;
$slides = $(".slide");
$selectors = $(".selector");
$btns = $(".btn");
$slides.first().addClass("active");
$selectors.first().addClass("current");
interval = window.setInterval(cycle, 6000);
$selectors.on("click", e => {
let target = $selectors.index(e.target);
if (target !== currentIndex) {
window.clearInterval(interval);
cycle(target);
interval = window.setInterval(cycle, 6000);
}
});
$btns.on("click", e => {
window.clearInterval(interval);
if ($(e.target).hasClass("prev")) {
let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
cycle(target);
} else if ($(e.target).hasClass("next")) {
cycle();
}
interval = window.setInterval(cycle, 6000);
});
});#container {
position: absolute;
width: 300px;
height: 300px;
overflow: hidden;
background: red;
text-align: center;
display: inline-block;
margin: auto;
margin-left: -40%;
}
#slides .slide .slide-partial {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-partial img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-left {
top: 0;
left: 0;
transform: translateX(-100%);
display: block;
margin: auto;
}
#slides .slide .slide-left img {
top: 0;
right: 0;
-o-object-position: 100% 50%;
object-position: 100% 50%;
transform: translateX(50%);
display: block;
margin: auto;
}
#slides .slide.active .slide-partial,
#slides .slide.active .slide-partial img {
transform: translateX(0);
display: block;
margin: auto;
}
#slide-select {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
font-family: "Reem Kufi", sans-serif;
font-size: 1.5em;
font-weight: lighter;
color: white;
}
#slide-select li {
position: relative;
cursor: pointer;
margin: 0 5px;
}
#slide-select li.prev:hover {
transform: translateX(-2px);
}
#slide-select li.next:hover {
transform: translateX(2px);
}
#slide-select .selector {
height: 14px;
width: 14px;
border: 2px solid white;
background-color: transparent;
transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
background-color: white;
}<div id="mode">
<div id="container">
<ul id="slides">
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
</ul>
<ul id="slide-select">
<li class="btn prev">
<</li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="btn next">></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>The current output is:
An image slide with partial left floating.
What I have attempted:
display: inline-block;
margin: auto;
width: 100%;
text-align: center;
/* result: no use /*
Desired Output:
A properly centered image slide.
If possible, please provide an explanation along with the solution.