using angularJs 1.6 and bootsrap3 grid i want to implement product card carousel slider without using any third party library is it possible please help me if anyone know friends
Left arrow <--- product-1-div product-2-div product-3 -->Rarrow
if i click right arrow next 3 product column should appear please friends help me!
angular.module('app', []).controller('ctrl', function($scope) {
$scope.products = []
for (var i = 0; i < 10; i++)
$scope.products.push({
name: 'Product' + i
})
})
.col-xs-4 {
height: 100px;
text-align: center;
border-right: 2px solid #5162d2;
}
li {
background-color: #5162d2 !important
}
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<body ng-app='app' ng-controller='ctrl'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="{{$index/3}}" ng-class="{active:$first}" ng-repeat='item in products' ng-if='$index%3==0'></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item" ng-class='{active:$first}' ng-repeat='item in products' ng-if='$index%3==0'>
<div class="row">
<div class="col-xs-4" ng-repeat='x in [0, 1, 2]'>{{products[$parent.$index+x].name}}</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
Related
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3 home__li-align" ng-
repeat="electronic in allItem.slice(0,4) | filter :enter code here 'electronics'">
<a ui-sref="" ng-click="`enter code here`view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 home__li-align" ng-repeat="electronic in allItem.slice(4,8) | filter : 'electronics'">
<a ui-sref="" ng-click="view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-bottom: 70px; margin-left: -70px; color: black;"><i class="glyphicon glyphicon-chevron-left" ></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-bottom: 70px; margin-right: -70px; color: black;"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
Only item active class is working and i want 4 div in one slide of carousel then on clicking carousel control. It should bring next carousel having 4 div.So any Solution of that?
I can understand your problem and i created solution fiddle please follow below link.
<script>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl",MyCtrl);
function MyCtrl($scope) {
$scope.list = [];
for(var i = 0; i< 16;i++){
$scope.list.push(i);
}
}
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(0,4)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(4,8)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
http://jsfiddle.net/r2wLz6xr/507/
I am using a bootstrap slider using the HTML code and CSS.
BUt the slides are not changing automatically or manually.
below is the code of slider.
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3>
<h4 data-animation="animated bounceInUp">Easily use stunning effects</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3>
<h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3>
<h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">We are creative</h3>
<h4 data-animation="animated bounceInUp">Get start your next awesome project</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!doctype html>
<html ng-app="plunker" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"> </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="app.js"></script>
<!-- adding css files -->
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="CarouselCtrl">
<div class="offsetspan6">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img class="image-circle" ng-src="{{slide.image}}" style="margin:auto;"/>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//angular.module('myApp', ['ui.bootstrap']);
var app = angular.module('plunker', ['ui.bootstrap']);
// Controller for Carousel
function CarouselCtrl($scope) {
// initializing the time Interval
$scope.myInterval = 1000;
// Initializing slide rray
$scope.slides = [
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Cute Fish'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image2'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Swordtail%20PIX/Xiphophorus%20helleriAQ%20Hifin%20Black%20males.jpg',text:'Image3'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image4'}
];
var slides = $scope.slides;
console.log(slides);
} // Controller Ends here
</script>
</html>
I am trying to dynamically fill an Bootstrap Carousel with Base64 Images. The Base64 string seems to be correct, because I validated it with the following converter, but the carousel doesn't render the image.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.imgBase64 = [" data:image/png;base64,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"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li ng-repeat="x in imgBase64 track by $index" data-target="#myCarousel" data-slide-to="{{$index}}" class="{$index==0:'active'}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img ng-src="x" alt="Los Angeles" ng-repeat="x in imgBase64 track by $index" class="{$index==0:'active'}">
</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>
User have to create image from base64.
var image = new Image();
image.src = "data:image/png;base64..."
$scope.imgBase64 = image.src;
I am using bootstrap and angularjs, I want to show large image on. I clicked image but its not working. How do this? Any built-in library of bootstrap when I show large image.
<html>
<head>
<script type="text/javascript">
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
</head>
<body>
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
</body>
</html>
I am using ui-bootstrap angularjs for generating slide down's and added a button and click event, with alert message in controller but I don't get any alert or console log.
I am facing problem in generating alert on click of button which is being loaded using template-url as you can see in code below. I am sharing my sample code below.
angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
console.log("CTRL LOADED");
$scope.alertMsg = function(){
alert('hejd');
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
</uib-accordion>
</div>
</body>
</html>
I do get the log "CTRL LOADED". But I am not getting alert message when I click.
I believe the panel creates its own scope so you need to call the parent scope to get the alert message like so:
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="$parent.alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
Here is a Plunker