I am trying to create a carousel which only works on mobile. On larger screens there should be a pretty standard grid row.
This is my current code:
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-4">
IMAGE
</div>
</div>
What I am trying to achieve is that the images are becoming a slider with only one image showing at a time on mobile devices with res lower than 650px.
Appreciate any help!
Thanks!
Check out this codepen I made.
It chekcs the device width (in pixels) and if its lower than 650 then its a mobile, so it shows the carousel, else it shows normal images.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="containerDesktop">
<img src="https://i.ytimg.com/vi/7PXLPzcIydw/maxresdefault.jpg" alt="car1" style="width:100%;">
<img src="https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/1-corvette-stingray-c8-2019-fd-hr-hero-front_0.jpg?itok=SEYe_vLy" alt="car2" style="width:100%;">
<img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/125:94/w_1994,h_1500,c_limit/Transpo_G70_TA-518126.jpg" alt="car3" style="width:100%;">
</div>
<div class="containerMobile">
<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">
<img src="https://i.ytimg.com/vi/7PXLPzcIydw/maxresdefault.jpg" alt="car1" style="width:100%;">
</div>
<div class="item">
<img src="https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/1-corvette-stingray-c8-2019-fd-hr-hero-front_0.jpg?itok=SEYe_vLy" alt="car2" style="width:100%;">
</div>
<div class="item">
<img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/125:94/w_1994,h_1500,c_limit/Transpo_G70_TA-518126.jpg" alt="car3" style="width:100%;">
</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>
CSS:
#media (min-width: 650px) {
.containerMobile {
display: none;
}
}
#media (max-width: 650px) {
.containerDesktop {
display: none;
}
}
Mobile Carousel
Related
This is my code. The carousel works but I need it to be mobile responsive and the images fit according to the carousel size no matter the size of the image. Your help is gladly appreciated.
So first how to make the carousel mobile responsive. Second how to make the images fit the carousel container no matter what the image size is.
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.item img {
width:100%
}
.carousel-inner{
background-size: cover;
}
</style>
<div class="container" style=" width:100%; height: 800px;">
<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" style=" width:100%; height: 800px !important;">
<div class="item active">
<img src="1.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="2.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="3.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="4.jpg" alt="New york" style="width:100%;">
</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>
You must add img-responsive class to your image to make responsive its for bootstrap 3 and bootstrap img-fluid is the class name.
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
How do I remove the white space above the carousel? I have tried everything I can think of and it isn't working.
I want to have a colored background with transparent / white backgrounded images. So the carousel has to have the background color of white, but when I add this it adds that white bar to the top of the carousel.
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/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: 70%;
margin: auto;
}
</style>
</head>
<body style="background-color: black;">
<div style="background-color: white; padding: 0px;" 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>
<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="https://pixabay.com/static/uploads/photo/2014/06/03/19/38/road-sign-361514_960_720.png">
</div>
<div class="item">
<img src="https://pixabay.com/static/uploads/photo/2014/06/03/19/38/road-sign-361514_960_720.png">
</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>
</body>
</html>
Remove the <br> from here:
<div style="background-color: white; padding: 0px;" class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
So, I'm working on making a slideshow using the bootstrap carousel. I want to have buttons that are inside the image, instead of buttons that are outside of the image. The code is below, you'll have to put it in a folder with images called photo1.jpg photo2.jpg and photo3.jpg.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Graphic design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale-1">
<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>
</head>
<body>
<div class="container-fluid">
<h1>Carter Goff Graphic Design</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class = "nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "container">
<br>
<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>
<li data-target="#myCarousel" data-slide-to="2"</li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="photo1.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo2.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo3.jpg" alt="photo" width="500">
</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>
</body>
</html>
Thanks!
You could do it with absolute positioning or you could just make the background of the element your picture and then you can put whatever you want over it:
.item1{
background: url(pathtothebackground);
//any other css for your item
}
<!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.