https://www.city.shobara.hiroshima.jp/common/js/slider.js

1// JavaScript Document
2
3// トップスライド
4$(function () {
5	$('#carousel').slick({
6		slidesToShow: 1,
7		centerMode: true,
8		centerPadding: '0px',
9		arrows: true,
10		prevArrow: $('#prev'),
11		nextArrow: $('#next'),
12		dots: false,
13		infinite: true,
14		variableWidth: true,
15		autoplay: true,
16		autoplaySpeed: 3000
17	});
18});
19// トップスライドの説明文
20document.addEventListener('DOMContentLoaded', function () {
21	const limit = 38;
22	const targets = document.querySelectorAll('ul#carousel li p');
23	targets.forEach(el => {
24		const text = el.textContent.trim();
25		if (text.length > limit) {
26			el.textContent = text.slice(0, limit) + '…';
27		}
28	});
29});
30
31
32// バナー
33$(function () {
34	var $slider = $('#carouselBn');
35	var currentMode = null; // 'pc' or 'sp'
36	function initPc() {
37		$slider.slick({
38			slidesToShow: 4,
39			slidesToScroll: 1,
40			arrows: true,
41			prevArrow: $('#prevBn'),
42			nextArrow: $('#nextBn'),
43			dots: false,
44			infinite: true,
45			centerMode: false,
46			variableWidth: false,
47			autoplay: true,
48			autoplaySpeed: 3000
49		});
50		currentMode = 'pc';
51	}
52	function initSp() {
53		$slider.slick({
54			slidesToShow: 2,
55			slidesToScroll: 1,
56			arrows: true,
57			prevArrow: $('#prevBn'),
58			nextArrow: $('#nextBn'),
59			dots: false,
60			infinite: true,
61			centerMode: false,
62			variableWidth: false,
63			autoplay: true,
64			autoplaySpeed: 3000
65		});
66		currentMode = 'sp';
67	}
68	function destroy() {
69		if ($slider.hasClass('slick-initialized')) {
70			$slider.slick('unslick');
71		}
72	}
73	function checkWidth() {
74		var w = $(window).width();
75		if (w >= 481 && currentMode !== 'pc') {
76			destroy();
77			initPc();
78		} else if (w <= 480 && currentMode !== 'sp') {
79			destroy();
80			initSp();
81		}
82	}
83	// 初期化
84	checkWidth();
85	// リサイズ対応（負荷軽減）
86	var timer = null;
87	$(window).on('resize orientationchange', function () {
88		clearTimeout(timer);
89		timer = setTimeout(checkWidth, 200);
90	});
91});