添加幻燈片到emberJS模板頁面

編輯：有更多的挖掘和emberJS不允許內聯腳本執行。我將如何去創建幻燈片？我是否創建一個組件？添加幻燈片到emberJS模板頁面

我只是從emberJS開始。我遵循Ember在網站上的指南，並在這裏看到了解，但我發現自己陷入了死衚衕，我需要你的幫助！

這種情況：我想添加幻燈片到我的模板之一。現在，爲了盡我所能，我使用'BOWER INSTALL'添加了幻燈片.js和.css，然後編輯了我的'ember-cli-build.js'以引用這兩個依賴項的app.import。

這是一個基本的網頁，如'關於我'，'服務'，'聯繫我們'。沒有什麼花哨。假設我想將此幻燈片添加到「服務」頁面，首先當我訪問加載的網站時沒有問題，但是當我使用{{＃link-to}}功能在模板/頁面之間切換時，它會消失並贏得再次加載。

任何人都可以解釋我應該如何在模板中添加內聯腳本？

對不起，對於初學者提問。

爲了讓我運行幻燈片放映，我需要在頁面上的DOM元素之後執行下面的腳本。

<script type="text/javascript"> 
     $(window).load(function() { 
     $('.flexslider').flexslider(); 
     }); 
</script>

的HTML如下：

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="http://placehold.it/350x150/0889d8/000000" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/350x150/c1a4f0/ffffff" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/350x150/8b4513/000000" /> 
    </li> 
    </ul> 
</div>

來源

2015-11-03 Molik Miah

我試着用光滑的插件，但遇到了問題。所以我創建了另一個包裝jquery unslider插件的ember插件。退房ember-cli-unslider。

請參閱simple demo。

un-slider組件需要一組幻燈片。在其塊中，您必須定義每張幻燈片使用的HTML內容。

{{#un-slider slides=model as |slide|}} 
<img src="{{slide.url}}"/> 
{{/un-slider}}

在上面的例子中，model看起來是這樣的：

[ 
    { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' }, 
    { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' }, 
    { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' } 
];

來源

2016-05-24 19:32:17

可以使用灰燼插件，已經這樣做是：ember-cli-slick

使用安裝它：

ember install ember-cli-slick

你可以在y中使用它我們的模板是這樣的：

{{#slick-slider autoplay=true arrows=false}} 
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div> 
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div> 
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div> 
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div> 
{{/slick-slider}}

如果你想學習如何製作幻燈片成分看這裏的源代碼： https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js

這僅僅是對slick.js插件包裝部件。你會爲flexslider插件做同樣的事情。

來源

2015-11-03 22:24:07

非常感謝您！這正是我一直在尋找的，現在我將開始通過ember-cli插件來挖掘，看看我是否可以節省時間並學習新的東西。我是否正確思考如果我想說，創建我自己的jQuery函數我需要將它包裝在一個組件中？ –

通常，當您想要在某些DOM元素上應用jquery函數時，可以在組件的didInsertElement函數中執行此操作。檢查本教程：http://www.programwitherik.com/how-to-initialize-a-jquery-component-with-ember-js/ –

@BriscBogdan我需要使用asNavFor選項我們如何將選項傳遞給滑塊？ – vivek

添加幻燈片到emberJS模板頁面

回答

相關問題