I'm initializing swiper with below code:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
slidesPerView: 3,
autoplay: {
delay: 3000,
},
});
But when the page loads it shows big blue space followed by slides which adds to Layout shift in Google Pagespeed score. Can anybody point out whats wrong?
E D I T:
Just select the swiper default wrapper and set it's height & width properties to whatever size you wish like this:
.swiper-wrapper {
max-height: 100vh;
height: 100vw;
}
By default this should do it, you might also want check if you didn't set specific dimensions on single slides in your css!
Related
"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 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'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?
I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
Setting background property of cropper object to false fixes this problem.
You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container
In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.
I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!
Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/
Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});
You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...
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.
We are using Galleria library (http://galleria.io/) for dynamically generating slideshow from a set of user selected images. The user can also select a few options like height, width, transition speed, show/hide thumbnail carousel etc. and these settings are applied to Galleria options.
Now when user selects to hide carousel, I set relevant options which makes the thumbnails in the carousel disappear. However, the container div (with css class galleria-thumbnails-container) still occupies some whitespace. I tried changing a few css attributes of this class as well as galleria container w/o any luck.
Things I have tried:
After selecting div with class "galleria-thumbnails-container", change height to 0. No change observed.
After selecting div with class "galleria-thumbnails-container", change display to none. No change observed.
After selecting div with class "galleria-container notouch", reduce height by say 70 px. This reduced the height of main image in the slideshow.
I have gone through Galleria doc but they do not seem to have an option to handle this. So it has be a css hack. Any ideas?
Thanks.
You can turn off the thumbnails by using the following option on the script:
$('#galleria').galleria({
thumbnails: "false"
});
Documentation
thumbnails
type: Boolean or String
default: true
Took a look at your link and that space below your slider is made due to the fact that your images are not scaling according to the width/height you specified in your script, and also due to some spacing on the .galleria-stage class. Try this to fix it:
javascript
$('#slideshow_1749').galleria({
data_source: mmod_slideshow_data,
dummy: '/images/default.jpg',
showCounter: false,
width: 300, /* scale accordingly */
height: 300, /* scale accordingly */
autoplay: 3000,
carousel: false,
thumbnails: false,
showImagenav: false,
carousel: false,
thumbFit: false,
thumbMargin: 0,
imageCrop: "height"
});
CSS
.galleria-stage { /* modify line 17 of your galleria.classic.css stylesheet */
bottom:10px; /* define the bottom spacing, same as top/left/right */
}
Just a side note, but why use such a complex plugin for such a simple task? You can get a cleaner result by using the jQuery Cycle plugin.
I could not solve the problem with jquery / gallery.js -but this workaround does the job:
overrride styles dynamicly (adapt to your values needed):
function fixcss()
{
// dynamic overides of styles because all ties to change css with jquery
//galleria.js unsucsessful...
if (! thumbnails)
{
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 60px !important; } \
.galleria-info {bottom: 0px !important } \
.galleria-thumbnails-container {height: 0px \
!important;}";
document.body.appendChild(sheet);
}
if ( ! showInfo ){
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 80px !important; } \
.galleria-info {bottom: 10px !important }";
document.body.appendChild(sheet);
}
};
$(document).ready(function() {
Galleria.loadTheme('++resource++fgrcon.slideshow/galleria.classic.js');
Galleria.configure({
transition: 'fade',
transitionSpeed: transitionSpeed,
autoplay: galleryduration,
lightbox: lightbox ,
showInfo: showInfo ,
showCounter: showCounter ,
showImagenav: showImagenav,
thumbnails: thumbnails ,
height: galleryheight
});
fixcss();
Galleria.run('#galleria');
}
);