I have the following code and I have linked to jQuery etc. However when I click to move the carousel it does the same thing as:
does.
Can anyone help me fix my code! Thanks in advance!
<div id="carousel-example-generic" class="carousel slide">
<!-- 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/slide1.jpg" alt="" width="100%" height="50%">
<div class="carousel-caption">
Test1
</div>
</div>
<div class="item">
<img src="img/slide1.jpg" alt="" width="100%" height="50%">
<div class="carousel-caption">
Test2
</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 id="wrapper">
</div>
<script type="text/javascript">$('.carousel').carousel()</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
You need to add the script tag for the carousel after initialising the jQuery library.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">$('.carousel').carousel()</script>
Related
How can I make all items inside this Owl carousel have the same height (as the tallest item)?
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 4
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x100"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
</div>
View on JS Bin
.image{
width:100%;
height:500px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<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">
<div class="item active">
<img src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="" class="image" >
</div>
<div class="item">
<img src="http://i.dailymail.co.uk/i/pix/2016/09/13/14/384A98B300000578-0-image-a-63_1473774825844.jpg" alt="" class="image">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/b1/7c/d0/b17cd0554537ceb0e816537bfcae09eb.jpg" alt="" class="image">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I am using the Full Slider bootstrap here and when I replace the image url by a image in a folder it does not work.
image:url('http://placehold.it/1900x1080&... One')
by
<img class="fill" src="background:url(./img/header.jpg)"></img>
On the bootstrap page, some guys had the same issues even if I tried different solution ../img or /img, it does not work.
Someone has a idea ?
thank you
here is the source code from Bootstrap, I changed
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
by
<div class="fill" src="img/header.jpg"></div>
<header 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" style=""></div>
<div class="fill" src="img/header.jpg"></div>
<div class="carousel-caption">
<h2>Caption 1</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>
</header>
Got it to work on local with this:
<div class="fill" style="background-image: url('img/picture.jpg')"></div>
Inside the wrapper DIV
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image: url('img/picture.jpg')"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
try this.
src = "img/header.jpg"
is there any solution for bootstrap slider image stretch problem for responsive view ? I don't want to set height default
http://getbootstrap.com/examples/carousel/
I tried with the above slider which is an default slider given in twitter bootstrap. when I included images in that slider it was stretching. If anyone faced this issue let me know the solution
I'm not sure if you already looking for this, but Bootstrap also provides a class for responsive images. Just added it to the img-tag.
HTML
<div class="slider">
<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="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 1">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 2">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 3">
<div class="carousel-caption">
<h3>Caption Text</h3>
</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 -->
</div>
JavaScript
$('.carousel').carousel({
interval: 3000
})
See it also on jsfiddle.
I am using bootstrap and I want to use the carousel in one page without sliding.
I've seen this effect can be removed by setting interval to false. The problem is that I want to have a sliding carousel in my home page but not in the rest. So changing this value is not a valid solution for me.
How can I solve this???
I've found that when we add data-interval="false" it stops sliding:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<div class="navigationBarImg">
<img src="/Images/Pictures/1254_1.jpg" class="image-responsive" alt="First slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1308_1.jpg" class="image-responsive" alt="Second slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1375_1.jpg" class="image-responsive" alt="Third slide">
</div>
<div class="container"></div>
</div>
</div>
<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><!-- /.carousel -->
I made a carousel using twitter-bootstrap, and it shows a couple pictures. Problem is, all of the pictures are different sizes and, right now, they aren't centered. Is there a way that the carousel can re-size to center each picture horizontally and vertically whenever the picture in question changes?
Here is code so far:
<div class="modal-body">
<div id="picture-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#picture-carousel" data-slide-to="0" class="active"></li>
<li data-target="#picture-carousel" data-slide-to="1"></li>
<li data-target="#picture-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/picture-1.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
<div class="item">
<img src="/images/picture-2.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
<div class="item">
<img src="/images/picture-3.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#picture-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#picture-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!--Carousel-->
</div> <!--modal-body-->
Thanks for any and all tips!
Use this Style to center images :-
div.carousel-inner img{
margin: 0 auto;
}