<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Carousel slide</title>
<!-- Bootstrap -->
<link href="styles/b/bootstrap.min.css" rel="stylesheet">
<link rel ="stylesheet" href= "css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mountain.jpg" alt="Mountain">
<div class="carousel-caption">
<h3>Mountain</h3>
<p>Lovely picture of a mountain.</p>
</div>
</div>
<div class="item">
<img src="img/sunset.jpg" alt="sunset">
<div class="carousel-caption">
<h3>Sunset</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is the image outcome I receive. I have no idea what I am doing wrong. Can someone help out please. I also need to :
have the background span the entire page, while the content still stays in the center area.
make the arrows to scroll small and over the image?
auto scroll it
First: You have a </div> missing below your second .item div.
Oh, I forgot: you have a space in your jQuery url before /jquery.min.js, that should be removed.
To achieve making the image centered and height always the same (first point):
#myCarousel {
height: 256px;
}
#myCarousel img {
max-height: 256px;
margin-left: auto;
margin-right: auto;
}
.carousel-inner {
text-align: center;
}
It scrolls automatically by default, to change interval add data-interval="<yourspeed>" either to your .carousel div fpr all images or to every .item div to get different intervals for each image. That was your third point.
Second I don't understand.
JSFiddle
I fixed the problem. It was with the correct placement of the fonts file. Also thanks for the help with the CSS!
Related
I'm learning bootstrap these days. I am developing a main page. But the carousal is not working. Please check the code and tell me which thing i'm missing in my code. I am just copy pasting the code of carousal from w3school. I don't know where i am missing. It'll be great if somebody can help me in this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="Solupo_h.png" width="500" height="180" class="d-inline-block align-top" id="header" alt="top header" loading="lazy" >
</a>
</nav>
<div id="ct">
<div class="corner "id="left_top"></div>
<div class="corner" id="left_bottom"></div>
<div class="corner" id="right_top"></div>
<div class="corner" id="right_bottom"></div>
<span>Winston Churchill</span>
<blockquote>
<p><i>“Success consists of going from failure to failure without loss of enthusiasm.” </i></p>
</blockquote>
</div>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="654-500x3002.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="654-500x3002.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="654-500x3002.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>
</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>
</body>
</html>
You may not have downloaded the bootstrap stylesheet or javascript assets. The code is fine since you mentioned that you copy pasted the code directly from w3schools.
You need the following files downloaded and added to your folder:
css/bootstrap.min.css
js/bootstrap.min.js
OR
You can just paste the following in your <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And you can add the following at the end of your <body> tag:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Hope that helps!
Generally I am always way over my head with programming, but I'm doing my best. Please be nice!
I watched a nice tutorial on YouTube in order to build myself a carousel in my Django project.
But instead of showing one image at a time it is just stacking all three on top of each other. I'm sure there's something simple that I've missed.
Please help me to fix this with a minimal of code change.
Here is my current HTML code. I don't believe the CSS is important at this point:
<div class="container-fluid" id="main-container">
<div class="row">
<div class="col-sm-12">
<div id="slider" class="carousel slide" data-ride="carousel">
<!-- indicators (dot nav): -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides: -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-fluid" src='{% static "images/carousel1.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>Text here</h1>
</div>
</div>
<div class="item">
<img class="img-fluid" src='{% static "images/carousel2.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>More text here</h1>
</div>
</div>
<div class="item">
<img class="img-fluid" src='{% static "images/carousel3.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>Even more text here</h1>
</div>
</div>
</div>
<!-- next/prev navigation controls: -->
<a class="left carousel-control" href="#slider" 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="#slider" 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>
And in case the version of Bootstrap is where the problem lies, here is my meta, which has the version of Bootstrap I am using on the project:
<head>
<title>HCMN : {{ page_name }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load CSNs (same for all templates): -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Load CSS files (from each template): -->
{% block load_css %}
{% endblock %}
Thank you SO MUCH for your help!!
Aha! Nevermind. I needed "carousel-item" as a class instead of "carousel"! I love it when I can answer my own questions...
I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.
Please find the snippet below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div> <!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left coursel-control" href="#mySlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right coursel-control" href="#mySlider" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- END: Slider -->
</div>
</div>
</div>
</body>
</html>
I get the scrolling and everything but the right "Indicator" to scroll does not appear
What am I doing wrong?
Thanks
Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div><!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END: Slider -->
</div>
</div>
</div>
</body>
So here is another instance of the million questions asking why Bootstrap's carousel isn't working. From what I can tell though, no one else has the same problem as me. You probably don't believe me, and maybe I don't fully believe myself either. Anyways, here goes.
So my code is a literal copy and paste from Bootstrap's carousel example, with some minor changes here and there. Feel free to copy paste into your own html file and view it. I've included Bootstrap's css and javascript, I've included jquery, and I've initialized my carousel. What specifically isn't working is the left and right buttons. Their expected behavior is to cycle through the images in each item div, but what actually happens is nothing. The carousel didn't work when copied from the example's page source, and it didn't work after I made my changes.
As a note, I did see the warning about viewing the page via a file:// URL, and the code doesn't work when hosted to an S3 bucket either.
First one to point out why I'm dumb gets free points!
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- Carousel
================================================== -->
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://www.mountainprofessor.com/images/Mountain-Ranges-Colorado-2.jpg" alt="First slide" style="width:100%;height:500px;">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://7-themes.com/data_images/out/50/6943013-mountain-lake.jpg" alt="Second slide" style="width:100%;height:500px">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Example text.</p>
</div>
</div>
</div>
</div>
<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><!-- /.carousel -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
</body>
</html>
Check your browsers console
Do you See
Uncaught Error: Bootstrap's JavaScript requires jQuery
It looks like its not loading Jquery 1st
The order of the scripts should be like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container" style="margin-top:20px;">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li class="active">
Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
</div>
<div class="col-md-8">
<div id="mycar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/image-slider-2.jpg">
</div>
</div>
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycar" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
This is my full code what problem is occuring is that carousel slide is not properly functioning. When page is loaded first time the image slider works means when we click slider arrow (either of them weather left or right) it works and image does change. But after first attempt it does not change or slide the image. other problem is that slide indicator links are also not working.
Seems like something is conflicting. Build the "mycar" Div as following
<div id="mycar" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/demo-slider-2.jpg">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#mycar" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
Hope this helps .. if it does help me earn reputation .. or if you seek more help please let me know.