EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust slider breakpoints for smaller teaser sizes on mobile devices

Browse Source
This commit is contained in:
Björn Fromme
2020-01-28 12:17:35 +01:00
parent ebdac48f59
commit 75c6c01bea
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+19 -7
View File
@@ -160,7 +160,7 @@ new Vue({
accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
mobileFirst: true,
infinite: false,
slidesToShow: 1.25,
slidesToShow: 1.15,
slidesToScroll: 1,
arrows: false,
dots: false,
@@ -175,15 +175,21 @@ new Vue({
}
},
{
breakpoint: 830,
breakpoint: 992,
settings: {
slidesToShow: 2.75,
}
},
{
breakpoint: 480,
breakpoint: 640,
settings: {
slidesToShow: 2.25,
slidesToShow: 2.5,
}
},
{
breakpoint: 384,
settings: {
slidesToShow: 1.75,
}
}
]
@@ -196,7 +202,7 @@ new Vue({
accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
mobileFirst: true,
infinite: false,
slidesToShow: 1.25,
slidesToShow: 1.15,
slidesToScroll: 1,
arrows: false,
responsive: [
@@ -216,9 +222,15 @@ new Vue({
}
},
{
breakpoint: 768,
breakpoint: 640,
settings: {
slidesToShow: 2.25,
slidesToShow: 2.5,
}
},
{
breakpoint: 384,
settings: {
slidesToShow: 1.75,
}
}
]