123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
-
- $('.designer-bannerslider').slick({
- slidesToShow: 1, //預設 1 幻燈片顯示幾張
- slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
- arrows: true, // 預設 true 左右箭頭是否顯示
- dots: true,
- prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow-left.png" alt=""><div></button>',
- nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
- });
- $('.designer-bannerslider-mb').slick({
- slidesToShow: 1, //預設 1 幻燈片顯示幾張
- slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
- arrows: false, // 預設 true 左右箭頭是否顯示
- dots: true,
- prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
- nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
- });
- $('designer-nav').hide();
- $(".item-down").click(function () {
- $('.designer-nav').slideToggle();
- });
- $(".playbutton").click(function () {
- var videosrc = $(this).data("info");
- $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
- });
- $(".btn-close").click(function () {
- $('.youtube-video').attr('src', ``);
- });
- $('#yt-video').on('hidden.bs.modal', function () {
- $('.youtube-video').attr('src', ``);
- });
- $('#yt-video-mb').on('hidden.bs.modal', function () {
- $('.youtube-video').attr('src', ``);
- });
- let videoId = ['XlPxHa9BcKY', 'xc6SNElGDIM', 'xc6SNElGDIM'];
- var index = 0;
- function getSlideNNext() {
- index++
- if (index == videoId.length) index = 0;
- console.log(videoId[index]);
- };
- $(".designer-bannerslider2").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- $(document).on("click", ".slick-next", function (event) {
- getSlideNNext();
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- $('#yt-video-mb1').on('hidden.bs.modal', function () {
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- $('#yt-video-mb2').on('hidden.bs.modal', function () {
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- $('#yt-video-mb3').on('hidden.bs.modal', function () {
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- function getSlidePrev() {
- index--
- if (index == -1) index = videoId.length - 1;
- console.log(videoId[index]);
- };
- $(document).on("click", ".slick-prev", function (event) {
- getSlidePrev();
- $('.youtube-video2').each(function () {
- this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
- });
- });
- $('.designer-bannerslider2').slick({
- slidesToShow: 1, //預設 1 幻燈片顯示幾張
- slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
- arrows: true, // 預設 true 左右箭頭是否顯示
- dots: true,
- prevArrow: '<button type="button" class="slick-prev""><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow-left.png" alt=""><div></button>',
- nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
- });
- $(".play-mb").click(function () {
- // $('.modal-box-mb').css('width','100%');
- var videosrc = $(this).data("info");
- var slidenumber = $(this).data("slide");
- console.log(slidenumber);
- console.log(videosrc);
- $('.designer-bannerslider2').slick('slickGoTo', 0);
- });
- // 手機選單彈跳視窗
- $("#menu-box2").hide();
- $("#menu-box").hide();
- $("#menu-btn1").click(function () {
- $("#menu-box").fadeToggle("slow");
- $("#menu-box2").fadeToggle("slow");
- });
- $(".link").click(function () {
- $("#menu-box").slideUp("slow", function () {
- $("#menu-box2").slideUp("slow");
- // Animation complete.
- });
- });
- // var flagX = 0;
- // var flagXM = 0;
- // function getFlag(){
- // flagX = event.touches[0].pageX;
- // flagXM = flagX;
- // }
- // function setFlag(){
- // flagXM = event.touches[0].pageX;
- // }
- // function change(){
- // var range = flagXM - flagX;
- // //如果水平滑動距離小於30,就不切換
- // if(Math.abs(range) < 30){
- // return false;
- // }
- // var direction = range < 0 ?'next':'prev';
- // $("#carousel-example-generic").carousel(direction);
- // }
- // function designer_img(){
- // for(var i=1; i<42; i++){
- // let designer_slide_img="";
- // var img_number=i;
- // if (i<10){
- // img_number="0"+i
- // }
- // designer_slide_img=`
- // <div class="carousel-item active">
- // <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_'${img_number}'.jpg" class="d-block w-100"
- // alt="...">
- // </div>
- // `
- // }
- // $('.exampleModal3').html(designer_slide_img);
- // }
- // designer_img();
|