I am not able to display images in carousel through image URL(JSON data). I am trying to set attribute using attr() in jquery but cannot achieve desired result. Here is my code:
<div class="col-md-8">
<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="1"></li>
</ol>
<!-- Wrapper for slides-->
<div class="carousel-inner">
<div class="item active">
<img src="" alt="myimage1" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage2" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage3" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</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>
In .js file:
$(document).ready(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) {
console.log(json);
console.log(json.articles.length);
for(var i = 0 ;i<3;i++){ //As my carousel contains only 3 images
$(".item").attr("src",json.articles[i].urlToImage);
}
});
});
The JSON response of API:
$(".item").attr("src",json.articles[i].urlToImage);
should be
$(".item img").attr("src",json.articles[i].urlToImage);
Related
Following is the link to my carousel code
https://jsfiddle.net/65jbbp2c/2/
Here I want the text below the image to move along with the respective slide.
The problem here is the text is out side "myCarousel"s scope.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</div>
</div>
<!-- Left and right 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>
<div id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2">
side2 text
</div>
<div class="side3">
side3 text
</div>
<div class="side4">
side4 text
</div>
</div>
</div>
First of all did you check the documentation for the caption option on bootstrap website (exactly what #HenryDev posted)
Otherwise you can use this code if it helps :
$('#myCarousel').on('slide.bs.carousel', function (e) {
// Hide all caption
$('div#slideCapstion div').addClass('hidden');
// Show the specific caption associated to the image
$('div#slideCapstion div.' + e.relatedTarget.dataset.caption).removeClass('hidden');
})
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active" data-caption="side1">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side2">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side3">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item" data-caption="side4">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</div>
</div>
<!-- Left and right 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>
<div id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2 hidden">
side2 text
</div>
<div class="side3 hidden">
side3 text
</div>
<div class="side4 hidden">
side4 text
</div>
</div>
</div>
I just added data to your item containing the images and used the event handler from bootstrap to manage the current item shown and get the data-caption value to show the right one.
This code is basic but it does the job.
Here's a working solution. Hope it helps!
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.information').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');
$('.information').html(caption.html());
caption.css('display', 'none');
});
});
.container, .information {
width: 600px;
margin: auto;
color: #000;
}
.carousel-caption {
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="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>
<li data-target="#carousel-example-captions" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 1 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 2 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 3 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 4 text</h3>
</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>
</div>
<div class="information"></div>
Is there a way to have multiple generic bootstrap carousels without IDs on a page work separately? Currently, both carousels are working, but when I click prev/next then it changes both carousels. I would think this would target the carousel clicked?
Thanks!
HTML
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Second Carousel -->
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JS
$('.carousel').each(function(){
$(this).carousel({
interval: 3000
});
$(this).on('click', '.left', function(){
$(this).carousel('prev');
});
$(this).on('click', '.right', function(){
$(this).carousel('next');
});
});
As per my understanding you need to have different selected to bind the events for 2 different carousel. So you need to use different class or different ID or any 2 different selected.
I am developing an app with rails and using bootstrap to style most of it. When I am using the carousel structure it stacks one image above the other. Also I am assuming that the JavaScript it uses might not be running correctly.
Here is my code
<section class="carousel"
<div class="contanier">
<div class="row">
<div class="col-sm-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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" role="listbox">
<div class="carousel-item active">
<%= image_tag("carousel_na_1.jpg") %>
<div class="carousel-caption">
<div class="carousel-caption"
<h3>Miel de Agave Natural</h3>
<p>¿Que es la miel de Agave?</p>
</div>
</div>
</div>
<div class="carousel-item">
<%= image_tag("carousel_na_2.jpg") %>
</div>
<div class="carousel-item">
<%= image_tag("carousel_na_2.jpg") %>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
Here are some images of how it renders:
enter image description here
Change the carousel-item class to item, and it'll work.
I have a MVC5 app, and inside one of my views I have a carousel which is defined as the code below. The point is that it shows okay, and I'm able to navigate through the slides of the carousel by either clicking the left or right arrows or using the points. But when I open the view carousel is in the first slide, and it doesn't move through its other slides. I have to make it change slide after 3 seconds, and then when it comes to the last one, to return to the first, I also want to preserve the functionality of the manual slide changing. I guess I need some JS code for it, but don't know who to achieve it, I tried some things using setInterval and adding "active" class to the next slide, but there was no luck. Here is my carousel code:
<div id="myCarousel" class="carousel slide" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="~/Content/img/auto.png" alt="slid0" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/business.png" alt="slid1" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/exercise.png" alt="slid2" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/healthcare.png" alt="slid3" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/lawn.png" alt="slid4" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/hair.png" alt="slid5" class="img-responsive">
<div class="carousel-caption">
</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>
Any idea, how to solve the problem?
You can add
data-ride="carousel" data-interval="3000"
Try this
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/600/200/" alt="slid0" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid1" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid2" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid3" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid4" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid5" class="img-responsive">
<div class="carousel-caption"></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>
I have found a perfectly working solution to the question of how to link to a specific slide in a bootstrap carousel. However, I have multiple carousels with different Id's running on the same page. How can my link target a specific carousel id?
The specifics:
I have three carousels
They have different ids: "carousel-01", "carousel-02", "carousel-03".
I call the function to be able to link to specific slides. Here it is carousel-01. Could also be carousel-03
function goToSlide(number) {$("#carousel-01").carousel(number);}
Then I put my link in the markup
Go to slide #5
My question is: How can I make the link target a carousel with a specific id. Let's say, I'd want not #carousel-01 move but #carousel-03?
You must use different id for both carousel like this
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
Then call the carousel via javascript
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('#carousel2').carousel()
</script>
Here is the solution for that on click if 'Go to slide3' , It will take the specific slider , ex: that is now i am targeting it to the class 'slidehere' in '#carousel2'
<!-- link to specific slider -->
Go to slide3
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2" class="slidethis"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item slidethis"> <!-- targeted item on click 'slidethis'-->
<img src="..." alt="...">
<p>slide</p>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
javascript required
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('.slide3').click(function() { //onclick
/* Act on the event */
$('#carousel2 .carousel-inner .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-inner .slidethis').addClass('active') //adding active class to targeted slide
$('#carousel2 .carousel-indicators .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-indicators .slidethis').addClass('active')/adding active class to targeted slide
});
</script>