This one is for Big image slider
<VueSlickCarousel v-if="changeableImages && changeableImages.length > 0"
ref="c1"
:focusOnSelect="true">
<div v-for="(image, imageIndex) in changeableImages" :key="'c1_image_' + imageIndex">
<img :src="image.imagePath">
</div>
</VueSlickCarousel>
This one is for small image slider.
<VueSlickCarousel v-if="changeableImages && changeableImages.length > 0"
ref="c2"
:asNavFor="$refs.c1"
:slidesToShow="4"
:focusOnSelect="true">
<div v-for="(image, imageIndex) in changeableImages" :key="'c1_image_' + imageIndex">
<img :src="image.imagePath">
</div>
</VueSlickCarousel>
on view methods:
imageFilterChange() {
let newChangeableImages = [];
changeableImages.$set(this, 'changeableImages', newChangeableImages);
}
My problem: when I change the changeableImages from vue methods, sometimes asNavFor doesn't work properly. I mean, small slider don't navigate proper image from big slider.
package used: "vue-slick-carousel": "^1.0.6" on "vue": "^2.6.11"
Related
I'm just learning NextJs and in one of my projects I'm implementing images using the component. For styling I use TailwindCSS.
When I start scrolling down on my page, the images overlap my fixed header, which is very unexpected. I've tried different layout options for the image component (responsive, fill, intrinsic) but none of them solve my problem. I also tried to give the component a width and height.
When inspecting the image in the dev-tools I see that the images are positioned absolute, even though I haven't set their position to absolute. Is there a way to prevent the images from overlaying? I've tried to change the position and z-index of the image component but nothing seems to have an effect.
Example-Code of the Navigation Component:
const Nav2 = () => {
return (
<div className="fixed bg-slate-200 w-full">
<ul className="flex gap-3 p-5 justify-end">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
);
};
export default Nav2;
Example Code of the Page with the Image
import Image from "next/image";
import Logo from "../public/Fraport_logo.png";
import Nav2 from "../components/Nav2";
const Ihse = () => {
return (
<div>
<Nav2 />
<section className="px-5 py-9 bg-gray-100 pt-20">
<div className="md:max-w-6xl md:mx-auto h-[200vh]">
<div className="md:flex md:flex-row-reverse items-center">
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="responsive" />
</div>
<div className="md:w-1/2 md:pr-14">
<h3 className="text-2xl font-bold mb-6">Headline</h3>
<p className="mb-6">Lorem Ipsum</p>
</div>
</div>
</div>
</section>
</div>
);
};
export default Ihse;
Thank you in advance
Please add layout="fill" property and objectFit="cover" Property like this
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="fill" objectFit="cover" />
</div>
and you need to change the position "relative" in the image wrapper div
I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
I have a transition-group containing two or more images. This is working, but now I want to preload the next image in line.
This is what I have now:
<template>
<transition-group name="fade" tag="div">
<div v-for="i in [currentIndex]" :key="i" class="absolute inset-0">
<img :src="currentImg" class="object-center object-cover w-full h-full" rel="preload" />
</div>
</transition-group>
</template>
Every time I update currentIndex, currentImg gets computed, so that works. Now I need to preload the currentIndex + 1 image. Is this possible?
If you want to preload an image, you can previously initialize an image in JavaScript, that's not mounted in the DOM:
var preloadingImg = new Image;
preloadingImg.src = "/path/to/img.jpg"; // replace string with img source of [currentIndex + 1]
// optional callback when it's loaded:
preloadingImg.onload = function(event) {
// ...
}
As long as the browser keeps the image in cache, the source link will not be requested again.
(Deleting the variable has no influence in the cache of the image.)
Is there any way to scroll top in ionic specific element when a viewdidenter?
<ion-content nopadding>
<div class="notes-main" *ngFor="let item of notesGroupDate">
<h3 class="heading"*ngIf="today" #scrolltop>{{item[0]| date}}</h3>
<div no-border *ngFor="let data of item[1]">
<div class="notes-subject">{{data.field_subject}} {{data.field_assigned_to_class}}</div>
<div class="notes">
<div class="notes-data private" *ngIf="data.field_private_notes_title || data.field_private_notes">
<div class="notes-icon" *ngIf="data.field_private_notes_title || data.field_private_notes">
<ion-img src="../../assets/Diary_PersonalNote.svg"></ion-img>
</div>
<div class="notes-details">
<div class="notes-title">{{data.field_private_notes_title}}</div>
<div class="notes-description">{{data.field_private_notes}}</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
I want to scroll top <h3 class="heading"*ngIf="today" #scrolltop>{{item[0]| date}}</h3> this element if condtion satisfy on ionviewdidenter.
You can do it like this to scroll to the top of the page each time you go back to the page:
import { Component, ViewChild } from '#angular/core';
import { IonContent } from '#ionic/angular';
#Component({...})
export class MyPage{
#ViewChild(IonContent) content: IonContent;
scrollToTop() {
this.content.scrollToTop(400);
}
ionViewDidEnter(){
this.scrollToTop();
}
}
It sounds like that's what you are looking for, unless this is a simplified version of your real app, in which case we will need to use scrollToPoint and then write some code to get the y offset for that spot.
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>