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>
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 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 building a website using Bootstrap but I can't make the carousel work at all, the left and right nor the indicator will change the slide.
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
this is the html markup, the carousel is displayed corretly and the slideshow work automatically but I can't go to the next/prev slide.
I tried to include this script:
$('.carousel').carousel({
interval: 3000
})
$('.carousel-control.left').click(function() {
$('#slide').carousel('prev');
});
$('.carousel-control.right').click(function() {
$('#slide').carousel('next');
});
still no luck, and yes bootstrap.js is linked to the html.
Any advice?
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
The indicators are not working cause the data-target is the id of carousel not slide.
data-target="#slideshow"
Your controls are outside the div#slideshow, remove the </div> just before the controls html code
You have a tag '</div>' unusefull just before 'Carousel Nav' comment :
Bootply : http://www.bootply.com/zqAmnp3ekY
Code :
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- </div> COMMENT THIS LINE-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
I am using Twitter Bootstrap 3 and have got a carousel working of 8 images. It shows 4, then jumps to the next 4. At the moment, one must use the left and right arrow buttons (or wait a few moments) for the carousel to change. How can I make it so there is a continuous, slow scroll through the items in the carousel? I don't want it to jump from set of 4 to the next, I want a continuous scroll.
The first thing you need to do is copy and paste the following code into your HTML file. You’re encouraged to change the carousel-example-generic id to something more unique. If you do, make sure to reference it properly throughout the markup. We also used placeholder images that you’ll need to replace with your desired slider images.
http://jsfiddle.net/2qWy8/21/
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</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> <!-- Carousel -->
There is also solution with JS, but tell me and i will edit my answer, is this what you need?
UPDATE
Then use another widget, not this one
Here is reference to plugin
http://www.codicode.com/demo/endless_scroll/\
Use like this
$(window).load(function () {
$("#divID").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true });
});
My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.
<div class="item active">
<img src="http:\\placehold.it\32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\\placehold.it\42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\\placehold.it\52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
Fiddle