javascript 170620 tabの中に幻灯片（ベトナムさん修正）

Posted 2021-05-04

<div class="box_tab">
	<div id="tab">
		<ul>
			<li data-target="#panel01" class="active">東京から</li>
			<li data-target="#panel02">名古屋から</li>
			<li data-target="#panel03">大阪から</li>
			<li data-target="#panel04">福岡から</li>
		</ul>
		<select>
			<option value="#panel01" selected>東京から</option>
			<option value="#panel02">名古屋から</option>
			<option value="#panel03">大阪から</option>
			<option value="#panel04">福岡から</option>
		</select>
	</div><!-- /#obj_tab -->

	<div class="wrap">
		<ul id="panel">
			<li id="panel01" class="box_panel active">
				<div class="box_route">
					<div class="box_slide">
						<div class="slider"><img src="images/img_slide_tokyo01.jpg" alt="slide01"></div>
						<div class="slider"><img src="images/img_slide_tokyo02.jpg" alt="slide02"></div>
						<div class="slider"><img src="images/img_slide_tokyo03.jpg" alt="slide03"></div>
						<div class="slider"><img src="images/img_slide_tokyo04.jpg" alt="slide04"></div>
					</div>
				</div>
			</li><!-- /#panel01 -->
			<li id="panel02" class="box_panel">
				<div class="box_route">
					<div class="box_slide">
						<div class="slider"><img src="images/img_slide_nagoya01.jpg" alt="slide01"></div>
						<div class="slider"><img src="images/img_slide_nagoya02.jpg" alt="slide02"></div>
						<div class="slider"><img src="images/img_slide_nagoya03.jpg" alt="slide03"></div>
						<div class="slider"><img src="images/img_slide_nagoya04.jpg" alt="slide04"></div>
					</div>
				</div>
			</li><!-- /#panel02 -->
		</ul>
	</div>
</div>

$(function(){
	$('.box_slide').slick({
		arrows: true,
		autoplay: false,
		autoplaySpeed: 5000,
		dots: true,
	});

	$('#tab ul li').click(function(){
		$('#tab ul li').removeClass('active');
		$(this).addClass('active');

		$('#panel .box_panel').removeClass('active');
		$($(this).attr('data-target')).addClass('active');
	})

	$('#tab select').change(function(){
		var i = $(this).prop('selectedIndex');
		$('#tab ul li').eq(i).trigger('click');
	})
});