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/
Related
I'm creating a simple carousel with HTML and JS. I have it mostly how I want it to look now, unfortunately there are a few issues:
Running The Snippet:
1) I want the caption to be in the space below the image, not on it. I've done what I can with CSS based on my minor skills and can't figure it out.
2) Also, I want the pictures resized and centred so the fit into the carousel, instead of most of it being cropped out.
Carousel Juts Out
1) I've made the website responsive, and the container has style="text-align:center;text-align: justify;". However if you look at the image below, in some cases when the browser window is minimised,the carousel juts out. How do I resolve this?
.carousel-caption {
position: relative;
left: auto;
top: auto;
bottom: -95px;
}
.carousel-inner {
overflow: visible;
padding-bottom: 95px;
}
#serviceSlider .item {
height: 400px;
}
#slide1{
background:url('https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg'); center no-repeat;
}
#slide2{
background:url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg'); center no-repeat;
}
#slide3{
background:url('https://cdn.pixabay.com/photo/2018/05/09/22/44/piglet-3386356_960_720.jpg'); center no-repeat;
}
<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>
<style>
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
margin: auto;
}
</style>
<div class="container" style="text-align:center;text-align: justify;">
<br>
<div id="serviceSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#serviceSlider" data-slide-to="0" class="active"></li>
<li data-target="#serviceSlider" data-slide-to="1"></li>
<li data-target="#serviceSlider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h3>Dog</h3>
<p>Cute Corgi.</p>
</div>
</div>
<div class="item" id="slide2">
<div class="carousel-caption">
<h3>Cat</h3>
<p>Cute cat.</p>
</div>
</div>
<div class="item" id="slide3">
<div class="carousel-caption">
<h3>Pigs</h3>
<p>Sleepy pigs.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#serviceSlider" 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="#serviceSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You don't have to do much just make some changes in class of caption carousel. Try copy and pasting to see if it works. No additional changes in css.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I am using bootstrap as a framework for a website I am helping with. On the front page of the website is a carousel. For some odd reason, the carousel "slide" transition is very smooth when clicking on the left arrow (PREVIOUS); however it seems to go all weird when clicking the right arrow (NEXT)
I've tried looking online as well as in the bootstrap files (CSS and JS)
I cannot seem to find anything. I've tried re-copying the code from the bootstrap website for carousels. Not sure what's wrong.
URL: www.acebac.org
Help? :D
Here is JQuery code:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.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: 5000,
pause: "false"
});
HTML code:
<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">
<img src="img/bg.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg2.jpg" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
</div>
<!-- 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>
See Demo:Demo Carousel Bootstrap
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'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>