I am using AngularJS to build a carousel with multiple items :
Now,
Each item has different (random width), and also the list of the items is random. (getting it from server).
Ofcourse it needs to be responsive, which means - the width of the item will be fixed - and when you resize it should display more/less items each.
Any recommendations for an AngularJS directive for this scenario?
Appreciate your reading, thanks.
I'd recommend: https://github.com/devmark/angular-slick-carousel
The last demo is the one which you are asking for:
https://devmark.github.io/angular-slick-carousel/#/
In your view, would need:
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
<div ng-repeat="i in YOUR_IMAGES">
<img src={i.url} style="width:{{ i.width }}px;height:100px" />
</div>
</slick>
The configuration in your controller:
$scope.slickConfig4 = {
method: {},
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
};
And after loading your data
$scope.slickConfig4Loaded = true;
Related
I want to display a number of cards in a carousel. For the carousel, I'm using react-slick. Since I want to show one card in the center, and I also want to show parts of the other cards at the ends of the carousel, I've set centerMode: true and added centerPadding:300px. The issue is, when I reduce the screen size, the cards overlap one another, and it looks horrible. How can I maintain the layout of the carousel, and ensure that there is always a certain amount of space between the cards, no matter the screen size?
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const settings = {
dots: true,
infinite: true,
speed: 500,
centerMode: true,
centerPadding: '300px',
slidesToShow: 1,
slidesToScroll: 1,
}
return (
<div style={{height: '400px', margin: '100px 10%'}}>
<Slider {...settings}>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
</Slider>
</div>
)
Instead of using px which is a fixed-set value, you can use vw which is short for viewport width. Say you put it to 10vw it means 10 percent of the width of the device that is loading the app, will be the size of the component that you are using it in. There is also vh, short for viewport height.
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: 300px
responsive: [
{
breakpoint: 1024,
settings: {
centerPadding: 150px
}
},
You can add responsive attribute and reduce the centerPadding by half or whatever you want and comfortable with.
You can set another responsive attribute with another object values pairs in 768.
I am trying to use angular-ui-swiper with AngularJS. Implementation was very easy, please see here https://www.npmjs.com/package/angular-ui-swiper
But I am not able to set more options for this slider, because I found no angular examples on the web. Can you please support me?
I am able to access the instance of the slider via "instance"-Attribute set in the html code. But I just managed to jump to a special slide. But I also want to have initially 3 slides per view for example. How can I achieve this?
Thank you
<swiper instance="instance">
<slides>
<slide ng-repeat="subpage in sliderElements">
<img src="{{subpage.featuredImage}}" alt="" title=""/>
</slide>
</slides>
<prev></prev>
<next></next>
<pagination></pagination>
</swiper>
Here are some options I need:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
https://github.com/nolimits4web/Swiper/blob/master/demos/130-centered.html
You should write each property in this form (add -):
<swiper slides-per-view="4"> this is the same like slidesPerView: 4
I need a area chart with using angular directive and data is fetched from database but the problem is after fetching the data ,chart is not appear and when i use static data chart appears fine.And chart would update after 10 seconds that is my requirement.
var myapp=angular.module('myapp',['ngRoute']);
myapp.controller('GraphController',
function(dataFactory,$scope,$http,$timeout){
var getData=function() {
dataFactory.httpRequest('/graph').then(function (data) {
console.log(JSON.stringify(data));
$scope.myModel=JSON.stringify(data);
$timeout(getData, 1000);
});
}
$scope.xkey = 'id';
$scope.ykeys = ['id', 'value'];
$scope.labels = ['ID', 'Value'];
$timeout(getData, 1000);
/* Static data and when these static data are use in getData function ,it didnot work.
$scope.myModel = [
{"id":21,"yr":2000,"value":80},
{"id":1,"yr":2001,"value":5},
{"id":2,"yr":2002,"value":6},
{"id":3,"yr":2003,"value":17},
{"id":4,"yr":2004,"value":5},
{"id":5,"yr":2005,"value":22},{"id":7,"yr":2006,"value":41},
{"id":9,"yr":2007,"value":11},{"id":10,"yr":2008,"value":33},
{"id":8,"yr":2009,"value":77},{"id":6,"yr":2010,"value":55},
{"id":11,"yr":2011,"value":55},{"id":12,"yr":2012,"value":66},
{"id":13,"yr":2013,"value":77},{"id":14,"yr":2014,"value":50},
{"id":15,"yr":2015,"value":22},{"id":16,"yr":2016,"value":77},
{"id":17,"yr":2017,"value":41},{"id":18,"yr":2018,"value":20},
{"id":19,"yr":2019,"value":9},{"id":20,"yr":2020,"value":2},
{"id":23,"yr":2022,"value":1}
];*/
});
myapp.directive('areachart',function(){ //directive name must be in small letters
return {
// required to make it work as an element
restrict: 'E',
template: '<div></div>',
replace: true,
link:function($scope,element,attrs)
{
var data=$scope[attrs.data],
xkey=$scope[attrs.xkey],
ykeys=$scope[attrs.ykeys],
labels=$scope[attrs.labels];
Morris.Area({
element:element,//element means id #
data:data,
xkey:xkey,
ykeys:ykeys,
labels:labels,
parseTime: false,
ymax:120,//Max. bound for Y-values
lineColors: ['#0b62a4', '#D58665'],//Array containing colors for the series lines/points.
smooth: true,//Set to false to disable line smoothing.
hideHover: 'auto',//Set to false to always show a hover legend.
pointSize: 4,//Diameter of the series points, in pixels.s
axes:true,//Set to false to disable drawing the x and y axes.
resize: true,//Set to true to enable automatic resizing when the containing element resizes
fillOpacity:1.0,//Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque).
grid:true,//Set to false to disable drawing the horizontal grid lines.
});
}
}
})
Html Page
<body ng-app="myapp">
<div ng-controller="GraphController">
<AreaChart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></AreaChart>
</div>
</body>
Angularjs MVC. Try this:
$scope.dt = angular.fromJson(sReturn.data);
Works for me.
try this $scope.myModel=JSON.parse(data); insted of $scope.myModel=JSON.stringify(data);
I am using kendo grid with virtual scrolling, with the following angular JS code in the controller:-
$scope.options = {
dataSource: {
type: "json",
serverPaging: true,
pageSize: 100,
transport: {
read: "/rest/error/grid",
dataType :"json"
},
schema:{data:"data",total:"total"}
},
height: 543,
scrollable: {
virtual: true
}
};
The json output of my service is :
{data :[{name:"name0",age:0},
{name:"name1",age:1},
....,
{name:"name1000",age:1000}
],
total:1000
}
The kendo Grid initialized on the UI has:-
<div>
<div kendo-grid="grid" k-options="options" k-rebind="options"></div>
</div>
However facing a issue like once i reach 99 record, the call to get next 100 records is made.
However after that second request to get first 100 record also triggered and grid reset to first record.
In effect unable to scroll beyond page 1(or beyond 100 records).
Any ideas to resolve the same
Finally figured out the issue,
The grid works fine when i removed 'k-rebind' from the html.
It seems the k-bind trigger a rebind action, since data in the options is changed during the scrolling. Thus initializing the grid each time.
Thanks all
I am using bxslider to build a nice carousel displaying 2 items at a time.
this is my html:
<ul class="bxslider clearfix">
<li>
<span>Case Study</span>
<h3>The London Business School</h3>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>The Terra Santa College</h3>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>Case Study number 3</h3>
+ See Full Case Study
</li>
</ul>
and this is my JS:
jQuery('#case-studies .bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
moveSlides: 1,
pager: false,
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
autoHidePager: true,
slideMargin: 10
});
It works great and shows 2 items each click.
the issue I have is that each slide has a background image of a simple line in the left side and I am trying to remove the backgroun from the first item only.
I was thinking I can use last-child in my li item like so:
#case-studies .bxslider li:first-child {
background: none !important;
}
but after I checked on the site the bxslider loop animation clones the number of the slides you have in order to create a loop and the first hcild isn't necassary the one you see..
anyway I can add a class to the first item that appears?
Thanks
To remove the left and right arrows at respective ends you have to add two more options in the initializing script. After adding the final code will look like
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
moveSlides: 1,
pager: false,
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
autoHidePager: true,
slideMargin: 10,
infiniteLoop : false, // Newly added code
hideControlOnEnd : true, // Newly added code
onSliderLoad : function(currentIndex){
$('.bxslider li').removeClass('current');
$('.bxslider li').eq(currentIndex).addClass('current');
},
onSlideAfter : function($element){
$('.bxslider li').removeClass('current');
$element.addClass('current');
}
});
To get the first slide in the view you have to run the script below
$('.bxslider li').eq(slider.getCurrentSlide())
NOTE: this code will work only if you have passed infiniteLoop : false and hideControlOnEnd : true while initializing the slider.
HINT:The slider doesn't clone the elements if hideControlOnEnd option is true .
UPDATE:
Check out this fiddle
Leave a comment if you have any doubts