https://www.opm.go.kr/_res/en/_js/user/visual.js?v2

1$(document).ready(function(){
2
3	/*main-visual*/// swiper-carousel 컨텐츠 1개일 때 제어
4	if($(document).has('.swiper-container').length > 0){
5		$('.swiper-container').each(function(){					
6			if($(this).find('.swiper-slide:not(.swiper-slide-duplicate)').length === 1){
7				$(this).addClass("disabled");
8			}					
9		});
10	}
11	
12	var mainVisualSwiper = new Swiper('.main-visual-swiper', {
13		loop: true,
14		slidesPerView: 1,
15		draggable:false,
16		autoplay: {
17			delay: 5000,
18			disableOnInteraction: false,
19		},
20		pagination: {
21			el: '.swiper-visual-pagination',
22			type: 'bullets',
23			clickable: true,
24		}
25	});
26
27
28	/*main-content03*/
29	var mySwiper = new Swiper('.main-picture-swiper', {
30		loop: true,
31		spaceBetween: 60,
32		slidesPerView: 'auto',
33		speed : 600,
34		autoplay: false,
35		navigation: {
36			prevEl: '.swiper-picture-prev',
37			nextEl: '.swiper-picture-next',
38		},
39		breakpoints: {
40			768: {
41				spaceBetween: 10
42			}
43		}
44	});
45
46	//메인배너
47	$('.main-banner-box').each(function(){
48		var swiperBox = $(this).find('.main-banner-swiper');
49		var bannerPrev = $(this).find('.briefing__nav--prev');
50		var bannerNext = $(this).find('.briefing__nav--next');
51
52		var bannerProgress = $('<div class="main-banner__m-controls" aria-hidden="true"><div class="main-banner__progressbar"><div class="main-banner__progressbar-drag"></div></div></div>');
53		$(this).find('.main-mini-wrap').after(bannerProgress);
54		var bannerProgressDrag = bannerProgress.find('.main-banner__progressbar-drag')[0];
55
56		function updateBannerProgress(swiper) {
57			if (!bannerProgressDrag || !swiper) return;
58			var slides = Array.prototype.slice.call(swiper.slides || []);
59			var total = slides.filter(function(slide) {
60				return !slide.classList.contains('swiper-slide-duplicate');
61			}).length || slides.length || 1;
62			var slidesPerView = swiper.params.slidesPerView;
63			var perView = slidesPerView === 'auto'
64				? Math.max(1, swiper.el.querySelectorAll('.swiper-slide-visible').length || 1)
65				: Math.max(1, Math.round(slidesPerView) || 1);
66			var index = typeof swiper.realIndex === 'number' ? swiper.realIndex : (swiper.activeIndex || 0);
67			var width = Math.min(100, (perView / total) * 100);
68			var maxLeft = 100 - width;
69			bannerProgressDrag.style.width = width + '%';
70			bannerProgressDrag.style.left = (total > perView ? (index / (total - perView)) * maxLeft : 0) + '%';
71		}
72
73		var myBannerSwiper = new Swiper(swiperBox, {
74			loop: true,
75			autoplay: false,
76			slidesPerView: 5,
77			spaceBetween: 80,
78			navigation: {
79				prevEl: bannerPrev,
80				nextEl: bannerNext,
81			},
82			breakpoints: {
83				1200: {
84					slidesPerView: 5,
85					spaceBetween: 60,
86				},
87				1024: {
88					slidesPerView: 3,
89					spaceBetween: 40,
90				},
91				768: {
92					slidesPerView: 2,
93					spaceBetween: 20,
94				},
95				420: {
96					slidesPerView: 1,
97					spaceBetween: 10,
98				},
99			}
100		});
101
102		updateBannerProgress(myBannerSwiper);
103		myBannerSwiper.on('slideChange', function() { updateBannerProgress(this); });
104		myBannerSwiper.on('resize', function() { updateBannerProgress(this); });
105		myBannerSwiper.on('breakpoint', function() { updateBannerProgress(this); });
106	});
107
108
109	$('.swiper-slide-duplicate').find('a').attr('tabIndex','-1');
110
111});