I'm using the bootstrap carousel as in its website and there are 3 slides that each contains an image and a div of texts.
I want to manipulate it as on slide change, the texts animated from right to left.
I've included the code snippet and I'll appreciate your help.
var $carousel = $('#myCarousel');
$carousel.bind('slide.bs.carousel', function(e) {
$('#myCarousel .item .container div').animate({
'top': '-50px',
'opacity': '0.5'
// transition: 'all 0.5s all 0.4s ease-in-out',
},500);
$('#myCarousel .item.active .container div').animate({
// transition: 'all 0.5s all 0.4s ease-in-out',
'top': '0',
'opacity': '1'
},500);
});
<!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="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: 70%;
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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
</div>
</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>
</div>
</body>
</html>
It may be that the issue is that you're attempting both of the animations in the slide.bs.carousel handler, so they are both being applied to the same element. If you break it up into the slide.bs.carousel (which happens before the slide) and slid.bs.carousel (which happens after the new slide) events, you'll have better control of the "pre"/"post" slide.
Check here for an example. I used slideUp instead of animate, but you should be able to replace with whatever animation you want. https://jsfiddle.net/sheldon_griffin/zz9nwng3/1/
$('#myCarousel').on('slide.bs.carousel', function(e) {
$('.carousel-caption').hide();
}).on('slid.bs.carousel', function(e) {
$('.active .carousel-caption').slideToggle('slow');
});
Related
I am trying to create a responsive Bootstrap carousel with a static hero header that stays the same when the carousel images change. The hero header has to be left-aligned to a responsive bootstrap container element as well as vertically centered inside the bootstrap carousel. I have tried searching for solutions but have come up empty. I have also tried using an "overlay" element with position: absolute, however, that doesn't allow me to left-align the hero header inside the bootstrap container element nor does it allow me to vertically align the hero header to the bootstrap carousel. This is what I want it to look like.
This is what I want it to look like.
This is what I have so far.
.heroOverlay {
z-index: 12;
position: absolute;
/* takes div out of document flow */
top: auto;
/* The distance between the div with the top of document */
left: 0px;
/* Make the div full width */
right: 0px;
/* Make the div full width */
margin: auto auto 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<header>
<div class="heroOverlay">
<div class="container">
<div class="jumbotron text-right bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Any help would be greatly appreciated. Thanks!
Welcome to stack overflow...
Check out the sample code
for smaller sizes, you may have to spell out the exact size of the fonts... similarly for very large screens, best for you to spell out the exact size of the fonts... because the fonts with units vw are dynamic with regards to size. Media queries will help you take care of these extreme cases.
HTML:
.heroOverlay {
z-index: 12;
position: absolute;
top: 30%;
left: 0px;
right: 0px;
margin: auto auto 0 10%;
width: 80%;
background: rgba(240, 255, 255, .5);
padding: 30px 0;
}
.heroOverlay h1 {
font-size: 5.5vw;
}
.heroOverlay p {
font-size: 3vw;
}
.heroOverlay a {
font-size: 2vw;
padding: .5vw 1vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="heroOverlay">
<div class="container">
<div class=" text-left bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
I try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" 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">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</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>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);
This is the first time I've ever used bootstrap. My bootstrap carousel only has indicators. Could this be because I haven't specified pictures yet.
See the following code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#2E2D88;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
<h1>Great food</h1>
<p>Taste what keeps people coming back</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
<h1>Great prices</h1>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
<p>
Blah blaha blahb lbahlbahbabablah balha blha blah blah
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
Related concerns: I'm not sure if I should be using bootstrap 4 or 3. I've heard bootstrap 4 compiles with sass but I don't know what that is. Can someone with more experience with this framework help me?
You need to link your images in the carousel-inner class.
check this for more details :
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
I wasn't able to get this working until I used examples from https://v4-alpha.getbootstrap.com/components/carousel/.
Here is what I came up with:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#3e4fa9;
border-radius:0px;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Welcome</h1>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/sampledining.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great food</h3>
<p>Taste what keeps people coming back</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/samplegyros7.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great prices</h3>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="jumbotron">
<p>
blah blah blah
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
So im trying to make a carousel full screen for a presentation. Im not a pro coder im in a phase of learning. I have this code and im having as you can see and error and the carousel is all broken and i dont know why. I could appreciate some guidance or help.
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
var $numberofSlides = $('.item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));
$('.carousel-indicators li').each(function(){
var $slideValue = $(this).attr('data-slide-to');
if($currentSlide == $slideValue) {
$(this).addClass('active');
$item.eq($slideValue).addClass('active');
} else {
$(this).removeClass('active');
$item.eq($slideValue).removeClass('active');
}
});
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
h3 {
display: inline-block;
padding: 10px;
background: #B9121B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<script src="sliderjava.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sliderstyle.css">
</head>
<body>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- Controlos -->
<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>
</body>
</html>
Please add jquery reference and it should be before the carouse script in your page.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
You are using bootstraps's carousel but you have not attached anything necessary to make it work unfortunately. Please make the following things to make your carousel work.
Attach Bootstrap's css.
Attach jQuery library.
Attach Bootstrap's javascript.
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
var $numberofSlides = $('.item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));
$('.carousel-indicators li').each(function(){
var $slideValue = $(this).attr('data-slide-to');
if($currentSlide == $slideValue) {
$(this).addClass('active');
$item.eq($slideValue).addClass('active');
} else {
$(this).removeClass('active');
$item.eq($slideValue).removeClass('active');
}
});
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
h3 {
display: inline-block;
padding: 10px;
background: #B9121B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="sliderjava.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sliderstyle.css">
</head>
<body>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- Controlos -->
<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>
</body>
</html>
First, sorry about my english.
I want to do a slider with transitions like this http://pumamaritimeservices.com/beta/ but with bootstrap, i did before a carousel but i don't know if i can do transitions like the first link.
My new slider is the next: http://pumamaritimeservices.com/beta3/
My code is:
<div style="height: 90%;" 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">
<!-- Set the first background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/01.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/01_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B9A004; padding: 5px 15px;">Cargo Surveys</span><br /><br /><span style="background-color: #B9A004; padding: 5px 15px; font-size: 20px">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/02.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/02_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #012540; padding: 5px 15px;">Containers and Cargo in Containers Surveys</span><br /><br /><span style="background-color: #012540; padding: 5px 15px; font-size: 20px;">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/03.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/03_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B81818; padding: 5px 15px;">More than 680 Lloyd’s Agents around the world</span></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Can I do any transition in my existing slider? I really need help with this, i don't want the tipical fade in and fade out, i want enter the image at the left and the text too, and it out at right
you can find more examples and tutorial from this links.
tutorialrepublic
and
mobirise