레일 부트 스트랩 캐 러셀

안녕하십니까. 내 웹 사이트에서이 코드를 작성했습니다. 나는 하나의 그림이 다른 그림 뒤에서 미끄러지는 회전 목마 기능을 구현하려고합니다. 내가 겪고있는 문제는 사진이 움직이지 않는다는 것입니다. 여기에 내 코드 내 환영 컨트롤러의 인덱스 페이지의 모습입니다 :레일 부트 스트랩 캐 러셀

<html> 
    <head> 
    </head> 
     <body> 


<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >    
       <ol class="carousel-indicators"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
       </ol> 

       <div class="carousel-inner"> 
        <div class = "item-active"> 
        <%= image_tag("slide2.jpg", class: "img-responsive") %> 
        </div> 
        <div class = "item"> 
        <%= image_tag("slide1.jpg", class: "img-responsive") %> 
        </div> 
       </div> 

       <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
        <span class = "icon-prev"></span> 
       </a> 

       <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
        <span class = "icon-next"></span> 
       </a> 
      </div> 

      <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
      <script src = "js/bootstrap.js"></script> 


     </body> 
</html>

welcome.js 파일 :

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    interval: 10000 
    }); 
});

이에 어떤 도움이 좋을 것!

당신은

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    interval: 10000 
    }); 
});

가 아니면 단순히 데이터에 옵션을 전달 할 수 application.js 파일에 아래 코드를 추가 할 수 있습니다

출처

2017-01-14 Aaron

속성 :

이

<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >

참조 : https://v4-alpha.getbootstrap.com/components/carousel/#via-javascript

내가 희망 도와 줘요!

UPDATE

는 당신이 JS 경로에 몇 가지 문제가있다 생각합니다. 부트 스트랩 파일의 js 경로가 확실합니까?

당신이 확실히 작동합니다 <head> 태그에서이 코드를 넣을 경우가 jQuery를로드되기 전에 호출되고 있기 때문에이 작동되지 않을 수 있습니다

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

출처

2017-01-14 02:48:19 Blackcoat77

helper_file에게 필요 application.js. 나도 다른 솔루션을 시도하고 그 역시 작동하지 않았다 – Aaron

내 업데이트를 확인하십시오 – Blackcoat77

이제 화살표를 클릭하면 한 페이지에 두 개의 이미지가 표시됩니다. ( – Aaron

합니다. 코드를 도우미 js 파일에 저장하고 application.js에 해당 파일을 포함합니다.

스크립트가 실행되기 전에 jQuery가로드되도록해야합니다.

는 // = 내가 application.js에 대한 코드를 추가 할 때이 나를 위해 작동하지 않습니다

출처

2017-01-14 03:21:13

이렇게하면 되겠습니까? welcome.js.coffee 스크립트 파일을 작성하고 내 application.js 파일에서 해당 파일을 호출하거나 실제 도우미 파일을 만들 수 있습니다. – Aaron

환영 파일에 추가 할 수 있습니다. 방금 도우미를 제안했습니다. js 파일이 없으면 이미 포함되어 있습니다. –

변경 사항을 표시하기 위해 내 게시물을 편집했습니다. 환영 파일에 적절한 자바 스크립트를 추가했지만 여전히 운이 없다. 시도 할 때마다 왼쪽 및 오른쪽 화살표를 클릭하여 다음 페이지로 이동하지 않고 아무 것도 나타나지 않고 #myCarousel을 표시하여 URL에서 단추가 클릭되었음을 알립니다 – Aaron

레일 부트 스트랩 캐 러셀

답변

관련 문제