scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

use frameless.js for carousel breakpoints

Browse source
This commit is contained in:
Technoboy10 2016-08-02 09:17:13 -04:00
parent 2da07923ca
commit 63c67a1d2d
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/carousel/carousel.jsx
View file

@ -5,6 +5,8 @@ var Slider = require('react-slick');
var Thumbnail = require('../thumbnail/thumbnail.jsx'); var Thumbnail = require('../thumbnail/thumbnail.jsx');
var frameless = require('../../../lib/frameless.js')
require('slick-carousel/slick/slick.scss'); require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss'); require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss'); require('./carousel.scss');
@ -35,17 +37,17 @@ var Carousel = React.createClass({
slidesToScroll: 5, slidesToScroll: 5,
variableWidth: true, variableWidth: true,
responsive: [ responsive: [
{breakpoint: 480, settings: { {breakpoint: frameless.mobile, settings: {
arrows: true, arrows: true,
slidesToScroll: 1, slidesToScroll: 1,
slidesToShow: 1, slidesToShow: 1,
centerMode: true centerMode: true
}}, }},
{breakpoint: 640, settings: { {breakpoint: frameless.tablet, settings: {
slidesToScroll: 2, slidesToScroll: 2,
slidesToShow: 2 slidesToShow: 2
}}, }},
{breakpoint: 942, settings: { {breakpoint: frameless.desktop, settings: {
slidesToScroll: 4, slidesToScroll: 4,
slidesToShow: 4 slidesToShow: 4
}} }}