218 lines
7.1 KiB
JavaScript
218 lines
7.1 KiB
JavaScript
|
||
|
||
jQuery(function($){
|
||
|
||
// <20>꾩쓽<EABEA9><EC93BD> <20>곸뿭<EAB3B8><EBBFAD> 留뚮뱾<EB9AAE><EBB1BE> <20>ㅽ겕濡ㅻ컮 <20>ш린 痢≪젙
|
||
function getScrollBarWidth(){
|
||
if($(document).height() > $(window).height()){
|
||
$('body').append('<div id="fakescrollbar" style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"></div>');
|
||
fakeScrollBar = $('#fakescrollbar');
|
||
fakeScrollBar.append('<div style="height:100px;"> </div>');
|
||
var w1 = fakeScrollBar.find('div').innerWidth();
|
||
fakeScrollBar.css('overflow-y', 'scroll');
|
||
var w2 = $('#fakescrollbar').find('div').html('html is required to init new width.').innerWidth();
|
||
fakeScrollBar.remove();
|
||
return (w1-w2);
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
// 硫붿씤 鍮꾩＜<EABEA9><EFBC9C> <20>믪씠媛<EC94A0> <20>ㅼ젙
|
||
if ( $("#main_visual.full-height").length > 0 ) {
|
||
mainVisualHeight();
|
||
function mainVisualHeight () {
|
||
scrollWidth = getScrollBarWidth();
|
||
var win_width = $(window).outerWidth() + scrollWidth;
|
||
var visual_height = $(window).height(); // header媛<72> fixed or absolute<74>쇨꼍<EC87A8><EABC8D> - $("#header").height() <20><>젣
|
||
if ( win_width < 1221 ) {
|
||
$(".main-visual-con").height(visual_height);
|
||
}else {
|
||
$(".main-visual-con").css("height","100%");
|
||
}
|
||
}
|
||
$(window).on('resize', mainVisualHeight);
|
||
}
|
||
|
||
// 硫붿씤 鍮꾩＜<EABEA9><EFBC9C>
|
||
$(".main-visual-con").each(function () {
|
||
var $visualSlide = $(this);
|
||
var $visualSlideItem = $(this).find(".main-visual-item");
|
||
var visualNum = $visualSlideItem.length;
|
||
var $visualControls = $(".visual-control");
|
||
|
||
$visualControls.find('.paging-controls .total').text(visualNum);
|
||
|
||
$visualSlide.on('init', function(event, slick) {
|
||
$visualSlideItem.eq(0).addClass("active-item");
|
||
$(".main-visual-con .slick-dots").find("li").eq(0).addClass("active-item");
|
||
});
|
||
$visualSlide.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
|
||
// 鍮꾩＜<EABEA9>쇱쁺<EC87B1><EC81BA>
|
||
$visualSlideItem.removeClass("active-item");
|
||
$visualSlideItem.eq(nextSlide).addClass("active-item");
|
||
// Custom paging
|
||
$(".main-visual-con li").removeClass("active-item");
|
||
$(this).find(".slick-dots").find("li").eq(nextSlide).addClass("active-item");
|
||
// <20>꾩옱index <20>쒖떆
|
||
$visualControls.find('.paging-controls .cur').text(nextSlide + 1);
|
||
})
|
||
|
||
// 硫붿씤 鍮꾩＜<EABEA9><EFBC9C> <20>щ씪<D189>대뱶
|
||
$visualSlide.slick({
|
||
slidesToShow: 1,
|
||
slidesToScroll: 1,
|
||
arrows: true,
|
||
fade: true,
|
||
dots:true,
|
||
autoplay:true,
|
||
speed:1000,
|
||
infinite:true,
|
||
autoplaySpeed: 3000,
|
||
easing: 'easeInOutQuint',
|
||
pauseOnHover:false,
|
||
zIndex:1,
|
||
prevArrow: '.visual-control .prev',
|
||
nextArrow: '.visual-control .next',
|
||
customPaging : function(slider, i) {
|
||
var title = $(slider.$slides[i].innerHTML).find('div[data-title]').data('title');
|
||
var en_title = $(slider.$slides[i].innerHTML).find('div[data-en-title]').data('en-title');
|
||
return '<a><p class="loading-bar-paging-tit"><strong>'+title+'</strong><span>'+en_title+'</span></p><span class="loading-bar-line"></span></a>';
|
||
},
|
||
});
|
||
|
||
$visualControls.find('.pause-visual-btn').click(function () {
|
||
$visualSlide.slick("slickPause");
|
||
$(this).hide().siblings().show();
|
||
});
|
||
$visualControls.find('.play-visual-btn').click(function () {
|
||
$visualSlide.slick("slickPlay");
|
||
$(this).hide().siblings().show();
|
||
});
|
||
});
|
||
|
||
|
||
});
|
||
|
||
$(document).ready(function() {
|
||
var btn = $(".btn");
|
||
btn.click(function() {
|
||
btn.toggleClass("paused");
|
||
return false;
|
||
});
|
||
});
|
||
|
||
$('.btn').on('click', function(e) {
|
||
e.preventDefault();
|
||
if (jQuery(this).hasClass("pause")) { // add class where you want to add class active for process
|
||
jQuery(this).removeClass("pause");
|
||
jQuery('.main-visual-con').slick('slickPause');
|
||
jQuery('.left-banner-slide').slick('slickPause');
|
||
jQuery(this).addClass("play");
|
||
} else {
|
||
jQuery(this).removeClass("play");
|
||
jQuery(this).addClass("pause");
|
||
$('.main-visual-con').slick('slickPlay');
|
||
$('.left-banner-slide').slick('slickPlay');
|
||
}
|
||
});
|
||
|
||
|
||
|
||
// e:main_visual
|
||
$('.slider_box2').slick({
|
||
infinite:true,
|
||
slidesToShow:1,
|
||
autoplay:true,
|
||
autoplaySpeed:2000,
|
||
arrows:false,
|
||
dots:false
|
||
});
|
||
|
||
|
||
|
||
|
||
// sec4 card_list
|
||
|
||
|
||
|
||
|
||
$(document).ready(function() {
|
||
var btn = $(".sec4_p");
|
||
btn.click(function() {
|
||
btn.toggleClass("paused");
|
||
return false;
|
||
});
|
||
});
|
||
|
||
$('.sec4_p').on('click', function(e) {
|
||
e.preventDefault();
|
||
if (jQuery(this).hasClass("pause")) { // add class where you want to add class active for process
|
||
jQuery(this).removeClass("pause");
|
||
jQuery('.card_list').slick('slickPause');
|
||
jQuery(this).addClass("play");
|
||
} else {
|
||
jQuery(this).removeClass("play");
|
||
jQuery(this).addClass("pause");
|
||
$('.card_list').slick('slickPlay');
|
||
}
|
||
|
||
});
|
||
|
||
$('.card_list').each(function(){
|
||
var $visualSlide = $(this);
|
||
var $visualSlideItem = $(this).find(".list");
|
||
var visualNum = $visualSlideItem.length;
|
||
|
||
var $status = $('.sec4_paging');
|
||
var $total = $('.sec4_total');
|
||
var $slickElement = $('.card_list');
|
||
|
||
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
|
||
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
|
||
var i = (currentSlide ? currentSlide : 0) + 1;
|
||
$status.html( '<span class="current_slide">' + i + '</span>');
|
||
$total.html( '<span class="total_slides"> ' + slick.slideCount + '</span>');
|
||
});
|
||
$visualSlide.slick({
|
||
infinite:true,
|
||
slidesToShow:4,
|
||
slidesToScroll: 1,
|
||
autoplay:true,
|
||
autoplaySpeed:1000,
|
||
arrow:true,
|
||
prevArrow: '.sec4_prev',
|
||
nextArrow: '.sec4_next',
|
||
responsive: [
|
||
{
|
||
breakpoint: 1600,
|
||
settings: {
|
||
slidesToShow:3,
|
||
slidesToScroll:1,
|
||
infinite: true,
|
||
}
|
||
},
|
||
{
|
||
breakpoint:1220,
|
||
settings: {
|
||
slidesToShow:3,
|
||
slidesToScroll:1,
|
||
infinite: true
|
||
}
|
||
},
|
||
{
|
||
breakpoint:900,
|
||
settings: {
|
||
slidesToShow:1,
|
||
slidesToScroll: 1
|
||
}
|
||
}
|
||
// You can unslick at a given breakpoint now by adding:
|
||
// settings: "unslick"
|
||
// instead of a settings object
|
||
]
|
||
});
|
||
|
||
});
|
||
|
||
|