serenader2014 / flutter_carousel_slider Goto Github PK
View Code? Open in Web Editor NEWA flutter carousel widget, support infinite scroll, and custom child widget.
Home Page: https://pub.dev/packages/carousel_slider
License: MIT License
A flutter carousel widget, support infinite scroll, and custom child widget.
Home Page: https://pub.dev/packages/carousel_slider
License: MIT License
What if I want to have an action 9refresh the list) at the end of the carousel, with the animation of an empty List present in Android?
Maybe integrating that functionality would help, as I am sure actions should be taken when we can't swipe anymore left or right: visual effect and possible action to be taken
Thank you!
I would love to have a feature that delays the initial animation, so that the user can find and see the first slide with their eyes before it changes
Is there a possibility to blur pages on left and right sides when enlargeCenterPage is true?
How to workaround it in case of absence such functionality?
Thanks for the great widget!
I've just started using this tool and it is great. My use case is that I have a 'page' that displays a 'product' containing various text bits, plus zero or more photos (shown in the slider). The user may want to view the photos 'full screen', where they can pan and zoom, etc... That means I need to be able to respond to a 'tap' (or double-tap) on the slider. Ideally there would be an onTap (or onDoubleTap) property for the slider widget, whereby I could have a method that would get called (along with the tapped 'index') so that I could do what i needed (open another page, etc...). In lieu of that, what would you recommend for now? would each of my 'items' have a gesture handler, or, what?
Thanks and keep up the great work!
Can i change background color ?
I am facing issue while adding image url's, i am getting image url's from json which is a future object.
https://stackoverflow.com/questions/54297523/is-there-a-way-to-convert-futureliststring-to-listdynamic
CarouselSlider(
height: 330.0,
viewportFraction: 0.7,
initialPage: 0,
enlargeCenterPage: true,
reverse: false,
enableInfiniteScroll: false,
autoPlayInterval: Duration(seconds: 5),
autoPlayAnimationDuration: Duration(milliseconds: 2000),
pauseAutoPlayOnTouch: Duration(seconds: 10),
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
items: [
GestureDetector(child:
Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Image.asset('images/words.jpg',fit: BoxFit.cover,),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.black12,
Colors.black45
]
)
),
),
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 25.0),
child: Text("Academic\nWords"
, style: TextStyle(
fontSize: 18,
color: Colors.white
),)
)
],
),
onTap: ()=> print("tap 1"),),
GestureDetector(child:
Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Image.asset('images/writing.jpg',fit: BoxFit.cover,),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.black12,
Colors.black45
]
)
),
),
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 25.0),
child: Text("Academic\nWriting"
, style: TextStyle(
fontSize: 18,
color: Colors.white
),)
)
],
),onTap: (){},),
GestureDetector(child:
Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Image.asset('images/encounter.jpg',fit: BoxFit.cover,),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.black12,
Colors.black45
]
)
),
),
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 25.0),
child: Text("Academic\nEncounter"
, style: TextStyle(
fontSize: 18,
color: Colors.white
),)
)
],
),onTap: (){},),
GestureDetector(child:
Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Image.asset('images/correspondence.jpg',fit: BoxFit.cover,),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.black12,
Colors.black45
]
)
),
),
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 25.0),
child: Text("Academic\nCorrespondence"
, style: TextStyle(
fontSize: 18,
color: Colors.white
),)
)
],
),onTap: (){},)
].map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery
.of(context)
.size
.width,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
color: Colors.teal,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: imgUrl,
)
);
},
);
}).toList())
It would be nice to be able to expose the PageController to avoid having the entire carousel to change the page.
Hey there.
I'd love to make it so an Item could have a button that the user taps to advance to the next page in the Carousel. However, I'm struggling to figure out how to make the PageController
available to the children, since CarouselSlider
doesn't accept a customer PageController
Do you know if this is possible with the current state of the library?
Thanks!
I am having this error message while running 'flutter packages get' after upgrading flutter:
Because XXXX depends on carousel_slider >=0.0.2 which requires SDK version >=1.8.0 <2.0.0, version solving failed.
Will there be support for SDK > 2.0.0 ? Is there a workaround?
Thanks for the awesome package
Failed assertion: line 97 pos 7: 'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it.
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1, childAspectRatio: 2),
delegate: new SliverChildBuilderDelegate(
(context, index) {
return Padding(
padding: EdgeInsets.only(left: 2, right: 2),
child: CarouselSlider(
height: 200.0,
aspectRatio: 16 / 9,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
pauseAutoPlayOnTouch: Duration(seconds: 10),
scrollDirection: Axis.horizontal,
autoPlayCurve: Curves.fastOutSlowIn,
items: [
'http://www.ibonken.com/eParty/upload/poulets.jpg',
'http://www.ibonken.com/eParty/upload/burger.jpg',
'http://www.ibonken.com/eParty/upload/rizesp.jpeg'
].map((i) {
return Builder(
builder: (BuildContext ctx) {
return Container(
width: MediaQuery.of(context).size.width,
margin: new EdgeInsets.symmetric(horizontal: 2.0),
decoration: BoxDecoration(color: Colors.amber),
child: FadeInImage.assetNetwork(
width: MediaQuery.of(context).size.width,
height: 200,
image: i,
fit: BoxFit.cover,
placeholder: '',
),
);
},
);
}).toList(),
),
);
},
childCount: 1,
)),
I had to do the following to fix the issue -
pageController = new PageController( viewportFraction: viewportFraction, initialPage: initialPage );
instead of -
pageController = new PageController( viewportFraction: viewportFraction, initialPage: realPage );
but now it has stopped loading the image for me and carousel isn't working as expected. I am still trying to fix it.
Hello,
Little request from my side, a parameter to enable/disable the gesture for next/previous item.
I have a use case where I could juste authorize next/previous item by button.
Sorry for my english, I wish it was clear
Thank you very much !
Hi,
I have seen the code in example for carousel_slider. But it is for the images on the web. If I want to make a carousel of the images stored in a directory on my system then how will it work? Please, if you can provide an example for such situation , it would be a great help for me.
Thank you in advance!
How could I add some box shadow to all images on the carousel making the selected one a bit different from the rest?
Full with carousel giving white space while changing slide, how to fix? on slide the current image scale goes less and gives white space unless new slider replace it ?
I have multiple Carousels on my page, horizontal swiping one, makes them all go to the next / previous image, whilst it should only be the one being swiped on.
Please add functionality to disable swipe for manually calling of switching pages.
Hello,
Is it possible to dismiss an item (remove from list) on a press of a button?. With a simple animation
I want to be able to swipe through the carousel and swipe by a button.
If I create an instance of the CarouselSlider, I can't set the state in onPageChanged.
If I create it in build, I can't access the nextPage function.
Is there a way to prevent the carousel from looping around to the start?
In other words - if I have 3 items, I want to prevent the user from sliding past the third item. They would need to swipe the other direction to get back to the first item.
I love the plugin but I want to use it for a set of cards that someone can swipe through and it would make more sense to have the user swipe back and forth if there are only 2 cards.
Can you update for better perfomance?
Thanks
There also a IntegerDivisionByZeroException exception while rendering.
I am using the slider in multiple functions. For pure 'read only' pages, the slider works great. However I have 'read-write' pages where a user can add or remove photos to a 'product'. I use the slider to allow the user to see all the photos they have attached. Nothing ground-breaking. The slider mostly works, but seems to run into a couple of [I believe related] issues.
First off, when adding photos, I 'add to' an underlying list of 'photoObjects' and upon setState, the page rebuilds, the slider gets re-build, etc. I then set a timer for 200 ms to 'AnimateToPage(lastPageIndex)' and boom, the slider slides to the new photo. Very nice. However, an issue arises whereby I can scroll infinitely to the 'next' (swipe to left) photo but... if I try to scroll 'back' (swipe to right), I can only go as far as the first photo added. Again, on read-only pages and sliders with multiple photos, I can swipe in either direction forever. Note that the definition of the slider includes setting the 'enableInfiniteScroll' to true when there are more than 1 photos, or false when only 1. If I leave 'enableInfiniteScroll' to its default of True, then when there is only one slide, the user can still 'see' the other edges of it, and can swipe back and forth to itself - a pretty poor user experience, I think. Someone else asked about 'preventing the swipe', but the solution did not seem favorable. Again, for read-only scenarios, this approach (turning if False for one slide) works great, but in a dynamic scenario strange stuff happens.
The second issue is much harder to explain: When a photo is removed, depending on 'where' in the list it is, the slider gets 'messed up'. I have tried two approaches to removing items from the slider:
The first approach only works in some circumstances. Depending on how many items were in the list before the delete, the 'page order' seems to get messed up, meaning for example, the second page becomes the first page, and vice-a-versa. It is very strange. I also do not like this approach, because after doing the data delete inside of setState, the slider 'blinks' to a seemingly inconsistent slide - sometimes it 'goes to' slide 0, other times the last of the remaining slides.
The second approach looks much nicer, however, like the first approach, the slider/pager gets messed up. It is hard to explain all of the various combinations of moving to pages, deleting pages, adding pages and the results. In short, things are messed up.
It seems that the slider 'wants to go' to certain pages after certain operations. I cannot see a pattern.
The bottom line is that I cannot seem to implement 'removing a slide' in any reliable and accurate way, not to mention the issue with 'enableInfiniteScroll'.
I'm sure you will ask for code, and I will have to build a sample page for that... but, until then, does any of this make sense or look familiar?
Thank you...
Is it possible to create a parallax effect with the images displayed ?
I tried to mix it with other parallax plugins but I needed the controller and was unable to get it from the source code.
Anyone has an idea on how to do a parallax effect with carousel_slider plugin ?
Steps to Reproduce
I'm calling the code below to show Carousel with auto play and when image automatically slides autoPlay: true
this calls a firebase firestore method that loads some data to my app
CarouselSlider carousel(BuildContext context) {
return CarouselSlider(
items: Flutkart.imgList.map((url) {
return Container(
margin: EdgeInsets.all(0.0),
child: Stack(
children: <Widget>[
Center(child: CircularProgressIndicator()),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(0.0)),
child: Image.network(
url,
fit: BoxFit.cover,
height: 300,
width: MediaQuery.of(context).size.width,
),
),
],
),
);
}).toList(),
viewportFraction: 1.0,
aspectRatio: 1.0,
autoPlay: true,
updateCallback: (index) {
setState(() {
_selectedImgIndex = index;
});
},
);
}
so when the image automatically slides the method below is re-called:
Stream getCollectionStream() {
print('getReviewsStream: called');
return fireStore
.collection('myCollection')
.where('something', isEqualTo: 'somethingelse')
.snapshots();
}
so everytime the image slides the getCollectionStream()
is called
in every image slide i get this log in my console
I/flutter (29008): getReviewsStream: called
I/flutter (29008): getReviewsStream: called
I/flutter (29008): getReviewsStream: called
I/flutter (29008): getReviewsStream: called
I/flutter (29008): getReviewsStream: called
PS: even if i set autoPlay to false and slide the image manually the getCollectionStream()
is called again.
How can we solve this problem ??
Thank you for this awesome package :)
Hello,
I am using this slider. Can you please explain how to display caption text for the slider images.
You skipped a very important part of the installation
import 'package:carousel_slider/carousel_slider.dart';
please update the documentation
This is a very fantastic library for implementing the carousel but there are no doc comments. The library's users would feel way better if docs are included to know the function of each attribute
[VERBOSE-2:dart_error.cc(16)] Unhandled exception:
'package:flutter/src/widgets/page_view.dart': Failed assertion: line 96 pos 7: 'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it.
#0 _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:37:39)
#1 _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:33:5)
#2 PageController.page (package:flutter/src/widgets/page_view.dart)
#3 PageController.nextPage (package:flutter/src/widgets/page_view.dart:142:26)
#4 _CarouselSliderState.initState. (package:carousel_slider/carousel_slider.dart:87:31)
#5 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
#6 _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
#7 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12)
Hello,
When trying to execute
@override
Widget build(BuildContext context) {
return Column(children: [
CarouselSlider(
items: child,
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
)
]);
}
I receive an error
The element type 'CarouselSlider' can't be assigned to the list type 'Widget'
I'm very confused on solving it.
P.S. Im trying it out on Flutter WEB.
I am experiencing significant delays with the carousel; a white screen before every image load. I am trying to use this for an app landing screen with a carousel of images and text showcasing the app before advancing to log in or create an account, but the constant white screen for each image, even images it has already loaded, which stays up for half a second before going away, is making this impossible.
I have tried local assets, cached network assets, everything.
any help would be greatly appreciated.
example below:
CarouselSlider(
viewportFraction: 1.0,
aspectRatio: MediaQuery.of(context).size.aspectRatio,
items: <Widget>[
new CachedNetworkImage(
imageUrl: 'https://s3.amazonaws.com/images.com/app/1.jpg',
placeholder: (context, url) => new CircularProgressIndicator(),
fit: BoxFit.cover,
height: double.infinity,
width: 1000.0,
alignment: Alignment.center,
),
new CachedNetworkImage(
imageUrl: 'https://s3.amazonaws.com/images.com/app/2.jpg',
placeholder: (context, url) => new CircularProgressIndicator(),
fit: BoxFit.cover,
height: double.infinity,
width: 1000.0,
alignment: Alignment.center,
),
new CachedNetworkImage(
imageUrl: 'https://s3.amazonaws.com/images.com/app/3.jpg',
placeholder: (context, url) => new CircularProgressIndicator(),
fit: BoxFit.cover,
height: double.infinity,
width: 1000.0,
alignment: Alignment.center,
),
],
height: double.infinity,
autoPlay: true,
autoPlayInterval: Duration(seconds: 5),
),
The code has this.interval: const Duration(seconds: 4), Shouldn't interval be something that can be set?
if you scroll down using scrollview, widget will rebuild again from index 0
The screenshot is broken on https://pub.dartlang.org/packages/carousel_slider#-example-tab-
because of a relative path.
Hi, I added a pause on user input feature that pause the auto play animation a set amount of time letting the user interact with a screen without it scrolling to the next widget.
I can create a PR if you want to add it to the repo.
Commit notes
Added a variable pauseOnUserImput
which takes a Duration
.
If autoPlay
is set to true and pauseOnUserInput
is not null, the
PageView
will be wrapped in a GestureDetector
listening for
pan gestures.
Premise:
When using a sliding carousel you might want the
user to be able to interact with a slide.
For now, the user can swipe back if he/she see something they
like, but the carousel will keep iterating through its children.
This forces the user to constantly swipe back to the page they
were interacting with.
For example, imagen a commercial display rolling adds in a
waiting room. If something interest a person he or she might
want to pause the slide to read all the information.
This feature lets the developer implement a way too pause the
auto play feature for a set amount of time, resetting each time
new input is detected.
This way the user can interact with the application and after they
leave it will go back to circling the widgets.
Sometimes when I create a more complex item I can see an empty blink when the initial page is loading. Checking through the code I think this is the source of my problem:
// on the first render, the pageController.page is null,
// this is a dirty hack
if (widget.pageController.position.minScrollExtent == null ||
widget.pageController.position.maxScrollExtent == null) {
Future.delayed(Duration(microseconds: 1), () {
setState(() {});
});
return Container();
}
I am working on a PR to fix this hack if you don't mind.
Hi! Is there any way to remove spacing between slides as they scroll and to remove the "growing" animation on the incoming slide?
cheers!
Anytime soon?
Until then, here is my fork with dependencies fixed.
I also removed the examples since they don't work anyway.
I am doing a gallery with pop up which mean when users click a photo they will view the photo in full screen, and it is scrollable, the problem is when I close the pop up I need it to synchronise with the original gallery, which I tried to implement the jumpToPage() instance method. I am looking for a way to use it since declaring an external variable for the widget will not allow me to use the ValueNotifier and build context. I am a newbie and will greatly appreciate your feedback.
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:photo_view/photo_view.dart';
final List<String> imgList = [
'https://images.pexels.com/photos/704150/pexels-photo-704150.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/1919338/pexels-photo-1919338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://via.placeholder.com/800',
'https://via.placeholder.com/400x600'
];
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
class ProductCarousel extends StatefulWidget {
@override
_ProductCarouselState createState() => _ProductCarouselState();
}
class _ProductCarouselState extends State<ProductCarousel> {
ValueNotifier<int> current = ValueNotifier<int>(0);
final ValueNotifier<bool> gotFullScreen = ValueNotifier<bool>(true);
@override
Widget build(BuildContext context) {
return Stack(children: [
new CarouselSlider(
initialPage: 0,
height: MediaQuery.of(context).size.height / 1.8,
enableInfiniteScroll: false,
autoPlay: false,
viewportFraction: 1.0,
aspectRatio: 1.0,
enlargeCenterPage: false,
onPageChanged: (index) {
if (gotFullScreen.value == false) {
gotFullScreen.value = true;
} else {
current.value = index;
}
},
items: map<Widget>(
imgList,
(index, i) {
return Container(
child: ClipRect(
child: Align(
alignment: Alignment.center,
heightFactor: 5.0,
widthFactor: 1.0,
child: Stack(children: <Widget>[
GestureDetector(
child: Image.network(i, fit: BoxFit.cover),
onTap: () {
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) =>
galleryDialog()));
setState(() {
gotFullScreen.value = true;
});
},
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
),
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
),
),
]),
)),
);
},
).toList(),
),
ValueListenableBuilder(
builder: (BuildContext context, int value, Widget child) {
return Positioned(
top: MediaQuery.of(context).size.height / 1.95,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgList, (index, url) {
return Container(
width: 8.0,
height: 8.0,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: current.value == index
? Colors.black
: Colors.grey),
);
}),
));
},
valueListenable: current,
),
]);
}
//Fullscreen gallery
Widget galleryDialog() {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.close),
onPressed: () => Navigator.pop(context),
),
],
leading: new Container(),
),
backgroundColor: Colors.black,
body: Stack(children: [
ValueListenableBuilder(
builder: (BuildContext context, int value, Widget child) {
return CarouselSlider(
items: map<Widget>(
imgList,
(index, i) {
return Container(
child: ClipRect(
child: Align(
alignment: Alignment.center,
heightFactor: 10.0,
widthFactor: 1.0,
child: Stack(children: <Widget>[
PhotoView(
imageProvider: NetworkImage(i),
minScale: PhotoViewComputedScale.contained * 1.0,
maxScale: PhotoViewComputedScale.contained * 3.0,
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
),
padding: EdgeInsets.symmetric(
vertical: 0, horizontal: 0),
),
),
]),
)),
);
},
).toList(),
initialPage: gotFullScreen.value ? current.value : 0,
enableInfiniteScroll: false,
autoPlay: false,
viewportFraction: 1.0,
aspectRatio: 0.65,
enlargeCenterPage: false,
onPageChanged: (index) {
if (gotFullScreen.value == true && index == 1) {
current.value += 1;
setState(() {
gotFullScreen.value = false;
});
} else if (gotFullScreen.value == true && index != 1) {
current.value -= 1;
setState(() {
gotFullScreen.value = false;
});
} else if (gotFullScreen.value == false) {
current.value = index;
}
},
);
},
valueListenable: current,
),
ValueListenableBuilder(
builder: (BuildContext context, int value, Widget child) {
return Positioned(
top: MediaQuery.of(context).size.height / 1.2,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgList, (index, url) {
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: current.value == index
? Colors.white
: Colors.brown),
);
}),
));
},
valueListenable: current,
)
]));
}
}
I want to set my carousel item width but it didn't work.
this is my code
return CarouselSlider(
height: 480.0,
items: [0,1,2].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: 500,
margin: EdgeInsets.symmetric(horizontal: 11.0),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(image: AssetImage(imageString[i].toString()), fit: BoxFit.cover),
),
);
},
);
I would like to use the enableInfiniteScroll property but 1.2.0 is not available on pub yet.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.