I need help to create a vertical image slider which slides the image automatically with interval.
HTML:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/1.jpg" />
</div>
<div class="item">
<img src="img/2.jpg" />
</div>
<div class="item">
<img src="img/3.jpg" />
</div>
<div class="item">
<img src="img/4.jpg" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 3000 });
});
</script>
I need the same thing vertically.
I would suggest you to use jCarousel or bxslider. Take a look at this and this for vertical-scroll example pf jCarousel and this for bxslider example
Here is a sample of how to use CSS3 and HTML5 to get the effect of a vertical slider.
https://jsfiddle.net/cd3oezzj/
Uses #keyframes rule. #-webkit-keyframes may be required for some browsers.
You can use
$(window).scrollTop()
just put this below:
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src= "js/bootstrap.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
$('#myCarousel').carousel({ interval: 2000, cycle: true });
});
</script>
plz maimtain the sequence as i maintain...
Related
I have a slider:http://sakura-city.info/test
The problem is that when changing images, the height of the slider changes, despite the fact that it is hard-coded in the tag.
<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<!-- <a href="{{route('createGirlPage')}}"> -->
<img src="<?php echo asset("public/images/anketa.jpeg")?>" class="img-responsive" height="200" width="200" >
<!-- </a> -->
</div>
#foreach($vip as $girl)
<div class="item" data-slide-number="0">
<img src="<?php echo asset("public/images/upload/$girl->main_image")?>" class="img-responsive" height="200" width="200">
</div>
#endforeach
</div>
<!-- main slider carousel nav controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Add some css for set equal height in class .item here, I am using height:200px
.item{ height:200px;}
And also add css for cover image complete box like here i am add css in .item img
.item img {
width: 100%;
height: 100% !important;
object-fit: cover;}
Your images are of different heights. Hence, you see this behavior.
Add a fixed height to the .item div
.carousel-inner>.active {
height: 150px; //this can be whatever you want
}
And remove the height="200" attribute from the images.
remove hardcoded width and height and put this into your stylesheet
.carousel-inner>.item>img, .carousel-inner>.item>a>img{
height:150px;
}
I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.
*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.
Please see an example of the choppy transition on JS Bin.
Here is the code for the carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel-example-generic" 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">
<img style="margin: 0 auto;" src="http://placehold.it/300x300">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/250x250">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/160x600">
</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>
</html>
It was chopping a lot because of the translation left/right so if u remove it it should be a lot better.
.carousel-inner .item {
opacity: 0;
transition: none;
transform: translate3d(0,0,0) !important;
}
.carousel-inner .active {
transition: opacity 1s ease-in-out;
opacity: 1;
}
but if u meant animate the height between different image sizes than u can use this jQuery:
$('.carousel').carousel().on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({
height: nextH
}, 1000);
});
CODEPEN
Another way you can use javascript to done that.
Example
In that code I add event listener for listen slide.bs.carousel that triggered from bootstrap, get height of active item then animate carousel-inner element height.
<div class="item active">
<div class="img" style="background-image:url('http://placehold.it/300x300')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/250x250')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/160x600')"></div>
</div>
Add style
.item .img {
height:600px; //Maximum height
background-repeat:no-repeat;
background-position:center center;
}
So i've got a problem with the sliding.
It just won't slide!
The pictures are more like hovering each other or fading, but there won't be any sliding movement.
Does anyone got an idea how this comes and what i did wrong?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<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>and</title>
<!-- Bootstrap CSS -->
<link href="stylesheets/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="carousel-example-generic" 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="images/Slider/Earth_slider.png" alt="...">
<div class="carousel-caption">
<h2>First Slider</h2>
</div>
</div>
<div class="item">
<img src="images/Slider/Rosetta_slider.png" alt="...">
<div class="carousel-caption">
<h2>Second Slider</h2>
</div>
</div>
<div class="item">
<img src="images/Slider/Showreel_slider.png" alt="...">
<div class="carousel-caption">
<h2>Second Slider</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/jquery.min.js"></script>
<script>
$('.carousel').carousel({
interval: 1000
});
</script>
</body>
</html>
You have the basic Bootstrap.js without the Carousel component.
Install Bootstrap.js with Carousel.js/.css otherwise, you need to add Carousel.js to your page separately.
You can choose the desired bundle here:
http://getbootstrap.com/customize/
You have to init jQuery:
<script>
$(function() {
$('.carousel').carousel({
interval: 1000
});
}
</script>
Or try with markdown into your div
data-ride="carousel"
You need carousel.js called in your script. Also you need to define your Javascript like
<script>
$(function() {
$('.carousel').carousel({
interval: 2000
});
});
Here is the fiddle you can try.
I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)
My carousel doesn't slide automatically. I can click through my pictures only.
The strange thing is that at one point I could of sworn it did work. I just dont know what I could have changed since.
Here's my code:
<div class="row-fluid">
<div id="slider" class="span5" style="padding:15px;" >
<div class="carousel slide" style="border:#fff 3px solid;" id="treatments">
<div class="carousel-inner">
<div class="item active">
<img src="img/sliderpic1.jpg" alt="massage">
</div>
<div class="item">
<img src="img/sliderpic2.jpg" alt="pedicure">
</div>
<div class="item">
<img src="img/sliderpic3.jpg" alt="waxing">
</div>
</div>
</div>
‹
»
</div>
<img src="img/logos.png" class="img-rounded">
</div>
Then just before the close body tag:
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Thanks in advance for all of your help, it's much appreciated!
You're setting up the carousel before you've included jQuery. Swap the <script> tags around:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>