Develop Reference

Hide elements while changing slide in swiper js

I am using Swiper js for slides on the page. each slide has another image element positioned part inside the slide image and a part outside of it. so Whenever slide changes the part outside the slide can be seen.
I tries to use overflow: hidden for different classes of swiper js but did not work.
Here is the link you can check the slider: https://project-instock.netlify.app/index1.html#0

I did it by adding fadeEffect: { crossFade: true, }.
Initially, the script was
var swiper = new Swiper('.mySwiper5', {
effect: 'fade',
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
});
Which has fade effect enabled but did not mention the kind of fade.

Swiper Slider Mouse Scroll And Looping Content

I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.
My swiper slider setup looks like this:
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
mousewheelControl: true,
slidesPerView: "auto",
freeMode: true,
followFinger: true,
loop: true
});
Codepen:
https://codepen.io/Dennisade/pen/ZPygbr
I appreciate any help

As of Swiper version 4.5.0, there are three things that cause errors in your code :
First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.
Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter.
Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.
Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :
mousewheel: {
releaseOnEdges: true,
},
You can also drop direction: "horizontal" and followFinger: true in this case.
So the solution is :
var swiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
freeMode: true,
loop: true,
loopedSlides: 8 // according to the codepen
mousewheel: {
releaseOnEdges: true,
},
});
Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb

Fade in on scroll doesn't work in mobile browser

I am using this code to add class "show" to my images so when a person scrolls down, images show up. It works on desktop (tested in chrome, with mousescroll and with touch simulation) but it does not work in chrome on mobile device. Swipe(scroll with touch) is not detected. Page goes down but images dont get that .show. I am using this inside fullpage.js+iscroll.js page.
You can try this at: http://www.vinarijapantic.com/apps/onePage/project.html
Any ideas?
jQuery(document).ready(function($) {
function showImages(el) {
var windowHeight = jQuery(window).height();
$(el).each(function() {
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 250 > thisPos) {
$(this).addClass("show");
}
});
}
/*full page library */
var SCROLLING_SPEED = 600;
$('#fullpage').fullpage({
scrollOverflow: true,
css3: true,
controlArrows: true,
loopHorizontal: false,
easing: 'easeInOutCubic',
easingcss3: 'ease-out',
autoScrolling: true,
scrollingSpeed: SCROLLING_SPEED,
//anchors:['s0', 's1', 's2', 's3']
afterLoad: function(anchorLink, index) {
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
if (slideIndex == 0) {
$('.slide-' + index).addClass('show');
} else {
$('.slide').removeClass('show');
}
if ($('.bigScroll').hasClass('active') && $('.bigScroll').closest('.section').hasClass('active')) {
console.log($(".bigScroll").height());
showImages('.bigScroll img');
$('.fp-scrollable').scroll(function() {
showImages('.bigScroll img');
});
}
}
});
});

Enable JavaScript on mobile web
There are situations where the browsers throw an error like
"when trying to access ------- on a mobile device"
it means the web browser on your device needs to have JavaScript turned on before you load the page.
To turn on JavaScript, open the settings menu for your mobile web browser and look for the JavaScript option.

It's not worth the technical debt to build your own lazy loading plugin (which is a colloquial name for what you are trying to do). Use a contributed jQuery plugin instead.
I've used this one with great success in the past: https://github.com/tuupola/jquery_lazyload
It's really easy to use - just add an data attribute to your HTML img tag and instantiate the plugin with a simple jQuery reference.
HTML:
<img class="lazy" data-original="img/example.jpg">
JS:
$("img.lazy").lazyload();

FullPage.js paddingTop issues on different screen sizes

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)

Prevent Auto Slide using Jquery

I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks

try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!