js嵌入無法顯示

@前端 @js

kvztw2_茜 2020-01-10 14:55:40 ‧ 2570 瀏覽

分享至

https://codepen.io/kvztw2/pen/dyPmEoM
這是我在codepen使用的JS

https://kvztw22.1shop.tw/
但是要嵌入到這個網站裡面
他無法進行輪播和點選

所有的語法都寫在這裡但它其他區塊也有定方可以寫語法...

每次在codepen設計出來的版型
到1shop後台版型就會跑掉想請問是我設定值有什麼問題?

--更
謝謝大家的回應我會再跟問問看1shop的廠商

主要我想要做的是像以下可以陳列商品的感覺

http://www.bootstrapmb.com/item/6730/preview

謝謝大家的指導我在跟我們老闆商量看看>_<

看更多先前的討論...收起先前的討論...

咖咖拉 iT邦好手 1 級 ‧ 2020-01-10 16:44:03 檢舉

https://kvztw22.1shop.tw/
你的寫JS在哪裡?

firecold iT邦新手 1 級 ‧ 2020-01-10 18:13:02 檢舉

他們網站原本就有jquery了
但版本似乎不合

用的是jquery-1.11.1.min.js
所以你在codepen寫的時候最好引用跟他們一樣的
這樣比較容易成功

firecold iT邦新手 1 級 ‧ 2020-01-10 18:14:31 檢舉

再來是像這種html編輯器通常是給html tag在使用
雖然可以貼js code但其實限制很大

所以就算你都沒做錯要跑js還是很看運氣...
render, event..等等之類的

firecold iT邦新手 1 級 ‧ 2020-01-10 18:17:16 檢舉

slick他們也有自己的版本
slick-1.8.1/slick.min.js

marlin12 iT邦研究生 5 級 ‧ 2020-01-11 12:36:29 檢舉

在1shop的[官網->網頁]設定裏，不是己經有[上方橫幅式廣告]讓你做輪播嗎？為何你要自己另做輪播？
1shop内建的輪播也是用slick，而且它會把你加入的HTML/CSS/JS，放在網頁的底層框架裏(沒有獨立的iframe，可能是要迴避CORS的問題)。因此，你的輪播很容易跟内建的輪播起衝突。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

marlin12

iT邦研究生 5 級 ‧ 2020-01-11 17:06:48

最佳解答

1shop網頁外加的slick輪播
[注意] 以下的程式碼不需要加入jquery和slick的CDN，因為1shop網頁己經內建了。

<style type="text/css">
.marlin-carousel {
  width:90%;
  margin: 20px auto;
  padding-bottom: 20px;
  background-image: url("http://v.bootstrapmb.com/2019/11/2mw36730/images/hots_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.marlin-carousel .box {
  width: 255px;
  border-left: 3px white solid;
  background-position: center;
  background-repeat: no-repeat;
}
.marlin-carousel .box:hover {
  opacity:0.5;
}
.marlin-carousel .box1 {
  background-image: url('http://v.bootstrapmb.com/2019/11/2mw36730/images/hots_01.jpg');
}
.marlin-carousel .box2 {
  background-image: url('http://v.bootstrapmb.com/2019/11/2mw36730/images/hots_02.jpg');
}
.marlin-carousel .box3 {
  background-image: url('http://v.bootstrapmb.com/2019/11/2mw36730/images/hots_03.jpg');
}
.marlin-carousel .box4 {
  background-image: url('http://v.bootstrapmb.com/2019/11/2mw36730/images/hots_01.jpg');
}
.marlin-carousel .shadow {
  height: 60px;
  /* opacity: 1; */
  background-color: rgba(0, 0, 0, 0.45);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
  margin-top: 130px;
  color: white;
  font-size: 14px;
}
.marlin-carousel .shadow a {
  display: inline-block;
  height: 60px;
  color: white;
  text-decoration: none;
  margin-left: 18px;
  margin-top: 10px;
}
.marlin-carousel .slick-prev:hover, .marlin-carousel .slick-next:hover {
  cursor: pointer;
}
.marlin-carousel .slick-prev, .marlin-carousel .slick-next {
  color: rgba(0, 0, 0, 0.45);
}
@media only screen and (max-width: 1024px) {
  .marlin-carousel {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 800px) {
  .marlin-carousel {
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 600px) {
  .marlin-carousel .slick-prev, .marlin-carousel .slick-next {
    padding: 20px 10px;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
    color: white;
  }
  .marlin-carousel .slick-prev {
    left: -50px;
  }
  .marlin-carousel .slick-next {
    right: -50px;
  }
}
</style>

<div class="marlin-carousel">
  <div class="box box1">
    <div class="shadow">
      <a href="#">矢志不渝，躬身力行，服务普惠金融事业无止境</a>
    </div>
  </div>
  <div class="box box2">
     <div class="shadow">
	   <a href="#">建设银行：以金融赋能助力乡村振兴</a>
     </div>
  </div>
  <div class="box box3">
    <div class="shadow">
      <a href="#">中国建设银行与腾讯跨界合作推出龙卡QQ音乐信用卡</a>
    </div>
  </div>
  <div class="box box4">
    <div class="shadow">
      <a href="#">建设银行举办CCB2020宣传推介活动 高管集中推介...</a>
    </div>
  </div>        
  <div class="box box2">
    <div class="shadow">
      <a href="#">建设银行举办CCB2020宣传推介活动 高管集中推介...</a>
    </div>
  </div>        
</div>

<script>
$(document).ready(function(){
  $('.marlin-carousel').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    dots:false,
    autoplay: true,
    autoplaySpeed: 2000,
    prevArrow: '<div class="slick-prev"><i class="far fa-chevron-left"></i></div>',
    nextArrow: '<div class="slick-next"><i class="far fa-chevron-right"></i></div>',
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    }, {
      breakpoint: 800,
      settings: {
        slidesToShow: 2
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});
</script>

回應
分享
檢舉

登入發表回應

firecold

iT邦新手 1 級 ‧ 2020-01-10 15:10:54

我沒用過一頁購物的後台
又或者是你可以隨便編輯
不確定他們的機制是怎樣

但你搬過去不能用
首先要先確認有沒有js, css衝突
再來是確認版本是否跟codepen上的一樣

https://codepen.io/firecold/pen/jOEzoYX
很明顯你這個是jquery衝突
你拔掉一個試試

如果你沒辦法拔掉一個就直接聯繫官方吧

回應 1
分享
檢舉

firecold iT邦新手 1 級 ‧ 2020-01-10 18:19:17 檢舉

個人經驗是這種簡單的東西
因為用一頁網站導致不能用的常用功能

直接聯繫官方是最簡單的...
尤其你不清楚背後整個架構的情況

登入發表回應

小魚

iT邦大師 1 級 ‧ 2020-01-10 16:01:29

你把BootStrap拿掉看看.

回應
分享
檢舉

登入發表回應

咖咖拉

iT邦好手 1 級 ‧ 2020-01-10 17:57:06

你沒寫到JS
網站裡找不到

  $(document).on('ready', function() { 
      $(".variable").slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 1000, 
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
      });
      
    });