So guys, I have a carousel which works perfectly. Now I want to be able to modify it slightly so heres my script:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" id="1">
<center>Images go here!</center>
</div>
<div class="item" id="2">
<center>Imsdfsdfsfsdfsdfsdfsfsdfsdf</center>
</div>
<div class="item" id="3">
<center>Imasdfsdfsdfsdfre!</center>
</div>
</div>
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<br /><br />
<div class="container">
<ul style="float:left; margin-top: 200px; display:inline-block;">
<li style="display:inline-block;">Dashobard</li>
<li style="display:inline-block;">Timeline</li>
<li style="display:inline-block;">Visionboard</li>
</ul>
</div>
</div>
Works as you would expect - now underneath I would like to have 3 links say, link1, link2, link3 that when you click it changes the slide in the carousel, in addition to this I am looking to ad a captionhttp://jsfiddle.net/iamdanbarrett/CbtT9/ underneath each of those links. see my example image - I have tried using the current controls and tried to modify them with no success.
Here is a fiddle: Fiddle
If you want to achieve something like this this is what you have to do:
HTML code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item" id="id1">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item" id="id2">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item" id="id3">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="container">
<ul>
<li style="display:inline-block;">Dashobard</li>
<li style="display:inline-block;">Timeline</li>
<li style="display:inline-block;">Visionboard</li>
</ul>
</div>
JavaScript code:
function slideTo(valoare){
if (valoare == 0) $('#myCarousel').carousel(0)
if (valoare == 1) $('#myCarousel').carousel(1)
if (valoare == 2) $('#myCarousel').carousel(2)
}
And the CSS code i've used for this example:
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}
.container {
text-align: center;
}
ul {margin: 0;}
Here is the jsfiddle
This example uses .carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
Update 1:
Result here
Code here
Update 2:
Result here
Code here
You can try something like this..
http://bootply.com/113737
This example uses the data-target and data-slide-to navigate to specific slide.
Related
I have created a slider, it works fine but when I slide to next contents it shows the random images in the slider. I want to show these images as I have added them into the code. I don't want randomly sliding images.
Javascript
$('#myCarousel').carousel({
interval: 000,
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
HTML
<div class="carousel slide" id="myCarousel3" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="computers/img/dell.jpeg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/acer.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/asus.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel3" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel3" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
in your for loop just change
for (var i=0;i<1;i++) {
i < 2 to i < 1; I hope this is what you want, As i tried this and get the result are in sequence.
please check
https://codepen.io/atulraj89/pen/zjRwxR
And if you want result to be something else,pls explain.
So I found an example on Bootstrap with Jquery and bootstrap.
HTML:
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('computers/img/dell.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a computer from Dell</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/acer.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a computer from Acer</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/asus.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a computer from Asus</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>
CSS:
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In your HTML you need to add the CSS, Jquery and bootstrap js.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<link href="css/your_css.css" rel="stylesheet">
Source: https://startbootstrap.com/template-overviews/half-slider/
I need to make my bootstrap 3 carousel-caption take half of my carousel, to make caption background-color a little transparent, and write some text into it.
So the logic is that in carousel background I will have pictures and for every picture caption will take half of carousel whit custom text.
See my JSFIDDLE example, and I want to make it like this.
So far I manage to set up background of carousel-caption, and I know how to pull it to the left, the problem is right side, it's just confusing how does float: right want work, further more there is a small padding-bottom so how can I remove this? Can any one help me over come this and build it properly, thanks.
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<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>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" />
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" />
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" />
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</p>
</div>
</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>
Carousel CSS:
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 0px;
}
.carousel-caption {
position: absolute;
left: auto;
right: auto;
width: 50%;
height: 100%;
background-color: #428bca;
opacity: 0.8
}
You were very close - I added a reference to jquery in your fiddle, but the alignment issues you were facing were resolved by using the bottom and right properties. Float was not the way to go here, since you already had .carousel-caption positioned absolutely, I just added a right:0, and a bottom:0 to your class.
.carousel-caption {
position: absolute;
left: auto;
right: auto;
width: 50%;
height: 100%;
background-color: #428bca;
opacity: 0.8;
bottom:0;
right:0;
}
See the updated Fiddle here
https://jsfiddle.net/jy989rkt/4/
I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <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.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG
I have downloaded bootstrap and have the following code in the head section
<link ref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
However I want my whole slider to be 100% in width and the images to be 80% wide however my images although I have used margin-left: auto;
margin-right: auto; doesn't want to centre it creeps over to the right.
My code is
<div id="the-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
<li data-target="#the-slider" data-slide-to="3"></li>
<li data-target="#the-slider" data-slide-to="4"></li>
<li data-target="#the-slider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 1-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
</div> <!--carousel-inner-->
<!--controls-->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--the-slider-->
<!--container-->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
#img {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#the-slider {
width: 100%;
}
</style>
As you will see it creeps to the right, look at photo attached to see what I mean. Its only slight but I NEED it central!
If you are using the class .img-responsive, you need to use margin:0px auto to center.
Hint, set the width you want, to a parent div, and center the image with margin: 0px auto;
I have tried to simulate your problem on JSFiddle. The aligning should be fine with just:
img {
margin: auto auto;
}
https://jsfiddle.net/e1mw6myL/
I just got some random pictures in it. The first picture is smaller than other.. It could be that your image is too big (there is a max-width: 100% on .img-responsive)
Try using other images and look if those images give you the same problem.
I'm trying to edit the interval for the slider with a .carousel script within the html but it doesn't seem to be working. I am also trying to edit the carousel to achieve something like this:
but I can't seem to find what to edit and what to edit it with.
Here's code
<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="border-radius:25px !important; overflow:hidden !important; background-color:#2a2a2a !important;">
<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" style="overflow:hidden; background-color:#2a2a2a;">
<div class="item active" style="border:3px solid #d9534f; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img001.jpg" alt="Img1" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game1">Game1</a>
</div>
</div>
<div class="item" style="border:3px solid #5cb85c; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img002.jpg" alt="Img2" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game2">Game2</a>
</div>
</div>
<div class="item" style="border:3px solid #f0ad4e; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img003.jpg" alt="Img3" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game3">Game3</a>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev" style=" overflow:hidden;">
<span class="icon-prev">‹</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next" style=" overflow:hidden;">
<span class="icon-next">›</span>
</a>
</div>
</div>
$('#myCarousel').carousel({
interval: 9000
});
There are two ways to set interval for slider, one is
Data Attributes method: (Mention data-interval at your carousel slide div)
<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
--
--
</div>
</div>
Oher method is with javascript:
Add following script at end of your HTML file:
<script>
$('#myCarousel').carousel({
interval: 9000
})
</script>