iframe - Bootstrap slider does not work when setting images in table -


The first problem is a Bootstrap slider: When I try to slide iframes while clicking on imaging and its work,

But when I set the picture in an HTML table

Second: There is a very refreshing page, I think the reason is in the iframes because when I change the iframes of images, the problem disappears Also knows what is wrong?

My HTML code:

  & lt; Div class = "content" & gt; & Lt; Div class = "icon" & gt; & Lt; Table & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; A href = "johnmaus" class = "link" rel = "1" & gt; & Lt; Img src = "image / icons / disabled / Johnmos.jpg" alt = "200px" id = 'john mouse' class = "imgikon" gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; A href = "gymtiner" class = "link" rel = "2" & gt; & Lt; Img src = "image / icons / disabled / gymnotro.jpg" height = "200px" id = 'gymnature' class = "imgicon" gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; Div class = "carousel" style = "display: none" & gt; & Lt; Div class = "container" style = "width: 550px" & gt; & Lt; Div class = "fine span9 column" & gt; & Lt; Div id = "myCarousel" class = "carousel slide" & gt; & Lt; Div class = "carousel-interior" style = "text-align: center" & gt; & Lt; Div class = "item active" & gt; & Lt; Iframe width = "480" height = "360" src = "http://www.youtube.com/embed/52jWkrfjakk" frameboard = "0" & ​​gt; & Lt; / Iframe & gt; & Lt; / Div & gt; & Lt; Div class = "item" & gt; & Lt; Iframe width = "480" height = "360" src = "http://www.youtube.com/embed/52jWkrfjakk" frameboard = "0" & ​​gt; & Lt; / Iframe & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; A class = "left carousel-control" href = "# myCarousel" data-slide = "back" & gt; IMG src = "image / button / prev.jpg" id = "leftbtn" /> & Lt; / A & gt; & Lt; A class = "right carousel-control" href = "# myCarousel" data-slide = "next" & gt; IMG src = "image / button / next.jpg" id = "rightbtn" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "description" & gt; & Lt; Div class = "desc" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; And javascript code: // break slider $ ('# myCarousel'). Carousel ({break: true, interval: wrong}); // slide on specific post $ ('.link'). ('Click', function () {$ ('# myCarousel'). Carousel ($ (this). Index ());}); // Show Slider $ (".link"). Click (function () {$ (".orozel"). Show ("slow");}); // Load Video Details $ (document) .ready (function () {$ ('. Link'). Click (function () {var page = $ (this) .attr ('href'); $ (' Desc ') .load (' desc / '+ page +' .txt '); return;});});  

I'm not sure what your problem is, as it seems to work properly To do the table You should still

  • only . Click. resp .on ('click') (they mean the same)
  • After the document is ready, any function related to the DOM elements Call ( $ (document.ready ()
  • Call event.preventDefault () to call the given function . Click () pause or interval
  • and . Codeousel () / Code> You will find more and more detailed information in the Bootstrap docs:


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -