How can I incorporate a slideshow into HTML? - javascript

I would like to know if you could guide me on making a slideshow for my HTML document. I know that I will need JavaScript, and I already know how to MAKE the slideshow, but how would I make the slideshow able for view in my html document? Here is the code, and I am using Adobe Brackets as an editor:
//////HTML CODE ////////
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css">
<title>Quentrum</title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li>
<a href="index.html">
Quentrum
</a>
</li>
<li>
<a href="Store.html">
Store
</a>
</li>
<li>
<a href="Support.html">
Support
</a>
</li>
</ul>
</nav>
</header>
<section>
<h>----------Slideshow Goes HERE-----------</h>
</section>
<footer>
<p>Quentrum 2015</p>
</footer>
</div>
</body>
</html>
//////// CSS CODE /////////
body{
background-color:lightgray;
}
#wrapper{
width:inherit;
}
header{
background-color: white;
clear:both;
height: 50px;
border:solid 1px black;
border-radius: 5px;
width: inherit;
padding-right:195px;
padding-left:195px;
}
header ul {
list-style: none;
}
header ul li{
display: inline;
padding: 115px;
}
header a {
color: #777;
text-decoration: none;
font-family: Georgia;
font-size: 17px;
}
header a hover:{
color:black;
}
section{
clear: both;
height: 550px;
width: 100%;
border: solid 1px darkblue;
border-radius: 5px;
background: blue;
font-family: Georgia;
}
footer{
width: 100%;
border: solid 1px gray;
border-radius: 5px;
background: lightgray;
clear: both;
}
footer p {
font-family: Geogria;
margin-left: 30px;
}
Thank you in advance!!!
EDIT[I don't think I really need to paste any Javascript code, but please TELL me if you need it, and I'll get it up. For the sake of this when you answer, you can just pretend that the name of my javascript file is "example"
Many thanks.]


Hope this helps extremely simple simply add this code where you want it then there is no left and right links to next n prev if want images same size simply change image size read notes/ comments for further details
<!-- Add below This To HEAD -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Add below this to your style sheet -->
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<!-- Add Below this where you want it in your page -->
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<!--
Add
<li data-target="#myCarousel" data-slide-to="next number"></li>
to how many images you want or if you dont want any links to change images atall delete this up to indicators
-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="firstimg.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="secondimg.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="thirdimage.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="fourthimage.jpg" alt="Flower" width="460" height="345">
<!-- Add for more images
<div class="item">
<img src="nextimage.jpg" alt="..." width="460" height="345">
If want captions Add like so
<img src="filename.jpg" alt="alt">
<div class="carousel-caption">
<h3>Title</h3>
<p>Caption</p>
</div>
</div>
-->
</div>
</div>
</div>
</div>


This might not be the way you want to do it, however there is a built in Bootstrap slideshow option.
Its called a carousel, here is the link for a tutorial: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp


You can do it via jQuery.
$(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
Example: JSFiddle


i have resolved the footer and navigation issue for you I believe simply download this new css file and replace it with current bootstrap.css
Link to Bootstrap CSS Click To Download
Check your css as I noticed it says lightgray not lightgrey
also add this to your current main.css
footer p {
font-family: Geogria;
margin-left:30px;
font-size:16px; /* Font Size You Want */
}
and regarding you background color change it to lightgrey and should work ok once done these steps


What kind of slideshow are you looking forI am currently create one using jquery and php
a preview of the slideshow can be found at http://rbgraphix.co.uk/gallery/display/New/slideshow.php
at the moment it is not automatic but I am in the process of making it this way and also has an upload page /upload.php and a delete page (currently in coding (for admin users)

Related

My Bootstrap Carousel doesn't work, buttons don't show up

I've tried every solution I could find in these forums, and some I found in YouTube, nothing works. Bear in mind I'm a newbie and this is my first Bootstrap project, and my first time posting here. I basically copied all the code from the sample project, so I don't know what I'm doing wrong. I installed Bootstrap on my computer, downloaded and installed the fonts, everything I could think of. I'm losing my mind here. Basically I have three problems: my carousel doesn't work at all, the arrows don't show up, and the page takes forever to load. Here's my code. Thanks in advance for your help.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

line 8 is unnecessary you already have bootstrap 3.3.7
you should only have one carousel-inner class
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>

here is the corrected file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

You were pretty close. ;) You defined to many unnecessary div's like two body div's and to many div's with the class carousel-inner. Also you had two enclosing head tags in your version. Your controls don't need to be inside your carousel-inner. Also the CSS-classes for the right arrow were wrong. Just compare them to the ones from the left arrow.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

How can i slidetoggle to the left?

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}

slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>

How do I center bootstrap's carousel? Not the images, the carousel itself

I have the images at a set height and width since they are different sizes, so how do I center carousel itself?
I honestly have no clue where to start, because I don't know how to do it without screwing up bootstrap styling. Any help would be appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<h2>Balloons</h2>
<p> Our hand crafted balloon creations are a hit at every paty! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon arches and towers for events!</p>
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/f1.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f3.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/f4.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<h2>Flowers</h2>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<h2>Gifts</h2>
<p>We have a wide variety of gifts available for purchase that range from wind chimes to <b>Decorative Vases.</b></p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel hour-sect">
<h2>Hours</h2>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
CSS
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
.carousel {
width:640px;
height:360px;
}
#myCarousel {
}

Not 100% sure this is what you want but you can take a look at this: http://www.bootply.com/t08I4ieD1s
Basically all I did was add: margin: 0 auto; to the .carousel css
.carousel {
width:640px;
height:360px;
margin: 0 auto;
}
and add:
.carousel-indicators{
width:auto;
margin: 0 auto;
}
To add space above and below you need to change the top and bottom margins. So for example you could do the following:
.carousel {
width:640px;
height:360px;
margin: 100px auto 50px auto;
}
This would add 100px above the carousel, and 50 below. Read here: http://www.w3schools.com/cssref/pr_margin.asp for more info.

Try this easy fix:
You can use bootstrap class .center-block to this line
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
after adding class
<div id="myCarousel" class="carousel center-block center slide" data-ride="carousel">
bootstrap class .center-block make your element to the center horizontally with respect to its parent element.

Bootstrap v3.3.6 Dropdown not working

previewI am not understanding why the Bootstrap drop down menu is not working!!! I downloaded Bootstrap to develop a custom design. The carousel is working fine, but when you click on the drop-down button the dropdown-menu jumps to the left!!! If you have the files on your computer kindly review it because it's too much code to copy here, I just copied my html and part of the bootstrap.min.css ... any advice please???
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
color: #fff;
text-decoration: none;
background-color: #337ab7;
outline: 0
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
color: #777
}
.dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.open>.dropdown-menu {
display: block;
position:relative;
}
.open>a {
outline: 0
}
.dropdown-menu-right {
right: 0;
left: auto
}
.dropdown-menu-left {
right: auto;
left: 0
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990
}
.pull-right>.dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid\9
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px
}
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="footer.css" rel="stylesheet" type="text/css">
<link href="css/ancor.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="nav.js"></script>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators-hp">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/home/canvas_hp_1600x900_New_Giulietta_v1_update.jpg);"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/canvas-2_modelpage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<h2></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div>
<div id="myCarousel2" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators" style="display:none;">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/overview_modelapage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> OVERVIEW </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>REDEFINING STYLE</p>
</div>
<div class="content__descr">
<p>With new sporty exterior details, enhanced onboard experience, new interior touches and extended engine range: The Alfa Giulietta has once again reinvented itself.<br>
Even more sporty. Even more Alfa Romeo.</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myCarousel3" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel3" data-slide-to="0" class="active">style</li>
<li data-target="#myCarousel3" data-slide-to="1" >exteriors</li>
<li data-target="#myCarousel3" data-slide-to="2" >interiors</li>
<li class="last" data-target="#myCarousel3" data-slide-to="3" >distinctive</li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/style_modelpage-giulietta.jpg); background-position:bottom;"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> ENHANCED SPORTS STYLING </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>DESIGN & PERFORMANCE</p>
</div>
<div class="content__descr">
<p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/exteriors_modelpage-newgiulietta.jpg); background-position:bottom center;"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> EXTERIORS </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>ALFA ROMEO'S DISTINCTIVE STYLING</p>
</div>
<div class="content__descr">
<p>From first glance, the iconic grille reflects true Alfa Romeo DNA. Every innovation of the New Alfa Giulietta highlights an Italian passion for performance and style, such as the carbon effect headlights, oversized tail pipes, and range of distinctive alloy wheels to personalise your Alfa Romeo.</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/interiors_modelpage-newgiulietta.jpg); background-position:top center;"></div>
<div class="carousel-caption">
<div class=" model__content color--light left">
<h2 class="content__title"> INTERIORS </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>IGNITE YOUR PASSION</p>
</div>
<div class="content__descr">
<p>The interiors of the New Alfa Giulietta have been crafted with high quality materials such as the new Italian design upholstery and matte black grain dashboard. Refined elegance in true Alfa Romeo style.
New Alfa Giulietta. Pure Sportiness. Pure Emotion. Pure Alfa Romeo.</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/uniqueness_modelpage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> DISTINCTIVE </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>DESIGN & PERFORMANCE</p>
</div>
<div class="content__descr">
<p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: false //changes the speed
})
</script>
</body>
</html>

It is better to use CDNs:
From w3schools:
One advantage of using the Bootstrap CDN: Many users already have
downloaded Bootstrap from MaxCDN when visiting another site. As a
result, it will be loaded from cache when they visit your site, which
leads to faster loading time. Also, most CDN's will make sure that
once a user requests a file from it, it will be served from the server
closest to them, which also leads to faster loading time.
You can replace your downloaded bootstrap file links with these CDNs:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried your code with these CDNs and it was working.

I think there is something wrong with your script tags. Try using the CDN for jQuery and Bootstrap. This example works fine...
Edit:
If you need to override CSS you can do so by using the same class name and declaring the styles AFTER the Bootstrap styles. Example:
Bootstrap style
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
Custom style
.dropdown-menu.pull-right {
right: 20px;
}
If you need to increase the targeting use !important
.dropdown-menu.pull-right {
right: 20px !important;
}
I would not recommend changing the Bootstrap files at all.
<html>
<body>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

I want to make Slideshow with Content beaneath it [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
recently i visited this site : [http://www.suprafootwear.com/][1]
[1]: http://www.suprafootwear.com/
i have see that there is slideshow in the home page (full width slideshow). one of the cool thing about that it slides auto load and also it has slidetext beneath it when click on that i will show that image slideshow.
so any one can help me figure out how i can make this type of slideshow.
i had record gif of this slideshow panel for reference
also they use owl carousel plugin.
so i want to make exactly same slideshow with content beneath it
help me out
thanks

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 1,
loop: true,
center: true,
margin: 0,
callbacks: true,
URLhashListener: false,
autoplayHoverPause: true,
startPosition: 'URLHash',
autoplay: true,
});
});
.owl-carousel .item img {
display: block;
width: 100%;
height: 300px !important;
}
.text-tags { text-align:center; }
.text-tags ul { list-style:none; }
.text-tags ul li { display:inline-table; width:20%; border:#000 solid 1px; padding:10px; margin:0px !important;
background-color: #f39c12; }
.text-tags ul li a {
margin-bottom: 10px;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
color:#fff;
margin: 5px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<section id="demos">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="">
</div>
<div class="item" data-hash="two">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
</div>
<div class="item" data-hash="three">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
</div>
<div class="item" data-hash="four">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
<div class="text-tags">
<ul>
<li><a class="button secondary url" href="#one">Image 1</a></li>
<li><a class="button secondary url" href="#two">Image 2</a></li>
<li><a class="button secondary url" href="#three">Image 3</a></li>
<li><a class="button secondary url" href="#four">Image 4</a></li>
</ul>
</div>
</section>
Check my try out
working fiddle : https://jsfiddle.net/q851zfwe/1/

here is what you need OWL-CAROUSEL, a wonderful jQuery Slider plugin with number of effects and features. but don't expect complete integration from anyone here, as no one is going to do that. Here is the link http://www.owlcarousel.owlgraphic.com/demos/demos.html, here you can find the demos and required assets (CSS & JS), download and start working on it..

Categories