I suddenly tried using rails and it's my first time developing a website and first time using a framework. So I'm a bit confused with the process, Here it goes. I'm using rails 3.0.9
I wanted to display a set of images using the owlcarousel gem.
I've done the necessary steps in installing the gems and importing the libraries and css lines.
Application.js
//= require owl.carousel
MyCSS.css - First question, am I right to assume that the css where im going to paste this is my rails app's own css file or do I have to make a new css file named Application.css to paste the css codes there. Tutorial said to paste it in Application.css which I dont find it in any of the directories.
MyCSS.css
*= require owl.carousel
*= require owl.theme
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
index.html.erb
<body>
<div id = "body_warpper">
<div = "main">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="/images/bg1.jpg" alt="Mirror Edge"></div>
<div class="item"><img src="/images/bg2.jpg" alt="Mirror Edge"></div>
<div class="item"><img src="/images/bg3.jpg" alt="Mirror Edge"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
});
</script>
<div>
</div>
</div>
Question 2: Why does this not work? It only shows the 3 images which i know because it displays through the div id-"owl-demo". However it does not do the slide show.
Please help me explain what im misunderstanding and how do i solve this. Thanks!
Aucun commentaire:
Enregistrer un commentaire