Please somebody can analyze the code below and tell me why is the carousel not working. The pictures are not at all sliding even if I click on next or perv glyphicon. I want it to be automatic. It working in none of the browsers. I have taken this code from a site and its perfectly working there but not on my laptop. I am unable to understand where is the problem
.colht{
height:200px;
border: 5px solid red;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Power Me Up
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Power Me Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active ">Menu 1</li>
<li class="">
<a class="" href="#">Menu 2</a>
</li>
<li class="">Menu 3</li>
<li class="">Menu 4</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-generic" data-slide-to="1" ></li>
<li data-target="#carousel-generic" data-slide-to="2" ></li>
<li data-target="#carousel-generic" data-slide-to="3" ></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="Menu 1" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 1
</h3>
</div>
</div>
<div class="item">
<img src="images/2.jpg" alt="Menu 2" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 2
</h3>
</div>
</div>
<div class="item">
<img src="images/3.jpg" alt="Menu 3" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 3
</h3>
</div>
</div>
<div class="item">
<img src="images/4.jpg" alt="Menu 4" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 4
</h3>
</div>
</div>
</div>
<a class = "left carousel-control" href="#carousel-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class = "right carousel-control" href="#carousel-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Try this code below:
<!-- By abinthaha -->
<html lang="en" class="">
<head>
<link rel="canonical" href="https://codepen.io/abinthaha/pen/RyjLKa">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<style class="cp-pen-styles"></style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class=""></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class="active"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item">
<img src="https://news.marvel.com/wp-content/uploads/2017/12/tt-m.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="https://cdn.movieweb.com/img.news.tops/NEx6Czlz5SCWBy_1_b/Marvel-Movies-Release-Slate-2021-2022-Mcu.jpg" alt="Chicago">
</div>
<div class="carousel-item active">
<img src="https://cdn.images.express.co.uk/img/dynamic/36/590x/Avengers-Iron-Man-was-almost-played-by-another-major-star-936289.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
can you please try below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Power Me Up
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" media="screen">
<style type="text/css">
.colht{
height:200px;
border: 5px solid red;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Power Me Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active ">Menu 1</li>
<li class="">
<a class="" href="#">Menu 2</a>
</li>
<li class="">Menu 3</li>
<li class="">Menu 4</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://www.rodzinne-wakacje.pl/wp-content/uploads/2017/05/maldives-1993704_960_720-696x391.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/assets/js/vendor/tether.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
Related
Using this half slider startboostrap template, I am trying to add a zoom effect to the images.
The zoom effect does not work. I assume it is becasue the CSS targets the IMG tag. Is there any way to do this using the carousel images as css backgrounds?
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.5, 1.5);
}
}
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.5, 1.5);
}
}
.carousel-item > img {
-webkit-animation: zoom 20s;
animation: zoom 20s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Half Slider - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/half-slider.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('images/road/road12.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/road/road14.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/road/road5.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1>Half Slider by Start Bootstrap</h1>
<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
<code>half-slider.css</code>file.</p>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The template works great but the zoom is not working at all.
Following is the link to my carousel code
https://jsfiddle.net/65jbbp2c/2/
Here I want the text below the image to move along with the respective slide.
The problem here is the text is out side "myCarousel"s scope.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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 text-center" role="listbox">
<div class="item active">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</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 id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2">
side2 text
</div>
<div class="side3">
side3 text
</div>
<div class="side4">
side4 text
</div>
</div>
</div>
First of all did you check the documentation for the caption option on bootstrap website (exactly what #HenryDev posted)
Otherwise you can use this code if it helps :
$('#myCarousel').on('slide.bs.carousel', function (e) {
// Hide all caption
$('div#slideCapstion div').addClass('hidden');
// Show the specific caption associated to the image
$('div#slideCapstion div.' + e.relatedTarget.dataset.caption).removeClass('hidden');
})
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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 text-center" role="listbox">
<div class="item active" data-caption="side1">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side2">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side3">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item" data-caption="side4">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</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 id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2 hidden">
side2 text
</div>
<div class="side3 hidden">
side3 text
</div>
<div class="side4 hidden">
side4 text
</div>
</div>
</div>
I just added data to your item containing the images and used the event handler from bootstrap to manage the current item shown and get the data-caption value to show the right one.
This code is basic but it does the job.
Here's a working solution. Hope it helps!
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.information').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.information').html(caption.html());
caption.css('display', 'none');
});
});
.container, .information {
width: 600px;
margin: auto;
color: #000;
}
.carousel-caption {
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 1 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 2 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 3 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 4 text</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="information"></div>
i am trying to use jquery to count the number of clicks made on a page and the time spent on the page and using sessions storage across pages. when the user clicks on a desired link it will then take them to a feedback page.
Here is the code that i have so far:
<!DOCTYPE html>
<html lang="en">
<!-- #BeginTemplate "Master.dwt" -->
<head>
<meta charset="utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Home</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<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.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="BenchMarking.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-2.2.0.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<script>
var pageLoadDate;
var benchTime;
var eventDate;
var eDiffpl;
$(document).ready(function() {
pageLoadDate= new Date();
$("*").click(function(e)
{
// Stop the function propagating up the DOM tree
e.stopPropagation();
// Get the interaction time
eventDate = new Date();
// <p data-islink="islink">dduiduihd</p>
// Check if this is the link we want
if ($(this).data() !== undefined)
{
// The right link has been clicked
benchTime = benchmarkDate();
eDiffpl = eventDate.getTime() - pageLoadDate.getTime() - benchTime;
sessionStorage.myTester = Number(sessionStorage.myTester) + eDiffpl;
// Then move to next page of experiment
window.location.url = "feedback_page.html";
}
else
{
// An incorrect part of the page has been clicked
sessionStorage.errorCount = Number(sessionStorage.errorCount)++;
console.log(sessionStorage.errorCount);
}
});
});
</script>
-->
<!-- #EndEditable -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="Footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<img src="William hill logo.jpg" alt="Vegas" width="100" height="47">
<!-- Example responsive navigation menu -->
<a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a><span onclick="displayBar()">Sports</span></a></li>
<li><span onclick="displayBar()">Games / Macau</span></li>
<li><span onclick="displayBar()">Scratchcards</span></li>
<li><span onclick="displayBar()">Vegas</span></li>
<li><span onclick="displayBar()">Virtual</span></li>
<li><span onclick="displayBar()">Financials</span></li>
<li><span onclick="displayBar()">Login</span></li>
</ul>
</div>
</nav>
<nav id="fixed-nav-bar2">
<div id="menu0" class="menu1">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ball Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Football</li>
<li>Basketball</li>
<li>Golf</li>
<li>Handball</li>
<li>Rubgy League</li>
<li>Rugby Union</li>
<li>Tennis</li>
<li>Cricket</li>
<li>Snooker</li>
<li>Pool</li>
<li>Volly Ball</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">International Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>American Football</li>
<li>Baseball</li>
<li>Basket Ball</li>
<li>GAA Football</li>
<li>GAA Hurling</li>
<li>Australian Rules</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racing<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Formula 1</li>
<li>Formula 2</li>
<li>Formula E</li>
<li>Moterbikes</li>
<li>cycling</li>
<li>Horse Racing</li>
<li>Greyhound Racing</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racket Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tennis</li>
<li>Squash</li>
<li>Badmington</li>
<li>RacketBall</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vitual Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>E-Sports</li>
<li>Virtual Greyhound Racing</li>
<li>Virtual Horse Racing</li>
<li>Virtual Football</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Other<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Boxing</li>
<li>UFC / MMA</li>
<li>Winter Sports</li>
<li>Darts</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- #BeginEditable "body" -->
<div class="container" class="first_body_element">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="sports%20betting.png" alt="sports betting" width="460" height="345">
</div>
<div class="item">
<a href="http://vegas.williamhill.com/http://vegas.williamhill.com/">
<img src="Vegas.png" alt="Vegas" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://macau.williamhill.com/#!/https://macau.williamhill.com/#!/">
<img src="Macau.png" alt="Macau" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://games.williamhill.com/#!/https://games.williamhill.com/#!/">
<img src="Games.png" alt="Games" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://scratchcards.williamhill.com/#!/https://scratchcards.williamhill.com/#!/">
<img src="Scratchcards.png" alt="Scratchcards" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://bingo.williamhill.com/http://bingo.williamhill.com/">
<img src="Bingo.png" alt="Bingo" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://poker.williamhill.com/http://poker.williamhill.com/">
<img src="Poker.png" alt="Poker" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Roulette.png" alt="Roulette" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Vegas%20Millions.png" alt="Vegas Millions" width="460" height="345">
</a>
</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>
<!-- #EndEditable -->
<script>
function displayBar(){
document.getElementById("fixed-nav-bar2").style.display = "block";
document.getElementById("myCarousel").style.paddingTop = "50px";
}
</script>
<footer>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
<li>Rules</li>
<li>Help</li>
<li>Contact us</li>
<li>William Hill Press Office</li>
</ul>
</div>
</nav>
</footer>
</body>
<!-- #EndTemplate -->
</html>
however with this code above i am unable to open my drop down menu which my desired link will be in.
the benchmarkDate() method runs end_date=new Date() 999 times in order to get the time, this cannot be changed
I am trying to make my bootstrap carousel the full width of the page, thinking that that will look the best. I've looked it up and nothing I tried worked, though. Also, if you think that making it a different size would be better, I would love to hear! I'm not great with layout and I'm trying to work on it. Also, my pictures are in SD even though they were HD. Should I link them in the same folder as my html and css files instead of getting them straight from the internet?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->
</div>
</body>
</html>
CSS
body {
padding-top: 50px;
padding-bottom: 20px;
}
.carousel img {
top: 0;
left: 0;
min-width: 100%;
height: 550px;
max-height: 550px;
width: auto;
}
Just remove the container like in this fiddle
https://jsfiddle.net/zdxq5c85/
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->
So everything appears to be working when I load up the html on bootply, but when I push it to my webpage (Github page) the carousel loads, but doesn't do any scrolling.
Heres the HTML I have pushed to the site, its exactly the same on Bootply except for the addition of the script near the top, which I read was needed to make it work, but it doesnt seem to do anything. It wasnt necessary on the Bootply apparently.
<head>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function(){
$('#carousel-content').carousel();
});
</script>
<body>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="nav">
<p><br><br></p>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About Me</li>
<li role="presentation">Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="potrait">
<p><br><br></p>
<img src = "https://lh3.googleusercontent.com/-eQB0B8kGRiw/AAAAAAAAAAI/AAAAAAAAAAA/gRPFLBygtI8/photo.jpg" class="center-block img-circle" height="200" width="200">
</div>
<div class="info">
<p><br><br></p>
<h1 class="text-center"> Matt Kowalczykowski </h1>
<h2 class="text-center"> Mechatronics Engineering Student </h2>
<p><br><br></p>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-centered">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1"></li>
<li data-target="#carousel-content" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://images.wisegeek.com/robots-assembling-car-bodies.jpg">
<div class="carousel-caption">
<h3>Mechanical</h3>
</div>
</div>
<div class="item">
<img src="http://seetech-corp.com/engineering/wp-content/uploads/2011/07/seetech-electrical-engineering-cabinets.jpg">
<div class="carousel-caption">
<h3>Electrical</h3>
</div>
</div>
<div class="item">
<img src="http://cdn.onextrapixel.com/wp-content/uploads/2013/07/clean-coding-best-practices.jpg">
<div class="carousel-caption">
<h3>Programming</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
You don't need that top JavaScript, but you do need to load the Bootstrap Javascript files. Preferably right before the
</body>
tag.
<script src="link/to/bootstrap.min.js"></script>
For you I think it would be dist/js/bootstrap.min.js
You're not including bootstrap.js.
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>