I have a carousel on angular web app which is supposed to move images on intervals but it is not working as expected, I can not figure out the reason behind --
here's my code
<div id="section1" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#section1" data-slide-to="0" class="active" ></li>
<li data-target="#section1" data-slide-to="1" ></li>
<li data-target="#section1" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img1.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img2.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img3.jpg" alt="...">
<div class="carousel-caption">
<!--h3>Caption Text</h3-->
</div>
</div>
</div>
</div>
Everything seems fine, what bootstrap plugin did you used, because the class you have applies requires bootstrap plugin. Please let me know which bootstrap plugin did you use...
try this CDN for bootstrap plugin. It works perfectly with mine
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Bootstrap jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Bootstrap javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
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 last year.
Improve this question
Anyone can help me how to make carousel like this?
I didn't found any examples or tutorial to make the carousel like this design.
my carousel design
you can use Bootstrap and play with column and row div ---
.content{
float:left;
width:100%;
padding:4em 1em;
text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="ny.jpg" alt="New York" style="width:100%;">
</div>
</div>
</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>
</body>
</html>
If you are talking about the 15px padding on the left then that’s the default padding on that bootstrap grid.
You can remove it with:
.carousel-inner .col-xs-5{padding-left:0}
However you should read the bootstrap documentation as there is probably a class or something you could add to offset this. (I’ve stopped using the actual bootstrap grids a long time ago.)
LINK BELOW:
https://www.sitepoint.com/community/t/bootstrap-slider-image-and-caption-side-by-side/113599/2
When I hit run or preview in a browser, I am using Chrome, a static view of all three slides stacked 1-3 is displayed. So they do not toggle through each one.
This is only not working on codeply which I use often. It does work on codepen and it does work once I add it to my html and CSS files through atom code editor. Its only codeply that it will not run and I have javascript and bootstrap packages installed in codeply.
.carousel-item {
height: 150px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Disregard this question. I wasn't saving my selected framework which was latest bootstrap version in codeply. It works fine.
im working with HTML and right now i just added a carousel item to my html project, my question is how can you display the carousel in the middle of the page since it appears at the left side.
www.littlebossworld.com
In this situation you have to use !important attribute because your carousel plugin is adding inline styles (maybe there is a setup where you can change this?).
"hard" css:
.fusion-carousel .fusion-carousel-wrapper {
margin: 0 auto !important;
}
this shows the example
This Code Help for you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<style>
.corosolstylelog {
margin: 0 auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: 0 auto;
}
</style>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var hight = $(window).height();
var hightforcourosol = ($(window).height() / 4) * 3;
var width = ($(window).width() / 2);
$('.carousel-inner img').css("height", hightforcourosol);
$('.carousel-inner a img').css("height", hightforcourosol);
$('.carousel-inner img').css("width", width);
$('.carousel-inner a img').css("width", width);
})
</script>
</head>
<body>
<div class="col-lg-2">
Left Side
</div>
<div class="col-lg-8 corosolstylelog">
<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">
<img src="Image/Carousel/a.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/b.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/c.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
Right Side
</div>
</body>
</html>
Hi I have very little coding experience and im very new to this so sorry if this is a silly question. I've been messing around with it but i cant figure out how to stop this code from displaying across all pages:
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide"
<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.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>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
</body>
</html>
<br>
<br>
<html>
<body>
<body>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</body>
</html>
<br>
I only want it to display on my websites home page but its appearing on every page. The code is in the layout file as i need it to appear above the page content and sidebar. Im editing the stores html through storenvy if that helps.Is there something i can add to the CSS or html that will stop it coming up on pages other than the homepage. Thanks in advance!
Don't use two <html> tags. A page starts with a <html> and ends with a </html>.
If you want multiple sections on a page just use <div> & </div> for start and end of div.
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide" <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.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>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</div>
</body>
</html>
I have copied the HTML below- I do not know why, but when i open this in a browser it is stuck on the first image and wont transition... I have included all the code below of my html. The CSS and JS files are the generic bootstrap files provided.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap test site</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</head>
<body>
<div class="container">
<div class="span8"> <img src="img/logo_title.png"> </div>
<div>
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here1</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here2</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here3</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here4</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
For any of the JS libraries in bootstrap, make sure that you include the actual library. In your case, you left out the carousel library. Other Bootstrap add-ons that require separate js files include modals, dropdowns, and tooltips.
Add it in:
<script src="/js/bootstrap-carousel.js"></script>
<script src="/js/jquery.js"></script>
You also included bootstrap.js twice.