<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="Path/to/jquery.carouFredSel-6.2.1.js"></script>
<div id="carouselBox">
<ul id="topCarousel">
<li><img src="Path/to/img00.png" alt=""></li>
<li><img src="Path/to/img01.png" alt=""></li>
<li><img src="Path/to/img02.png" alt=""></li>
<li><img src="Path/to/img03.png" alt=""></li>
<li><img src="Path/to/img04.png" alt=""></li>
</ul>
<div class="topTitlebase"> </div>
</div>
#carouselBox {
background-color:#fff;
height:350px;
padding:5px 5px 0;
position:relative;
overflow:hidden;
}
#carouselBox ul li {
display: block;
float: left;
}
#carouselBox ul li img {
width:100%;
}
#carouselBox .topTitlebase { /* 左サイドの白半諧調無くていいなら不要 */
background-color: rgba(255,255,255,.8);
position:absolute;
left:0;
bottom:0;
height:355px;
width:50%;
z-index:10;
}
@media screen and (max-width: 767.9px) {
#carouselBox {
height: 150px;
}
}
$(function() {
$('#topCarousel').carouFredSel({
responsive: true,
width: '100%',
scroll: 1,
auto: 1500, //スライドする速度
pauseOnHover: true,
direction: "left",
items: {
width: 300,
height: '100%',
visible: {
min: 2,
max: 2
}
}
});
});