Hey i am trying to implement carousel on page. but issue I am facing is only active image is showing on screen. images are even not moving ie the second and third image is not showing despite beign present in the folder.
I put images in same folder where my index.html file reside.
Please help. My code snippet is below:
<!-- carousel here -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="slide_1.jpg" alt="Sale 1" class="img-responsive">
<div class="carousel-caption">
<!-- caption here -->
</div>
</div>
<div class="item">
<img src="slide_2.jpg" alt="Sale 2" class="img-responsive">
<div class="carousel-caption">
<!-- caption here -->
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">
<span class="icon"></span>
</a>
</div>
<!-- div Carousel ends here -->
Do you have the following on the page?
$('.carousel').carousel({
interval: 2000
});
http://getbootstrap.com/javascript/#carousel-methods
Have you included the following scripts in your head tag?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
Related
I was trying to recreate a navbar/header/slider like this https://matchthemes.com/demohtml/dina/index.html
However, I have an issue with my carousel slider image. It looks fine when it is in webpage form, but when I shrink it to a mobile form, my image does not resize to the same as my carousel slider. Below is an image of what I mean.
mobile form
website form
This is my HTML for the carousel slider
<section class="container-fluid carouselcontainer">
<section 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>
</ol>
<!-- Wrapper for slides -->
<section class="carousel-inner">
<section class="item active">
<img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
</section>
</section>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</section>
</section>
This is my CSS. It's only 1 line. It is the only way I know to resize the carousel and the image
.carousel-inner {
width:100%;
height:830px;
}
You can use image in background with "background-image:url('..');" like
<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>
You need to some CSS in item class to adjust images what you want.
Example
.item{
width: 100%;
height: 100%;
background-repeat: no-repeat ;
background-size: cover ;
background-position: center ;
}
How about letting a browser pic the best image?
img {
max-width: 100%;
}
and read the following link
https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html
and use "img srcset"
This is Your Solution
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
</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>
You Can Edit or Preview Code Here Also Code Link
Try to make the width of your carousel image 100%
.carousel-inner .item img {
width: 100%;
}
There is an grey area (shown below in the image) right of the images. If I center the image inside the carousel, the grey area is evenly divided left and right of the image. Is there a way to remove this and make the carousel same size as the images.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- 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.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Extra space
Based on your images is 800px wide, this rule fixes that
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
Stack snippet
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- 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.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
One quick fix, add this css:
.carousel-control.right,
.carousel-control.left {
background: transparent!important;
}
The gray areas are background colors for the control buttons. Even if the image is aligned left, it is still there, it's just harder to see.
Check here
This is my first carousel project and I have a question on the proper/preferred way of adding hyperlinks to the images. Here is my item format (using w3school's example):
<div class="item"><a href="videos/Reports.mp4" target="_blank">
<img src="graphics/reportsCarousel.png" /></a>
<a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
<p>Reports</p>
</div></a>
</div>
Notice I have both the image and the caption linked, because the caption div caused a dead spot so that only the top and bottom of the image was active, i.e., clickable. I tried putting the caption in the image, but didn't like the results. I also tried moving the caption above and below the image, but the caption didn't display. I really like the way this looks, but wonder if there's a better way to set up the link?
Extra Credit: Also, I wonder if there is a way to have two or three images display side-by-side using the current div setup? When I put the second image into the item div the images display vertically instead of horizontally, even using an inline ul. I can do it using a more complicated method, but if I can easily tweak this one it would save me a lot of time.
I had some time today and put this together. It seems to work.
However, I am not sure it addresses your issues since, lacking a [mcve], I cannot reproduce your issues.
I added the JS to log the click event to console - you may or may not need it in your final version (again I am unsure of what you need since the code you provided is not complete/verifiable)
Please note
that the runnable snippet below is inside a frame and the x-frame-options is set to SAMEORIGIN so the link will not actually work here (you will need to copy/paste into your own page to see the links work)
$(function() {
$('.item').on('click', function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
window.location = $(this).find('a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 1</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 2</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 3</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 4</h3>
</div>
</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>
Doesnt't work. With that code you find the first href ever.
Try this one:
$(function() {
$( ".item" ).each(function(index) {
$(this).on("click", function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
});
});
});
I am using Bootstrap and I am using Carousel to display a few pictures. I have it all in place and the first picture shows, however when you click the right and left Chevron's it doesn't take you to the next picture.
I am a little new to HTML / CSSl and definitely Bootstrap. Any help is appreciated.
Thanks. My Carousel code is below.
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/type.jpg" alt="typewriter">
<div class="carousel-caption">
<h3>The Header</h3>
<p>Header Text</p>
</div>
</div>
<div class="item">
<img src="img/pad.jpg" alt="scratchpad">
<div class="carousel-caption">
<h3>Second Header</h3>
<p>Second Text</p>
</div>
</div>
<div class="item">
<img src="img/screen.jpg" alt="monitor">
<div class="carousel-caption">
<h3>Third Header</h3>
<p>Third Text</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You probably forgot the bootstrap js file. can you include your header as well?
Make sure you have a link to bootstrap js (as well as css) in the html header
From the bootstrap site:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I'm still very new to bootstrap/programming html in general as this is a new hobby. I have difficulty using the carousel properly and the next questions should take seconds to anybody I guess but I've been messing with codes for an hour and I can't still find why...
I copy/pasted the given code on bootstrap's site and filled the fields with proper items (used .svg for bg img, named the id differently but changed all the other ids too.). Maybe someone could tell me why the indicators/img are not fitted properly. i.e.: indicators are at the top left corner just like any other ordered list bullets and img show underneath them.
in head there is
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
---
<div class="container">
<!-- CAROUSEL -->
<div id="mon-carousel" class="carousel slide" data-ride="carousel" style="width: 450; height: 250; margin-left: auto; margin-right: auto;>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mon-carousel" data-slide-to="0" class="active"></li>
<li data-target="#mon-carousel" data-slide-to="1"></li>
<li data-target="#mon-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 1</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mon-carousel" 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="#mon-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- CAROUSEL -->
</div>
Your webpage is most probably missing the required bootstrap files.
Add this line to your <head>....</head> section:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
And this line below your jQuery script line:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
I realized that when I used style in the carousel's div it was the source of the problem... I guess I'll have to find an other way around to size the carousel.