javascript Slickスライダー

Posted 2021-05-03

.box_slide02 {
			@include cV(width,100% , 100%, 100%);
			height: auto;
			overflow: hidden;
			@include mq(tab_sp) {
				height: auto;
			}
			@include mq(sp) {
				height: auto;
				overflow: visible;
			}
			@include mq(max_w,600px) {
				height: auto;
			}
			@include mq(max_w,500px) {
				height: auto;
			}
			.slide{
				padding: 0 10px;
			}
			.slick-slide {
				img {
					display: inline-block;
					width: 100%;
				}
			}
			.slick-prev {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #fff;
				border: 1px solid #f1f3f6;
				width: 50px;
				height: 50px;
				overflow: hidden;
				z-index: 1;
				font-family: "FontAwesome";
				letter-spacing: 100px;
				font-size: 40px;
				color: #000;
				cursor: pointer;
				&:before {
					content: "\f104";
					padding-left: 10px;
				}
			}
			.slick-next {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #fff;
				border: 1px solid #f1f3f6;
				width: 50px;
				height: 50px;
				overflow: hidden;
				z-index: 1;
				font-family: "FontAwesome";
				letter-spacing: 100px;
				font-size: 40px;
				color: #000;
				cursor: pointer;
				&:before {
					content: "\f105";
					padding-left: 10px;
				}
			}
			.txt{
				text-align: left;
				font-weight: bold;
			}
		}

<div class="box_slide02">
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu01.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu02.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu03.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu04.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
						<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu05.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu01.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
			<div class="slide">
				<div class="box">
					<p class="img">
					<img src="<?php echo LOCATION_MODULE;?>images/restaurant/slide_menu02.jpg" alt="メニューイメージ">
					</p>
					<p class="txt">MENU:DUMMY</p>
				</div>
			</div>
		</div>

$('.box_slide02').slick({
		slidesToShow: 5,
		slidesToScroll: 1,
		speed: 600,
		autoplaySpeed: 5000,
		autoplay: true,
		infinite: true,
		swipe: true,
		fade: false,
		dots: false,
		arrows: true,
		responsive: [
			{
				breakpoint: 1025,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 1,
			  }
			},
			{
				breakpoint: 768,
			  	settings: {
					slidesToShow: 2,
					slidesToScroll: 1,
				}
			}
		]
	});