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.
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 have a div that uses a bootstrap carousel with ng-repeat. I also have a way to add items the current list of items.
So if I am in index 0 and I click the add button, I want to be able to slide to the new item.
Currently with what I have, the indexes seem to be set correctly but it just isn't sliding to the new item
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
$('#myCarousel').carousel($scope.currentIndex);
It just shows the data from item 1 still. But when I do try and click next, it then moves to that new item.
I have also tried it with $('#myCarousel').carousel('next'); which results in the same thing
Edit:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>
Can you post the html part? also begin with more than 1 slide so that you have at least 3 slides at the end just for debug.
Following your code i compiled something like this, don't know if it's what you are looking for
<body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
<div>{{item}}</div>
</div>
<h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
</body>
with the script
var app = angular.module('cApp', []);
app.controller('myslides', function($scope){
$scope.items = ['this is 1','this is 2'];
$scope.currentIndex = 0;
$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
};
});
Aldo if you are going to use angular, i personally prefer to use angularui that has a simple carousel with prebuild functions and you can still do some customizing.
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>
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 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');