jQueryのflip.jsというプラグインを用いてフリップを実装,swiper.jsというプラグインでスライドを実装。
スライドを実装するまではフリップしていたのですが出来なくなりました。
おそらく、プラグイン同士の競合だと思われますので、対策できません。
実装方法を教えてください。
Javascript
1//= require jquery 2//= require jquery_ujs 3//= require jquery-ui 4//= require materialize-sprockets 5//= require tag-it 6//= require swiper 7//= require_tree . 8$(document).ready(function() { 9 var mySwiper = new Swiper ('.swiper-container', { 10 effect: "slide", 11 loop: true, 12 pagination: '.swiper-pagination', 13 nextButton: '.swiper-button-next', 14 prevButton: '.swiper-button-prev', 15 }) 16});
ruby
1<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 2<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 3<script src='https://code.responsivevoice.org/responsivevoice.js'></script> 4 5 <div class="swiper-container"> 6 <!-- Additional required wrapper --> 7 <div class="swiper-wrapper"> 8 <% @words.each.with_index(1) do |word,n|%> 9 <%colors=["white","blue","red","purple","amber","orange darken-3","light-green lighten-2"]%> 10 <div class="swiper-slide"> 11 <div id="card<%="#{n}"%>"> 12 <div class="front card-panel <%=colors.sample%>"> 13 <p>問題:<%=word.question%></p> 14 <p>クリックして回答を見る</p> 15 <%if word.question_language=="ja"%> 16 <input onclick='responsiveVoice.speak("<%=word.question%>","Japanese Female");' type='button' value='発音' /> 17 <%else%> 18 <input onclick='responsiveVoice.speak("<%=word.question%>","US English Male");' type='button' value='発音' /> 19 <%end%> 20 </div> 21 <div class="back card-panel <%=colors.sample%>"> 22 <p>回答:<%=word.answer%></p> 23 <%if word.answer_language=="ja"%> 24 <input onclick='responsiveVoice.speak("<%=word.answer%>","Japanese Female");' type='button' value='発音' /> 25 <%else%> 26 <input onclick='responsiveVoice.speak("<%=word.answer%>","US English Male");' type='button' value='発音' /> 27 <%end%> 28 </div> 29 </div><br> 30 </div> 31 <%end%> 32 </div> 33 <div class="swiper-pagination"></div> 34 35 <!-- If we need navigation buttons --> 36 <div class="swiper-button-prev"></div> 37 <div class="swiper-button-next"></div> 38 </div> 39<% @words.each.with_index(1) do |word,n|%> 40 <script> 41 $("#card<%="#{n}"%>").flip({ 42 trigger: 'click', 43 axis: 'x', 44 speed: "707" 45 }); 46 </script> 47<%end%>
文字数制限のため
html
##環境
swiper
flip.js
jquery-2.1.4
ruby on rails 4
materialize (cssテンプレート及びjqueryプラグイン)
回答2件
あなたの回答
tips
プレビュー