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');
}
}
);
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'm trying to adjust my Bootstrap slider hight as browser screen hight but couldn't get properly.
I know this question already asked on StackOverflow but didn't found a better solution.
I found one solution by setting height = 85vh but slider images looked stretched on big screens.
I attached the slider screenshot below,
I also added below my current code snippet
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner>.item {
height: 85vh;
}
.sliderBG>.item>img {
height: 85vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
You can change only your CSS part and get fun..!
.sliderBG>.item>img {
display: block;
height: 100%;
max-width: inherit;
width: auto !important;
margin: 0 auto;
}
That is because you're trying to make height responsive but at the same time stretching the image with respect to its width not height.
What you can do?
Well you can set the height to 100% instead of the width for the images in slider and set the margin to auto to align it to center;
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner .item{
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
But if you want to fill the complete slide and don't mind clipping off the image then:
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner item img{
height:100%;margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div 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">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
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');
});
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