php simplyscrollの実装スライダー

Posted 2021-05-04

.box_slide {
		width: 100% !important;
		overflow: hidden;
		.simply-scroll {
			width: 100%;
			max-width: 1920px;
			height: auto;
			margin: auto;
			margin-bottom: 0;
			.simply-scroll-clip {
				width: 100%;
				max-width: 1920px;
				height: auto;
			}
			ul{

				&.simply-scroll-list {
					@include mq(sp) {
						overflow: hidden;
						margin: 0;
						padding: 0;
						list-style: none;
					}
					.item {
						width: 420px;
						height: auto;
						@include mq(sp) {
							width: 300px;
							height: auto;
						}
					}
				}
			}
		}
	}

<script>
// readyEvent
$(function(){
	$("#gallery_ingredient ul").simplyScroll({
		frameRate: 24,
		speed: 1,
		auto: true,
		autoMode: 'loop',
		pauseOnHover: true,
		pauseOnTouch: true,
		pauseButton: false,

	});
	clone_elm('ingredient','after','col col_thumb view_pc','img_thumb view_tab-sp');
});
</script>

<link href="../css/jquery.simplyscroll.css" rel="stylesheet" type="text/css" media="all">
<script src="../js/jquery.simplyscroll.min.js"></script>

<div class="box_slide" id="gallery_ingredient">
	<ul>
		<li class="item">
			<img src="images/img_slide1-1.jpg" alt="メニュー" class="img_thumb">
		</li>
		<li class="item">
			<img src="images/img_slide1-2.jpg" alt="メニュー" class="img_thumb">
		</li>
		<li class="item">
			<img src="images/img_slide1-3.jpg" alt="メニュー" class="img_thumb">
		</li>
		<li class="item">
			<img src="images/img_slide1-4.jpg" alt="メニュー" class="img_thumb">
		</li>
		<li class="item">
			<img src="images/img_slide1-5.jpg" alt="メニュー" class="img_thumb">
		</li>
	</ul>
</div>