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');
});
Related
I am working on an RSS feed-based project where I have to render accordions dynamically using DOM manipulation.
It works fine on opening an accordion but does not get closed on toggling on the same accordion.
Here's my function for rendering Accords based on some response data
const renderAccordionSection = (index, id, title) => {
let divAccordion = `<div class="accordion-item">
<button class="accordion-button ${index === 0 ? "" : "collapsed"}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${id}" aria-expanded="true" aria-controls="collapse-${id}">
${title}
</button>
<div id="collapse-${id}" class="accordion-collapse collapse ${index === 0 ? "show": ""}" aria-labelledby="heading-${id}" data-bs-parent="#accordionId">
<div class="accordion-body">
<div id="indicator-${id}" class="carousel slide " data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-inner-${id}">
</div>
<div>
<a class="carousel-control-prev" href="#indicator-${id}" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="carousel-control-next" href="#indicator-${id}" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>`;
return divAccordion;
}
Ignore the accordion body.
and an id "accordionId" is used to place the accords
What could be the problem?
I tried changing the bootstrap attributes but didn't work. Could use some help.
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.
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".
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');