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.
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 using angular 5. I write bellow http.get method to get data from api in angular 5. I want to get the url of image to use this in my slider.
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result;
console.log(this.images);
})
}
but I'm getting data from api which id based below is my response
{
status:"success",
…
}img:[
{
id:"1",
banner:"/upload/img.jpg"
},
…
]0:{
id:"1",
banner:"pload/img.jpg"
}1:{
id:"2",
banner:"load/img2.jpg"
}2:{
id:"3",
banner:"/admin/upload/img3.jpg"
}status:"success"
this my html template. I don't know is this right or wrong.
<div class="container">
<div class="row">
<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>
<button ></button>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" *ngFor="let image of images">
<img src="{{image.banner}}">
</div>
<!-- <div class="item">
<img src="http://asianstylemagazine.com/wp-content/uploads/2016/04/housefull-1.jpg" alt="Chicago">
</div>
<div class="item">
<img src="https://www.artsfon.com/large/201705/97685.jpg" alt="New York">
</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>
</div>
I'm getting this after using result.img
I'm beginner to angular please help. Thank you.
In ts take the object as given below,
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result.img; // store the img array in this.images
})
}
The images variable will have the img array.
Now go to your template and use *ngFor
Example:-
<div *ngFor="let image of images">
<img src="{{image.banner}}" alt="banners">
</div>
image in ngFor will iterate through your array img and get all the urls.
Hope this helps
You need to make sure you get the correct data
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result : any) => {
this.images = result.img;
})
}
Also, in your carrousel, you need to make sure that only one item is active at the beginning (for now, all items have the active class)
<div class="item" [ngClass]="{'active': i==0}" *ngFor="let image of images; let i = index">
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'm trying to use this template with a custom carousel.
I want the carousel to replace the default header, but when I put the carousel code there, nothing happens.
When I first tried it did appear, but the left and right arrows would not function properly.
Here is the carousel:
<header id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<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>
</header>
And these scripts are at the bottom of the body
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
The reason the carousel wasn't showing up is that the carousel has to be inside the header, not the header itself. Change this
<header id="myCarousel" class="carousel slide">
...
</header>
To this
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
</header>
The previous and next buttons aren't working because your page has a smooth scrolling plugin. Just change this line
$('a[href*=#]:not([href=#])').click(function() { ... }
So that it filters out the carousel buttons, like so
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }
(Demo)
Take a look at this Fiddle.
I set the fiddle up with the template and have a Bootstrap carousel fullscreen in place of the image.
The issue why you could not get it to work was because the template site uses a scroll-to in the menu links.
It was a simple fix, all that was needed was to swap the tags to div.
You could use <button>but this would have a shaded gray edge area in from each side.
<!-- Left and right controls -->
<div 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>
</div>
<div 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>
</div>
Using both Bootstrap components carousel and popover, I have encountered some conflict. I need to utilize the carousel inside the popover, however they don't play nice together. Is there a reason for this?
Essentially the concept is pretty simple, if you want to login, the form is inside the popover and if you want to register, utilise the carousel inside the popover and slide to register form.
Any Ideas?
Bootply:
HTML:
<div class="login-popover hide">
<div class="row">
<div class="col-md-12">
<div id="login-register" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner"><!-- Wrapper for slides -->
<div class="item active"> <!-- Active is always 1st image-->
Login Content
</div>
<div class="item">
Register Content
</div>
</div>
<!-- Controls for carousel-->
<a class="left carousel-control" href="#login-register" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#login-register" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
Javascript:
$('.login-pop').popover({
placement: 'bottom',
container: '.popover-login',
trigger: 'click',
animation: false,
template: '<div class="popover login" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
html: true,
content: function () {
return $(this).next('.login-popover').html();
}
});
It is possible to put bootstrap carousel inside tooltip or popover. Take a look at some examples:
http://codepen.io/_danko/pen/wavmjG
Reason why it does not work in your case is because it (carousel) is not initialized. You can initialize it with something like this:
$('.login-pop').on('shown.bs.popover', function () {
// initialize carousel…
$('.carousel-inner').carousel();
});
After further reading Bootstrap popovers create dynamic content so this is not possible.