php スライダー（bxSlider）

Posted 2021-05-05

.box_slide {
		float: right;
		width: 51%;
		@include mq(sp) {
			float: none;
			width: 100%;
		}
		&.box_slide_l{
			float: left;
			width: 51%;
			@include mq(sp) {
				float: none;
				width: 100%;
			}
		}
		.slide_course {
			position: relative;
			@include mq(tab) {
				width: 90%;
				margin: 0 auto 20px;
			}
			.slick-prev,
			.slick-next{
				width: 64px;
				padding-top: 64px;
				height: 0;
				overflow: hidden;
				position: absolute;
				top: 50%;
				margin-top: -15px;
				z-index: 10;
				border: none;
				@include mq(sp) {
					width: 32px;
					padding-top: 32px;
				}
				&:hover {
					cursor: pointer;
				}
				&.slick-disabled {
					display: none !important;
				}
			}//slick-prev
			.slick-prev{
				display: none !important;
			}//slick-prev
			.slick-next{
				right: 0;
				background: url(../images/common/btn_next_l.png) 0 0 no-repeat;
				@include background-size(64px,64px);
				@include mq(sp) {
					@include background-size(32px,32px);
				}
			}//slick-next
		}
	}
}

<link rel="stylesheet" href="../../css/jquery.bxslider.css" />
<script src="../../js/jquery.bxslider.min.js" type="text/javascript"></script>
<script type="text/javascript">
	//Slider
	$(function() {
		var firstSlider = $('.box_slide ul').bxSlider({
			auto: true,
			speed: 1000,
			mode: 'fade',
			captions: false,
			responsive: true
		});
	});

</script>

<div class="box_slide">
					<ul class="slide_course" id="slide_course01">
						<li class="slide"><img src="images/img_course01.jpg" alt="フェリーイメージ"></li>
						<li class="slide"><img src="images/img_course01.jpg" alt="フェリーイメージ"></li>
						<li class="slide"><img src="images/img_course01.jpg" alt="フェリーイメージ"></li>
					</ul><!-- /.slide_course -->
				</div><!-- /.box_slide -->