Can I control 2 Bootstrap Carousels with one set of controllers?

Can I control 2 Bootstrap Carousels with one set of controllers? - javascript

I have two sliding carousels side by side and i want to control them with one set of controls. My main goal is to have one carousel with two carousels in it and change the direction/animation of one of them to make something cool. I have tried this is my curent code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="kampany">
<div class="container">
<div class="row">
<div class="col-6">
<div class="kampanyapic px-0">
<div id="kampanyacontrol" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#kampanyacontrol" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
<div class="col-6">
<div class="kampanyainfo px-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I have tried to changing hrefs to class but i failed miserably. Any suggestions?

Try using selective triggering adding the snippet as illustrated below:
$('.kampany .carousel-control-next,.kampany .carousel-control-prev').on('click', function (e) {
var inst = $(this).data("slide");
if(inst== "prev"){
$("#carouselExampleControls").carousel("prev")}
else{ $("#kampanyacontrol").carousel("next")}
})
The full solution will be:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="kampany">
<div class="container">
<div class="row">
<div class="col-6">
<div class="kampanyapic px-0">
<div id="kampanyacontrol" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#kampanyacontrol" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
<div class="col-6">
<div class="kampanyainfo px-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('.kampany .carousel-control-next,.kampany .carousel-control-prev').on('click', function (e) {
var inst = $(this).data("slide");
if(inst== "prev"){
$("#carouselExampleControls").carousel("prev")}
else{ $("#kampanyacontrol").carousel("next")}
})
</script>

Related

Bootstrap 5 Carousel showing only control and not contents

I am working on an HTML site and I am using the bootstrap 5 frameworks.
MY GOAL is to add bootstrap 5 Carousel in my section next to an image, like show in this image.
[https://imgur.com/a/JSvH2nw]
I have directly copied Carousel code from bootstrap docs here is the link
https://getbootstrap.com/docs/5.1/components/carousel/#slides-only
But for some reason, the Carousel is not showing any content it is only showing controls and slider buttons like this
https://imgur.com/a/26ItRqU
what m i doing wrong?
<html lang="de">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700;800;900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet">
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container pt-5">
<div class="row">
<div class="col-xl-8 col-lg-6 text-sm-center ">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-xl-4 col-lg-6 custmcol mx-auto text-center">
<img class="img-fluid sidewhyusimg " src="https://dummyimage.com/400x400/000/fff" alt="cleaningImage">
</div>
<span class=" shadow-do text-center"><a href="#" class=" btn btn-primary mainbtn mx-auto mt-5 ">Mehr
erfahren</a></span>
</div>
</div>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap- -->
</body>
</html>

You need to replace ... with actual image link
where the img tag is in your html code
<img src="..." class="d-block w-100" alt="...">
like this :
<img src="..." class="d-block w-100" alt="...">
Update:
if you want carousel without image you can do that by following:
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000" >
<!-- <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467__340.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<!-- <img src="https://img.freepik.com/free-vector/abstract-dotted-banner-background_1035-18160.jpg?size=626&ext=jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="https://static.vecteezy.com/system/resources/thumbnails/001/234/358/small/modern-blue-halftone-banner-background.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
Simple trick: just remove the img tags from the html and remove carousel-caption class from the caption text div
alternatively you can use owl carousel to create beautiful carousels just like what you want
Here is a jsbin link i created with your code.
https://jsbin.com/rufivuwije/edit?html,output

Note that the image address in your code should be changed to your own image address.
<img src="..." class="d-block w-100" alt="...">

dependencies necessary for Bootstrap's carousel

What JavaScript dependencies needs to be included when I want to use just the Carousel functionality? That means I don't want to use bootstrap.js, just JS necessary for Carousel (carousel.js, ...).
The setup code (with regards to the docs) is:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
But obviously the Bootstrap 5 part is missing, as I get the error:
(index):511 Uncaught ReferenceError: bootstrap is not defined
I can't seem to find this info in Bootstrap's official docs and anywhere else.

I does not give the error if you include bootstrap bundle for instance.
So you must not have included popper or jquery or bootstrap(.min).js
with:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

Bootstrap 5 Carousel not sliding [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I want to include a carousel in my page and it does not slide, only shows first image. The other bootstrap components do work, here's my code:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="./img/slider/slider1.png" class="d-block w-100 active" alt="...">
</div>
<div class="carousel-item">
<img src="./img/slider/slider2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./img/slider/slider3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I literally copypasted from bootstrap docs and it's still not working.

As mentioned in the comments, you're linking the incorrect Boostrap libraries. You're using Boostrap 5 code, but using Boostrap 4 libraries.
CSS for Bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
JS Bundle:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
Here's a working example using the correct libraries:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/random/100x80?sig=1" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/100x80?sig=2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/100x80?sig=3" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Change SVG's fill when I click on a prev or next button in a carousel [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
<div class="container-fluid" style="overflow:initial">
<div class="centratura-relative">
<div class="under-background"><svg>.......</svg></div>
<div class="over-background dipinto"><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">
<div class="carousel-item active">
<img class="d-block w-100" data-colore="#DC143C" src="..." alt="First slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-colore="#800080" src="...." alt="Second slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-colore="#ffd700" src="...." alt="Third slide">
<div class="carousel-caption padre">
<p class="description">Piccola descrizione foto</p>
</div>
</div>
</div>
<a class="carousel-control-prev no-back" 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 no-back" 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></div>
</div>
</div>
</section>
$('#carouselExampleIndicators').on('slide.bs.carousel', function () {
$('.cls-3').css("fill","red");
})
If I have a SVG img not in the carousel and when I click on a carousel I want that SVG fill change.
How can I do this? with data target on hte items of carousel? Please help me. The carousel is a bootstrap carousel.
I have to do this change color for all items in the carousel.
i want to do this for every items with differents color

assuming you may override the fill property this should work
$('.carousel').carousel();
$('.carousel').on('slide.bs.carousel', function(ev) {
var slide = $(ev.relatedTarget);
var svgColor = slide.data('colore');
$('.cls-3').css("fill", svgColor);
});
Example (automatic slide, see the demo in full page, scroll down to see the SVG)
$(function() {
$('.carousel').carousel();
$('.carousel').on('slide.bs.carousel', function(ev) {
var slide = $(ev.relatedTarget);
var svgColor = slide.data('svgcolor');
$('.cls-3').css("fill", svgColor);
});
});
.cls-3 {
width: 200px;
height: auto;
fill: #9bc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-svgcolor="#9bc">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item" data-svgcolor="#cb9">
<img
src="https://mdbootstrap.com/img/new/slides/042.jpg"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item" data-svgcolor="#c9b">
<img
src="https://mdbootstrap.com/img/new/slides/043.jpg"
class="d-block w-100"
alt="..."
/>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="cls-3">
<path d="M348,327.195v-35.741l-32.436-11.912c-2.825-10.911-6.615-21.215-12.216-30.687l0.325-0.042l15.438-32.153l-25.2-25.269
l-32.118,15.299l-0.031,0.045c-9.472-5.601-19.758-9.156-30.671-11.978L219.186,162h-35.739l-11.913,32.759
c-10.913,2.821-21.213,6.774-30.685,12.379l-0.048-0.248l-32.149-15.399l-25.269,25.219l15.299,32.124l0.05,0.039
c-5.605,9.471-11.159,19.764-13.98,30.675L50,291.454v35.741l34.753,11.913c2.821,10.915,7.774,21.211,13.38,30.685l0.249,0.045
l-15.147,32.147l25.343,25.274l32.188-15.298l0.065-0.046c9.474,5.597,19.782,10.826,30.695,13.652L183.447,460h35.739
l11.915-34.432c10.913-2.826,21.209-7.614,30.681-13.215l0.05-0.175l32.151,15.192l25.267-25.326l-15.299-32.182l-0.046-0.061
c5.601-9.473,8.835-19.776,11.66-30.688L348,327.195z M201.318,368.891c-32.897,0-59.566-26.662-59.566-59.565
c0-32.896,26.669-59.568,59.566-59.568c32.901,0,59.566,26.672,59.566,59.568C260.884,342.229,234.219,368.891,201.318,368.891z"/>
</svg>

is there a way to call a particular slide image in click event in JavaScript or jQuery

I did manage to get the previous image in the carousel on click but I'm not able to specify the "data-slide-to" image
This is the code for getting the previous image on click
$("#header").carousel('prev');
but while implementing the second one I'm getting no response
$("#header").carousel($(this).data('slide-to',0));

function gotoSlide(number){
$(".carousel").carousel(number);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button id="btn-1" onclick="gotoSlide(0);">1st Slide</button>
<button id="btn-2" onclick="gotoSlide(1);">2nd Slide</button>
<button id="btn-3" onclick="gotoSlide(2);">3rd Slide</button>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1484151709479-3996843263cf?auto=format&fit=crop&w=1650&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1459292414836-763d35c7ae4c?auto=format&fit=crop&w=1650&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1506934535230-26f42bf91ae6?auto=format&fit=crop&w=1652&q=80" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

An example using Bootstrap 4's Carousel methods
carousel.on('slide.bs.carousel', function (event) {
var active = $(event.target).find('.carousel-inner > .item.active');
var from = active.index();
var next = $(event.relatedTarget);
var to = next.index();
var direction = event.direction;
});

Develop Reference

JavaScript is the programming language of the Web.

Can I control 2 Bootstrap Carousels with one set of controllers? - javascript

Related

Bootstrap 5 Carousel showing only control and not contents

dependencies necessary for Bootstrap's carousel

Bootstrap 5 Carousel not sliding [closed]

Change SVG's fill when I click on a prev or next button in a carousel [closed]

is there a way to call a particular slide image in click event in JavaScript or jQuery

Categories

Resources