Databases
StackOverflow2013
Postsdbo
POBootstrap with Picture Slideshow
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap with Picture Slideshow
    text
    copied!<p>My Code so far:</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!-- Naming title and allowing for small-device-viewing --&gt; &lt;title&gt;Tech Site&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;!-- Calling StyleSheets --&gt; &lt;link href = "/ssheets/bootstrap/bootstrap.min.css" rel = "stylesheet"&gt; &lt;link href = "/ssheets/main.css" rel = "stylesheet"&gt; &lt;!-- Calling JavaScript --&gt; &lt;!-- Might be worth moving down to the bottom of 'body' so the page is displayed faster --&gt; &lt;script src = "/jscript/jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;script src = "/jscript/bootstrap/bootstrap.js"&gt;&lt;/script&gt; &lt;script src="/jscript/main.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Need to display: - Navigation Bar - Fading Picture - 3 Column Testimony Preview - Footer --&gt; &lt;!-- Navbar --&gt; &lt;!-- Nav bar set at static to reduce overlapping at top --&gt; &lt;div class = "navbar navbar-default navbar-static-top"&gt; &lt;div class = "container"&gt; &lt;a href = "#" class = "navbar-brand"&gt;Tech Site&lt;/a&gt; &lt;button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"&gt; &lt;span class = "icon-bar"&gt;&lt;/span&gt; &lt;span class = "icon-bar"&gt;&lt;/span&gt; &lt;span class = "icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class = "collapse navbar-collapse navHeaderCollapse"&gt; &lt;ul class = "nav navbar-nav navbar-right"&gt; &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Blog&lt;/a&gt;&lt;/li&gt; &lt;li class = "dropdown"&gt; &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;Social Media &lt;b class = "caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class = "dropdown-menu"&gt; &lt;li&gt;&lt;a href = "#"&gt;Twitter&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Facebook&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Google+&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Instagram&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Main Content --&gt; &lt;!-- Fading Image --&gt; &lt;div class = "container"&gt; &lt;div class="img-responsive"&gt; &lt;img style="max-height:450px; width:100%;" src="/images/photo_1.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class = "container"&gt; &lt;div class = "row"&gt; &lt;div class = "col-md-3"&gt; &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt; &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;div class = "col-md-3"&gt; &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt; &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;div class = "col-md-3"&gt; &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt; &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;div class = "col-md-3"&gt; &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt; &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class = "navbar navbar-default navbar-fixed-bottom"&gt; &lt;div class = "container"&gt; &lt;p class = "navbar-text pull-left"&gt;A Site&lt;/p&gt; &lt;a href = "#" class = "navbar-btn btn-primary btn pull-right"&gt;Find us on Facebook&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- End of Footer --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS is bootstrap 3; as noted in the html code.</p> <p>At the point of the img responsive tags, I want to have a fading slideshow (slow transition) between three images. However, I have no idea how to do that without messing up the layout. Any ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload