headに書くこと
<script src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
JavaScriptで書くこと
CSSで書くこと
.p-slide {
padding-left: 15px;
padding-right: 15px;
}
.p-slide__inner {
position: relative;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.p-slide-mask {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: 10px 0 14px -14px black inset, -10px 0 14px -14px black inset;
z-index: 1;
}
.p-slide__main {
display: flex;
margin-left: -10px;
padding-bottom: 17px;
}
.p-slide__block {
flex: 0 0 calc(30% - 10px);
margin-left: 10px;
}
.p-slide__img img {
width: 100%;
}
.simplebar-scrollbar::before {
background-color: #debc00;
}
.simplebar-content-wrapper::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
HTMLで書くこと
<div class="p-slide">
<div class="p-slide__inner" >
<div class="p-slide-mask"></div>
<div class="p-slide-scroll" data-simplebar data-simplebar-auto-hide="false">
<div class="p-slide__main">
<a href="#" class="p-slide__block">
<div class="p-slide__img">
<img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar01.jpg" alt="" />
</div>
</a>
<a href="#" class="p-slide__block">
<div class="p-slide__img">
<img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar02.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>