We Keep Coding

Swiper.js with lazy image loading initiating at the wrong height on mobile

I have updated my website to have lazy loading images with swiper.js.
When the page loads and swiper is initiated, swiper sets the height of the div containing the slides wrong. Its briefly sets the height to 460px which is the hieght on desktop. When the images are loaded the height is then updated to 186px which is correct for mobile.
I only noticed this after lazy loading was setup.
How can I stop swiper initiating at the wrong size?
This is what it looks like briefly for a second.
Example
The slide image is prefilled with a placeholder image, width 1200px, height 460px. Then CSS setting the image to width 100% and height auto;
This is my script.
const myswiperban = new Swiper('.swiper-container-ban-wide', {
loop: true,
pagination: {
el: '.swiper-pagination-ban-wide',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next-ban-wide',
prevEl: '.swiper-button-prev-ban-wide',
},
slidesPerView:1,
freeMode:true,
autoplay: {
delay: 3000
},
autoHeight:true,
preloadImages: false,
lazy: {
loadPrevNext: true
},
});
Any ideas?

I'm not sure if I'm understanding it correctly, but the Browser can't know the real height and width of the image until he has loaded the image. What you can do is add a height and width onto the images, when you already know them. And remove the initial height set by you.
Otherwise you can try to work with height: 0 and a transition, this way it shows the slider after the first image is loaded instead of going from big to small.

I think you need to edit auto height true to auto height false Making these changes will prevent swiper.js from creating an automatic height for your items
autoHeight:false, preloadImages: false,
lazy: { loadPrevNext: true },

Disable function in a slideshow plugin that centres the image everytime the browser is refreshed?

I am using a slideshow plugin that centres the images in the browser. I have removed part of the js script to to disable the function so that the images in the slideshow stay fixed and do not move as the browser size changes.
// Adjust image when browser is resized
$(window).resize(function(){
base.resizeNow();
});
However, the problem remains that when the browser is refreshed the image is centred again. I need it to remain at a fixed distance from the left of the browser at all times. How do I disable the part of the plugin script that centres the image every time the browser is refreshed?
Please view this page that I am working on to see my problem: http://georgewoolfe.com/new-website/yogurt-line.html

From the documentation of supersized.js
horizontal_center
Centers image horizontally. When turned off, the images resize/display from the left of the page.
So, consider setting horizontal_center to 0 in your script, i.e. the following region in yogurt-line.html:
$.supersized({
autoplay : 0,
transition : 0,
keyboard_nav : 1,
performance : 1,
vertical_center : 1,
horizontal_center : 1, // <- Set this to 0
fit_always : 1,
...
Then, you could adjust the distance from the left using CSS rules such as left, if needed.

If you set horizontal center to 0 (false) as recommended by #Yasa Akbulut,
you would want to adjust your css, first setting the position of the slideshow to not be absolute:
ul#supersized li {position:initial}
Then you can adjust the position in the page where you want the slideshow.
I made a JSFiddle to demonstrate:
http://jsfiddle.net/y3rqq561/2/

Adding hyperlinks to a javascript image array

I'm having a problem with a java carousel. The code is working fine on my page, but I want to add hyperlinks to the images, but I'm unsure how to achieve this. I've tried a few things, but its just caused the code to stop working, and the carousel to drop off the page.
As I say, its all working fine, but as soon as I alter the default code, it falters.
The code I have so far is:
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Any help is appreciated....

Check out the source here:
http://home.comcast.net/~jscheuer1/side/bgcarousel/demo_linked.htm
Great example. Just add a link into the slide text, and use CSS to style it to the width and height 100% of the slide box.

adding links to JavaScript image arrays

I've got some code here for a slideshow that I need to add links to, it is a JavaScript image array that works fine but I am not sure how to add links to each picture.
I'm very newbie with JS.
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [200, 235], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images_ads/image1.jpg"],
["images_ads/image2.jpg"],
["images_ads/image3.jpg"]
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

According to Dynamic Drive, the second key in the image array should be your URL value and the third value is the text you want to display
For instance:
["images_ads/image1.jpg", "http://www.stackoverflow.com", "Your text goes here"],

Caroufredsel infinite linear easing is adding margin after the last image that fits on screen

I'm using the CarouFredsel jQuery plugin at http://chiaroscurodev.telegraphbranding.com/ and as you can see, it is calculating the number of WHOLE images that will fit on the screen given the width of the browser. It then adds margin after that last image before scrolling the next images.
My code:
$("#carousel").carouFredSel({
width : "100%",
auto: {
duration : 40000,
easing : "linear",
timeoutDuration : 0,
pauseOnHover : "immediate"
}
});
I would like the carousel to infinitely scroll 100% of the browser without adding any margin after each image, just a constant stream of images.
Also, does anyone know how I could implement a feature where when you click an image it slides the carousel so that image is centered in the browser?
Thanks for your help.