2分割カルーセル

 

<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">&nbsp;</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
			}
		}
	});
});

TOP