I have a carousel running at my site
div id="weekCarousel_{{$index}}" class="carousel slide">
<a href="#weekCarousel_{{$index}}" data-slide="prev" class="prevweek">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a href="#weekCarousel_{{$index}}" data-slide="next" class="nextweek">
<div class="glyphicon glyphicon-chevron-right" aria-hidden="true"></div>
</a>
</div>
I would like to add a css class for span whenever this carousel gets slided
<span id="displayer">.........</span>
this is my span tag any suggestions?
On slide event:
$('.your-class').removeClass('your-class');
$('div#displayer').addClass('your-class');
Related
I am trying to make a carousel.
This carousel image gets its imagepath string from a string array.
when i click left or right arrow I want it to increase or decrease index, so i can change image which is shown.
how can i mak this happen.
NO ts code allowed, only html can be used.
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<ul *ngFor="let carImagePath of carImagePaths; let i= index;first as isFirst">
<div [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' ">
<li><img [src]="imageUrl+carImagePath" class="d-block w-100" alt="..."></li>
</div>
</ul>
</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>
</div>
As a solution i gave up trying to use normal bootstrap carousel. I tried angular bootstrap carousel. ng add ngx-bootstrap --component carousel . intallled this to terminal. and used it own html from via this site:
https://valor-software.com/ngx-bootstrap/#/components/carousel?tab=overview
Now it is working.
I'm having problem displaying an active image from carousel to my 2nd div when I click next/ previous. Looks like it's delayed when I click next/ previous.
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" 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="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2">
</div>
For the benefit of those who are looking for an answer for a question/ problem like this one, I was able to solve my own problem by adding an onload="strapActiveImage()" to the image tag (where display is happening). Here is the code:
function strapActiveImage() {
var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
document.getElementById('strap_logo').src = activeElImgSrc;
document.getElementById('strap_logo2').src = activeElImgSrc;
}
<!-- STRAP -->
<div class="justify-content-center body-inner">
<div class="personalize-item-title left-align bold">
<span>STRAP</span>
</div>
<!-- CarouselBegin -->
<div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
</div>
<div class="carousel-item">
<img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
</div>
</div>
<a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" 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="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span>LEATHER</span>
<!-- CarouselEnd-->
</div>
<!-- STRAP END -->
<div class="justify-content-center body-inner">
<img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()">
<img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()">
</div>
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mouseenter it starts to cycle the carousel and on mouseleave it pauses. Thanks!
EDIT:
So here's the code:
<div id="myCarousel" class="carousel carousel-fade">
<div class="carousel-inner embed-responsive embed-responsive-21by9">
<?php tuote_kuvat( '_tuote_img', 'full' ) ?>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$(document).ready(function(){
$("#myCarousel").carousel({
interval: 1000,
pause: true;
});
$('#myCarousel').hover(function(){
$("#myCarousel").carousel('cycle');
},function(){
$("#myCarousel").carousel('pause');
});
});
</script>
I'm quite inexperienced with javascript, so is it possible, that I'm implementing those carousel methods wrong? The javascript on my code does nothing.
Thank you for your contribution so far, this problem is making me mad.
Try the below code in which replace Yourcontainer and Carousel element with your elements.
$('#Yourcontainer').hover(function(){
$("#Carousel").carousel('cycle');
},function(){
$("#Carousel").carousel('pause');
});
This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 4 years ago.
I have this Bootstrap Carousel which shows 2 item each in Desktop view. However, I want to show one item at a time in Mobile view. How can I achieve this?
https://jsfiddle.net/v9t2pz9b/
HTML
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-6">
block1
</div>
<div class="col-sm-6">
block2
</div>
</div>
<div class="item">
<div class="col-sm-6">
block3
</div>
<div class="col-sm-6">
block4
</div>
</div>
<div class="item">
<div class="col-sm-6">
block5
</div>
<div class="col-sm-6">
block6
</div>
</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>
JS:
$(document).ready(function(){
$("#myCarousel").carousel();
});
Something like as this shown in the design. I want to show only one slide at a time in mobile:
$(document).ready(function(){
$("#myCarousel").carousel();
if ( $(window).width() < 640 ) {
$('.col-sm-6').unwrap().addClass('item');
$('.col-sm-6:first').addClass('active');
}
});
Where 640 is your mobile breakpoint. Check out unwrap() , it removes the element's parent while not affecting its content.
I was wondering if there was a way to skip through hidden slides using a bootstrap carousel. I am able to show and hide the slides using ng-show() however the carousel still goes to the blank slides. Just wondering if i could make a function for prev or next that goes to next slide where ng-show() = true?
<div class="carousel-inner" role="listbox">
<div class="item active" ng-show="solution.check">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item" ng-show="solution.check">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</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>
Maybe this can help you:
Take a look at bootstrap carousel documentation here
$("selector").on("slide.bs.carousel", function(){
if($(nextslide).attr("ng-show") == false){
// go to next element
}
});
Check this link.
You can take a look at the link and check what is going on when you click on the next or prev buttons. The link is a source to w3schools where you can "try it".