How to change the width of horizontal scrollbar track? - html

Question

I am trying to make an image slider with a scrollbar in the bottom. The images should be shown in fullscreen with the the active image in the center and an image in the left side and right side of the active image as shown in the image.
The scrollbar should not be sticking to the slider. I tried to implement it in the following way. But couldn't fix it.
Updated with the help from #kip .
I need to remove a class for the active image that will be shown in the center and add a class to all other images. 'class name : img-slider-other'
<style>
.slider {
width: 100%;
text-align: center;
overflow: hidden;
display: flex;
justify-content: center;
}
.slides {
display: flex;
overflow-x: scroll;
margin-bottom: 50px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 20px;
}
.slides::-webkit-scrollbar-thumb {
background-color: #737373;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
border: 1px solid #ccc;
max-width: 60% !important;
margin-left: 30.75rem;
margin-right: 30.75rem;
}
.slides::-webkit-scrollbar-track-piece {
max-width: 200px;
background-color: #fff;
height: 200px;
border: 1px solid #ccc;
/* border-radius: 10px; */
}
/* .slides::-webkit-scrollbar-corner {
border-radius: 10px;
} */
.slides>div {
scroll-snap-align: center;
flex-shrink: 0;
/* width: 100%;
max-width: 100%; */
width: 60%;
max-width: 60%;
/* height: auto; */
height: 500px;
/* For Temp */
margin-right: 50px;
margin-bottom: 50px;
border-radius: 10px;
/* background: #eee; */
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
img {
/* object-fit: cover; */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.img-slider-other {
height: 80%;
top: auto;
opacity: 0.5;
}
</style>
<div class="slider">
<div class="slides" id="slides">
<div id="slide-1">
<img src="c1.png" />
</div>
<div id="slide-2">
<img src="c2.png" />
</div>
<div id="slide-3">
<img src="c3.png" />
</div>
<div id="slide-4">
<img src="c4.png" />
</div>
<div id="slide-5">
<img src="c5.png" />
</div>
</div>
</div>
<script>
$(document).ready(function() {
var IDs = [];
var selctedImg = 'slide-3';
$(".slides").find("div").each(function() {
IDs.push(this.id);
});
document.getElementById(selctedImg).scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest",
callback: scrollEvent()
}
);
function scrollEvent() {
IDs.forEach(element => {
console.log("el", element)
if (selctedImg !== element) {
$('#' + element).children('img').addClass('img-slider-other');
}
});
}
});
</script>

Answer 1

Something like this?
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
margin-bottom:50px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 20px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
border: 1px solid #ccc;
max-width: 60% !important;
margin-left:25vw;
margin-right:25vw;
}
.slides::-webkit-scrollbar-track-piece {
max-width: 200px;
background-color: #337ab7;
height: 200px;
}
.slides>div {
scroll-snap-align: start;
flex-shrink: 0;
width:70%;
max-width: 70%;
/* height: auto; */
height: 500px;
/* For Temp */
margin-right: 50px;
margin-bottom:50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>