I'm working on a bootstrap carousel and have it functioning except for one bit. Whenever the slide changes, the new slide is twice as high as the old. When the slide becomes active the image drops down into the correct position.
Here's what I've got.
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class="active"></li>
<!-- <li data-target="#carousel-id" data-slide-to="1" class=""></li> -->
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/surf2.png" style="margin-left: auto; margin-right: auto; padding-top: 15px;">
<div class="container" style="text-align: center;">
<h1>One Microsoft Story for Healthcare</h1>
<p><a href="#" >Connect ></a>  <a href="#" >Request a Demo ></a> </p>
</div>
</div>
<div class="item">
<img alt="First slide" src="images/tablet2.png" style="padding-top: 15px; margin-left: auto; margin-right: auto;">
<div class="container" style="text-align: center;">
<h1>One Microsoft Story for Healthcare</h1>
<p><a href="#" >Connect ></a>  <a href="#" >Request a Demo ></a> </p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
I had the same problem, and deleting the 'slide' class seemed to do the job for me.
BGiezen's answer is good but try adding 'carousel-fade' after removing 'slide'
It looks better.
Click here for docs
Change top position from 0 to 10px in...
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 10px;
width: 100%;
}
Related
I'm trying to make an automatic image slideshow using only html and css. I finally found a simple tutorial on how to make one except i slightly changed the code to make my images move left instead. Right now, the problem I'm facing is that only 1 out of my 2 images is showing up. Why is this?
.maincontainer{
position: relative;
width:100%;
height:500px;
overflow:hidden;
}
.maincontainer > img{
position:absolute;
float: left;
animation: sliding 20s infinite;
left:0;
width: 100%;
height:auto;
}
#keyframes sliding{
0%{left:0px}
10%{left:0px}
20%{left:-700x}
30%{left:-700px}
40%{left:-1200px}
50%{left:-1200px}
60%{left:-1500px}
70%{left:-1500px}
80%{left:-2400px}
90%{left:-2400px}
100%{left:0px}
}
.sliding {width:100%; height:0px; padding-bottom: 50%; overflow:hidden; position:relative; }
<div class="maincontainer">
<img src="pictures/stove.jpg" alt="slide1">
<img src="pictures/hp.jpeg" alt="slide2">
</div>
I faced a similar kind of problem, so I think this code should work according to your problem:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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" style="border-radius: 5px;">
<div class="item active">
<img src="Images/oneplus-7-pro-hero-image.jpg" alt="" style="width:100%; height: 375px;" class="img-responsive">
</div>
<div class="item">
<img src="Images/huawei-p30-singapore-prices.png" alt="" style="width:100%; height: 375px;" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background: transparent; width: 25px;">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="background: transparent; width: 25px;">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.
#slider .item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<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>
<div class="carousel-inner">
<div class="item active">
<img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide2">
<img src="../../assets/public/5.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide3">
<img src="../../assets/public/cardrive.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>
Is there any mistake I am doing with the code? I think #slider is not working in angular 7.
As I already explained here (marked as duplicate but nothing happened):
You have to give all items (pictures) of the carousel the class
carousel-item but you only gave them the class item. Same with the
Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave
them the class carousel-control.
The rest seems to be working just fine! When handling Bootstrap you
always have to look out for the classes since they have to be exactly
right for it to work at all. (You could also probably remove the
popper.js-script at the bottom since it is not used at all.)
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control
classes as I did here:
#slider .carousel-item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
.carousel-item>img {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide2">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have the same problem like that.
You must be careful to read again Getting Started carousel focused on Dependency.
https://ng-bootstrap.github.io/#/getting-started
Don't forget to add BootstrapCDN (content delivery network) in your HTML file:
https://www.bootstrapcdn.com/
this is my BootstrapCDN in my workspace:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move?
html:
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<aside class="rightSideSection container clearfix">
<header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
<ul class="popularList">
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</aside>
CSS:
#carouselSlides{
display: inline-block;
width: 700px;
justify-content: center;
}
.carousel-inner img{
}
/*right side bar*/
.rightSideSection{
background: #ffffff;
width: 280px;
float: right;
margin-top: 40px;
}
.rightSideSection h1{
font-size: 30px;
}
.popularList li{
margin-left: 20px;
}
maybe this can work for you, to align the carousel to center:
<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>
Here basically the "carouselSlides" is contained in a div
providing the div styles as:
div{
text-align: center;
text-align: -webkit-center;
}
I have been trying to solve a problem that I have on a website that I am building. The website displays correctly on a desktop browser when it is normal size, but when you make the browser window small or view the site on a mobile phone, I have a layer that overlaps with the footer div on the page.
Please look at this image of the problem:
The layer with the div that overlaps my footer has a class of logodiv, here is my css code for it:
.logodiv{
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: block;
}
The heading has a ID name of logoheadline and has the following css
#logoheadline{
font-family: 'Anton', sans-serif;
font-size: 58px;
position: relative;
}
Lastly my footer has a class name of footerz and it has the following css:
.footerz{
background-color: #323232;
min-height: 200px;
color: white;
font-family: 'Quicksand', sans-serif;
}
the intro-p div has the following css:
.intro-p{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
position: relative;
}
this is the html I have:
<section id="section01" class="demo">
<div class="col-md-12" id="main-bd">
<div class="col-md-4 col-md-offset-1 logodiv" >
<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">
<div class="item active">
<img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
</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 class=" col-md-6 logodiv" >
<br>
<h1 id="logoheadline">Getting together has never been easier! </h1>
<p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>
<button class="gbtnHollow">Download</button><br><br><br>
</div>
<span></span>
</div>
</section>
<section id="section02" class="demo2">
<div class="container-fluid footerz">
<div class="col-md-2">
<br>
<ul id="footerul">
<li><a href='privacy.html'>Privacy Policy</a></li>
<li><a href='terms.html'>Terms & Conditions</a></li>
<li><a href='#'>Ads</a></li>
</ul>
</div>
<div class="col-md-4">
<br>
<div class="col-md-4 col-md-offset-2">
<ul id="footerul">
<li>Contact Us</li>
<li><a href='#'>Our Story</a></li>
<li><a href='#'>Press Kit</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<br>
<div class="col-md-12 ">
<ul id="footerul">
<li><a href='#'>Jobs</a></li>
<li><a href='#'>Angel Investors</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<br>
<!--This is where all the social media buttons need to go.-->
<ul class="list-inline" >
<li> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </li>
<li> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </li>
<li> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </li>
</ul>
</div><br>
<div class="col-md-12" style="text-align: center;">
<br>
</div>
</div>
</section>
I have been scratching my head for a while, can someone tell me what are my missing?
Remove that top :50% from your logindiv. top is used with position property of Css that may have created problem in your code. Basically avoid using position forcefully. Use them where when it is required.
You are using col-md- class only , that's why you have faced this issues, you can simply fix this you can add col-xs- classes instead of col-md- class , after 1200px col-md- classes getting 100% width
I've got a carousel that has a width:100% and a height:831px on a fluid layout. I am having problems centering the images that are 3600px wide by 831px high. I need the images to be centered on all viewport widths and resolutions.
I've tried to use transform:translateX, but the images always end up at left:0.
This is what I have:
<div class="mainTopVisual clearfix">
<div id="m_top-visual" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#m_top-visual" data-slide-to="0" class="active"></li>
<li data-target="#m_top-visual" data-slide-to="1"></li>
<li data-target="#m_top-visual" data-slide-to="2"></li>
<li data-target="#m_top-visual" data-slide-to="3"></li>
<li data-target="#m_top-visual" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/main/j1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="images/main/j2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="images/main/j3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev">
<span class="main_top-visual flaticon-left-arrow" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next">
<span class="main_top-visual flaticon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default">
<span class="flaticon-arrows-3"></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default">
<span class="flaticon-pause-bars"></span>
</button>
</div>
</div><!-- /.carousel -->
</div>
and this is the CSS:
<style>
div.mainTopVisual{
margin-top:0;
padding-top:0;
padding-bottom:0;
}
.m_top-visual_inner{
width:100%;
margin:0;
position:relative;
}
.carousel {
height: 831px;
margin-bottom:0;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;}
.carousel .item {
height: 831px;
width:3600px;
background-color: #000;
}
.carousel-inner > .item > img {
position: absolute;
width:3600px;
height:831px;
top:0;
left:50%;
transform:translate(-50%, 0);
max-width:none;
}
</style>
Thank you very much in advance for your help.
For those having the same problem, I found the answer here http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/