javascript - RAILS/HTML: Change image slide every 7 seconds -
i've seen lot of questions mine here in stack these three: 1, 2 , 3. tried way didn't work.
i looking more simple way. using javascript in-line in html, tried have code (which found in 1 of questions here in stack)
<script> function fetchdata() { $("#pack").animate({ left: '-1000px' }, 'slow'); } settimeout(fetchdata, 7000); </script>
and have well...
<img id="pack" src="image.jpg">
but seems not work. nothing happened. have looked , stared @ photo on minute , did not move @ all. wrong? lack codes? have no css code relates way.
try use carousel using bootstrap , put on topmost part of code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
this code slides in html:
<div class="carousel slide" id="mycarousel" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#mycarousel"> </li> <li data-slide-to="1" data-target="#mycarousel"> </li> <li data-slide-to="2" data-target="#mycarousel"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <%= image_tag 'image_1.jpg' %> </div> <div class="item"> <%= image_tag 'image_2.jpg' %> </div> <div class="item"> <%= image_tag 'image_3.jpg' %> </div> </div> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
and javascript in-line code:
<script type="text/javascript"> $(document).ready(function(){ $("#mycarousel").carousel({ interval : 7000, pause: false }); }); </script>
Comments
Post a Comment