<!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.
Related
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
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.
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, 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
}
I have been developing a theme with Bootstrap for my project. As I see there is something wrong with Carousel slider. I have read as much as questions and answers about Carousel here but there is no progress about my problem. I can't copy-paste the code that is seen not good when I paste it here between code tag.
I got the slider from Bootstrap: http://getbootstrap.com/javascript/#carousel
The problem is when I click next page on slider, the link is seen
http://example.com/#carousel-example-generic
<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>
and nothing happens after that. And also the first slide is not moving to the second one.
Please check if have all depency in site loaded:
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is an Working Example, copy it
http://codepen.io/anon/pen/pNRrPm
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img alt="First slide [900x500]"
data-src="holder.js/900x500/auto/#777:#555/text:First slide"
src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
<div class="item"><img alt="Second slide [900x500]"
data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
class="right carousel-control" 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>