I am using fullpage.js for a website I am building but am having a lot of issues with setting the paddingTop setting and the screen displaying properly.
For example:
Here is Chrome on a 13" Macbook Air http://cl.ly/image/1D2P1S3Z291W
Here is the screen on an iPad 2 (vertical) view: http://cl.ly/image/1m2M3H1E2E3n
The problem is the gap at the top. The gap appears on screens larger than 13" laptops too
Here is my JavaScript:
$('.fullPage').fullpage({
responsive: 768,
autoScrolling: false,
anchors: ['home', 'customResearch', 'onlineCommunities', 'buzzSection', 'ourStorySection', 'howWeWorkSection', 'aliciaProfile', 'patProfile', 'clientsSection', 'experienceSection', 'contactUs'],
easing: 'easeInOutCubic',
fixedElements: '#mainNav',
fitToSection: false,
verticalCentered: true,
loopHorizontal: false,
scrollOverflow: false,
css3: true,
paddingTop: '147px',
resize: false,
afterLoad: function(anchorLink, index) {
if($.inArray(anchorLink, ['aliciaProfile', 'patProfile'])) {
var parent = $('[data-anchor="' + anchorLink + '"]');
if(isElementInViewport(parent)) {
animateProfileSubImages(parent);
}
}
var expTblCell = $('#experience').find('.fp-tableCell');
$(expTblCell).attr('style', '');
}
});
There is no padding on the HTML body. I am just needing the top image section to sit directly underneath the nav on all screens (regardless of screen size)
Related
Thanks in advance for any help. I have been trying to resolve this for over 48hrs, no matter what I try I hit a wall.
I have a grid (table), I want the size to remain the same 940px across all device sizes and on any small devices for overflow-scroll so overflow can be side scrolled. I am using Webflow builder so I don't want to all custom code. Just hopefully modify the slick slider code or webflow settings.
Image of table -desktop view
I am using slick slider to turn it into a carousel, I disabled all touch/swipes so carousel was not slidable/swippable unless arrow were used.
Code inserted to disable:
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
Everything on desktop works as expected. However on mobile the carousel shows all three slides, even settings are set to 1
slidesToShow: 1,
slidesToScroll: 1,
AND
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
However on mobile it continues showing all three slides on side scroll, arrows controls scroll one by one.
mobile you can see more than one slide- separated by green side cells
I want to only view one slide on mobile with overflow side scroll grid so you can see full grid but not all three slides.
Ready only: Webflow - Anastasia Stallcop Portfolio
https://preview.webflow.com/preview/anastasiastallcop-09463966869e63530c18a?utm_medium=preview_link&utm_source=designer&utm_content=anastasiastallcop-09463966869e63530c18a&preview=e4ad52b0551c0685b1b170f3fd29714d&pageId=62b67bbd0134354aa31af254&workflow=preview
Published:
https://anastasiastallcop-09463966869e63530c18a.webflow.io/case-study-template-copy-2
HEAD CODE
<style>
.text-contain {pointer-events: none;}
.list::-webkit-scrollbar {
display: none;
}
</style>
BODY CODE
<!-- NEW Dragable Slider -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
// when document is fully loaded
$( document ).ready(function() {
$('.list').slick({
dots: false,
speed: 700,
infinite: true,
swipe: false,
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
});
$('.slider-prev').click(function(){
$("#slider-id").slick('slickPrev');
});
$('.slider-next').click(function(){
$("#slider-id").slick('slickNext');
});
});
</script>
I figured it out by complete accident! I was testing a different slider (splide) I had copied from a youtubers website and noticed it would work on that one when I pasted my contents into it but not on my original slider.js, so I noticed the only different was the wrapper width and setting the parent container to overflow-scroll.
So the solution: I had set the wrapper width to wider than my slide/table (940px is my slider so I set wrapper to 1480). I also set overflow on the parent container and it finally worked however before I set it for mobile devices only it was creating a scroll bar with extra space on desktop so I modified desktop to 940px wrapper (remover overflow-scroll) and ipad to mobile devices only to 1480 (with overflow-scroll) - this removed scroll bar and extra space on desktop while being perfect for mobile. YAYYYYY!
"swiper": "^4.2.6"
Swiper demo
Swiper repository
Hello,
I have this slider setup:
const options = {
wrapperClass: 'slides-list',
slideClass: 'slide',
centeredSlides: true,
slidesPerView: 'auto', // Default slides per view
spaceBetween: 20,
loop: false,
navigation: {
prevEl: '.slider_btn--prev',
nextEl: '.slider_btn--next'
},
pagination: {
el: '.slider_pagination',
clickable: true,
},
speed: 300,
on: {
init: function () {
console.log('swiper initialized');
},
}
};
So i have this setup. Black border for the slider wrapper, red border for the slides list.
Works fine on mobile
But lets face the moment when all the slides width can fit into the slider wrapper, how can i centered then and maybe disable the drag option.
I dont know the slides widths, so right now in the example i have just 3 slides and this is the current behavior
And this one would be the desired one
I cannot use media queries because i dont know when the slides gonna fit in the container. so, Swiper has someway to achieve this ?
Thanks in advance.
I dont want to use slidesPerView: 3, as i said, the point is to be
able to check all the slides that we have, then if all of them can fit
in the container, center them. Not to force X number of slides into
the view
Javascript
const slider = new Swiper(element, {
slidesPerView: 'auto',
watchOverflow: true
});
slider.on('resize', function (instance) {
element.classList.toggle('.slider-active', instance.virtualSize > instance.size);
});
CSS
.swiper-wrapper {
justify-content: center;
}
.slider-active .swiper-wrapper {
justify-content: normal;
}
This way you apply css to center the slides when te slide wrapper does not overflow the container. And visa versa to reset
I am using Alvaro fullpage plugin, and it works well.
But i have discovered some Iphone with IOS 9.2 and safari browser issue.
I have some code in afterLoad callback, it checks what slide is visible. If it's first slide, i am removing scroll-menu, and when slide is not first, i am adding this class.
And this works well, but on orientation change, IOS don't respect this callback.
Below my Javascript code for Fullpage plugin:
$('#fullpage').fullpage({
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
keyboardScrolling: true,
//animateAnchor: true,
recordHistory: true,
// Callback - issue on orientation change
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(index > 1){
header.addClass("scroll-menu");
}
if(index == 1){
header.removeClass('scroll-menu');
}
}
});
I don't have any idea, how to fix this.
I put a slideshow on my Blogger (I downloaded a theme with slideshow) and I want to edit this theme. I'm stuck on the picture size of this slide.
I found this code:
var slider1 = new skewSlider('#main-slider', {
height: 450,
imgAlign: 'xMidYMid slice',
slidePercent: 50,
visibleSiblings: 1,
navigationArrows: false,
siblingsNavigation: true,
navigationDots: false,
slideShow: 5000,
navigationArrows: true,
slideMargin: 0,
skew:-15,
breakpoints: {
tablet: {
maxWidth : 1024,
slidePercent : 60,
height:350,
showCaption: false,
skew:0
},
phone: {
maxWidth : 600,
slidePercent : 70,
height:300,
skew:0
}
}
});
I found that the option slidePercent changes the size of photos in my slide show, but this is not everything I want. I need my slide to be scaled to fit in the slide bar, and this option only changes it to a percentage of the picture's full size.
How do I do it so that it fits the slide bar?
I find what I need.
On this:
imgAlign: 'xMidYMid slice',
I put this:
imgAlign: 'xMidYFull slice',
and
slidePercent: 40
So. You can lock this. Thank you.
I am trying to use one of these two jquery plugins (awkward/Coda Slider 3) for sliding DIV content.
Everything works fine until I am try to set dynamic content (with js) after the plugin object has been created.
The DIVs show only content that loaded before the plugin created.
Any ideas or other DIV slider plug-in's for this goal.
Thanks.
the ajax working perfect I have checked it.
this is the load function for coda slider $('#slider-id').codaSlider();
and for "awkward" :
$(window).ready(function () {
$("#showcase").awShowcase(
{
content_width: 700,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'fade', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
Kevin Batdorf has improved on the Coda Slider with something called Liquid Slider which supports ajax and callbacks.
Read a tutorial on it here
And it is available on github.