I need help with lazy load. I am using this swiper here (https://github.com/nolimits4web/swiper)to create a full screen swiper on a website which is set on autoplay and has a fade in effect. To reduce the loading time I also included lazysizes (https://github.com/aFarkas/lazysizes) because with the lazy load within the swiper my captions didn't work. They were always overlapping.
However my issue now is that somehow it loads images even then they are not in the viewpoint. I am pretty new to coding, so please bare with me :) I post my code below and hope that someone can help me out here or explain what I need to do. Thanks so much!
<div class="swiper-container">
<div class="swiper-wrapper">
<picture alt="" class="swiper-slide">
<source class="lazyload" media="(max-width:600px)"
data-srcset="images/Loremipsum_mobile.jpg"
/>
<source class="lazyload"
media="(max-width: 1024px)"
data-srcset="images/Loremipsum.jpg"
/>
<img
class="lazyload"
data-src="images/Loremipsum.jpg"
/>
<div class="image_caption">Titel: Lorem Ipsum</div>
</picture>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="navbar">
<a href="4s_impressum.html" id="desktop" >Impressum & Datenschutzerklärung</a>
i
</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.js"></script>
<!-- Lazysizes -->
<script src="js/lazysizes.min.js" async=""></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyload: true,
loop: true,
effect: 'fade',
// speed: 0,
keyboard: {
enabled: true,
// onlyInViewport: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 3000,
//disableOnInteraction: true,
loop: true,
},
});
</script>
Related
I've used auto autoplay loop Swiper in many instances where slides are rendered server-side but this is the first time I'm using in conjunction with a client-side framework such as Alpine.js.
I got things working client-side within Alpine... And it works when using the left right navigation buttons, BUT... it does NOT autoplay scroll, due to, what I'm guessing, is the fact that Swiper doesn't know how many slides it has to work with in the Alpine x-for loop?
Is there a way that the number of slides can be set during Swiper init so that it knows how many slides it has to work with and in-turn autoplay? Or am I just missing something?
I've simplified and parsed out my code below for readability sake, just use as an example of what's generally happening with the nested Alpine loop.
<div x-data="{suggestions: [], 'isLoading': true}"
x-init="fetch('/p/items/suggested/?i=123')
.then(response => response.json())
.then(response => {
suggestions = response.suggestions;
isLoading = false;
})">
<div x-data="{swiper: null}"
x-init="swiper = new Swiper($refs.suggcontainer, {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: true,
pauseOnMouseEnter: true
},
slidesPerView: 2,
spaceBetween: 8
})">
<div class="swiper" x-ref="suggcontainer">
<div class="swiper-wrapper">
<template x-for="sugg in suggestions" :key="sugg.id">
<a x-bind:href="sugg.url_slug" class="swiper-slide">
<img :src="sugg.image_thumb" :alt="sugg.name" />
</a>
</template>
</div>
</div>
</div>
</div>
I try to add navigation button and pagination fraction on my swiper.js
I can see navigation element and button element in html code. I can see my swiper which is displayed but buttons and pagination are not displayed.
Here is my code
<!-- Slider main container -->
<div class="swiper-container swiperhome">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" style="background-image:url(http://www.mylink.com/fete_test.jpg)">
<div class="slide-card">
<h3 id="fete-des-fruits">Fete des fruits</h3>
<p>texte qui remonte</p>
En savoir plus
Toutes les actualités
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://www.mylink.com/fete_test2.jpg)">
<div class="slide-card">
<h3 id="autre-manifestation">Autre manifestation</h3>
<p>Autre texte qui remonte</p>
En savoir plus
Toutes les actualités
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination-home">Pagination</div>
<!-- navigation buttons -->
<div class="swiper-home-button-prev">Précednt</div>
<div class="swiper-home-button-next">Suivant</div>
</div>
<script>
var swiper = new Swiper('.swiper-container',
{ observer: true,
observeParents: true,
grabCursor: true,
keyboard: {enabled: true,},
pagination: {el: '.swiper-pagination-home',
type: 'fraction',
},
navigation: {nextEl: '.swiper-home-button-next',
prevEl: '.swiper-home-button-prev',
},
a11y: { prevSlideMessage: 'Diapo précédente',
nextSlideMessage: 'Diapo suivante',
firstSlideMessage: 'Première diapo',
lastSlideMessage: 'Dernière diapo',
},
});
</script>
</div></div>
Can you help me please ?
Ok, i found the solution.
I just replaced swiper-pagination-hom by swiper-pagination in my swiper and in my html and all is good.
the same for buttons...
strange but ok
I am trying to create a Vue component that bounces when the mouse cursor hover over it. I am using the animate.css library and changing the component class with #mouseover then resetting it on #mouseout.
It is almost ok. The only issue occurs when the user stops the cursor near the border. Due to the animation behavior, the mouseover/mouseout events will be called repeatedly, causing the component to flick. I could minimize it using a timeout before resetting the class but the behavior is still uncertain sometimes.
Is there any elegant way (or Vue way) to solve it?
Here is my code:
Html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOut"
>
IMMEDIATE
</button>
<br><br><br>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOutTimeout"
>
WAIT JUST A BIT
</button>
</div>
</body>
Javascript:
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function() {
console.log('over');
this.classes = ['animated', 'bounceIn']
},
hoverOut: function() {
console.log('out');
this.classes = []
},
hoverOutTimeout: function() {
setTimeout(() => {
console.log('out');
this.classes = []
}, 1000);
},
}
})
https://jsfiddle.net/marcellorvalle/eywraw8t/477611/
Neat. Looks like as the button changes size during the animation, the mouse goes in and out of hover state because the edge is moving.
I added a div around each button, and attached the hover triggers to the divs instead of the buttons:
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<div #mouseover="hoverOver" #mouseout="hoverOut">
<button :class="classes">IMMEDIATE</button>
</div>
<br><br><br>
<div #mouseover="hoverOver" #mouseout="hoverOutTimeout">
<button :class="classes">WAIT JUST A BIT
</button>
</div>
</div>
</body>
https://jsfiddle.net/jmbldwn/kbswLpto/5/
I currently have a vue component that I use to select drinks to be ordered.
You can increment or decrement the amount of drinks per type.
There are 2 buttons (Increment and decrement), the decrement button needs to be hidden when the amount of ordered drinks for that type is equal to 0. This can easily be accomplished by using :class="drink.amount > 0 ? 'visible':'invisible'" using the tailwind classes which sets visibility:hidden css property. When using this method it looks like:
Now I tried to implement css animations (sliding the button underneath the drink block to hide it and later hide from dom). I want to implement this using the vue transition component since this is heavily used throughout the application.
Now I have the problem that the vue transition component only works with a limited amount of vue functions among which v-if and v-show. v-if removes the html from the dom. v-show sets the property display:none both of these functions have the effect of shifting the buttons:
I would like to known how I can use the vue transition component and get the requested aligned buttons as I got without the animation.
<div v-for="drink in drinks" class="w-full flex">
<div class="mx-auto flex">
<transition name="transition-slide-right">
<div class="bg-white w-16 h-16 flex justify-center items-center mt-12"
v-show="drink.amount">
<p>-</p>
</div>
</transition>
<div class="bg-brand w-32 h-24 flex justify-center items-center my-8 z-30">
<p>{{drink.name}} ({{drink.amount}})</p>
</div>
<div class="bg-white w-16 h-16 flex justify-center items-center mt-12">
<p>+</p>
</div>
</div>
</div>
And accompanying script.
<script>
export default {
name: "CreateTransaction",
data: function() {
return {
drinks: [
{name: 'Cola', price: '1.0', amount: 1},
{name: 'Sinas', price: '1.0', amount: 0}
],
}
}
}
</script>
Finally the css:
.transition-slide-right-enter-active, .transition-slide-right-leave-active {
transition: transform .5s;
}
.transition-slide-right-enter, .transition-slide-right-leave-to {
transform: translateX(100%);
}
As a current workaround I removed the transition component, added the transition-slide-right-enter-active class and if the count == 0 I conditionally add the transition-slide-right-enter class. This does not hide the element but hiding it is not required since I is moved underneath the center block.
you can try the following code
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div class="row" id="todo-list-example">
<div v-for="(drink,index) in drinks" class="w-full flex">
<transition name="transition-slide-right"><button v-show="drink.amount" type="button" class="btn btn-danger" v-on:click="click1(index)">-</button></transition>
<a class="btn btn-success" >{{drink.name}} ({{drink.amount}})</a>
<button type="button" class="btn btn-danger" v-on:click="click2(index)">+</button>
</div>
</div>
<style>
.w-full{margin:10px 0px;}
.transition-slide-right-enter-active, .transition-slide-right-leave-active {
transition: transform .5s;
}
.transition-slide-right-enter, .transition-slide-right-leave-to {
transform: translateX(100%);
}
</style>
<script>
new Vue({
el: '#todo-list-example',
data(){
return {
drinks: [
{name: 'Cola', price: '1.0', amount: 1},
{name: 'Sinas', price: '1.0', amount: 1}
],
}
},
methods:{
click1:function(index){
this.drinks[index].amount=this.drinks[index].amount-1;
},
click2:function(index){
this.drinks[index].amount=this.drinks[index].amount+1;
}
}
})
</script>
I use slidesJS in my homepage.Now I want to click a button to make it pause,but it seems that there is no pause option in slidesJS document.
SlidesJS document:
http://slidesjs.com/
HTML makeup
<!--slider start-->
<div id="slides">
<div class="slider">
<div class="slide"><img src="http://www.fotolovec.cz/foto/albums/Fauna/Ptaci/normal_Brhlik02.jpg" /></div>
<div class="slide"><img src="http://mw2.google.com/mw-panoramio/photos/medium/34484850.jpg" /></div>
</div>
<div id="navbar">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Pause
</div>
</div>
<!--slider end-->
JS:
<script type="text/javascript">
jQuery(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 2000,
hoverPause: true,
autoHeight: true,
effect:'slide',
container: 'slider'
});
});
</script>
function sliderPause(){
clearInterval($('#slides').data('interval'));
}``
In your jquery.slides.js file do a search for _this.stop(true);
It shows about 3-4 times, next & previous click.. and you will also see it showing for paginationLink.click
The problem i was having was the slider was stop sliding after click either previous, next or pagination. I needed the slider to restart.. so what i did was add a setTimeout to play()
_this.stop(true);
setTimeout(function ()
{ _this.play(true) }, 3000);