So that the swiper listens and changes the active slide when the variable changes.
When clicking on the span, the state would change, this is a change, and Swiper reacted to this change.
Something like that...
import { Swiper, SwiperSlide} from "swiper/react";
const SwaiperBlock = ()=>{
const [indexSlide, setIndexSlide] = useState(1);
return<>
<span onClick={()=>setIndexSlide(1)} > slide 1 </span>
<span onClick={()=>setIndexSlide(2)}> slide 2 </span>
<span onClick={()=>setIndexSlide(3)}> slide 3 </span>
<Swiper
initialSlide={indexSlide}
>
<SwiperSlide>
here slide 1
</SwiperSlide>
<SwiperSlide>
here slide 2
</SwiperSlide>
<SwiperSlide>
here slide 3
</SwiperSlide>
</Swiper>
</>
}
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
Here is is the condition I need:
If there is one picture, just do not show the arrows on the sides; if there is more than one, then show it.
or you can find it in https://quasar.dev/vue-components/carousel
<template>
<div class="q-pa-md">
<q-carousel
swipeable
animated
arrows
v-model="slide"
v-model:fullscreen="fullscreen"
infinite
>
<q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
<q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
<q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
<q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
<template v-slot:control>
<q-carousel-control
position="bottom-right"
:offset="[18, 18]"
>
<q-btn
push round dense color="white" text-color="primary"
:icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
#click="fullscreen = !fullscreen"
/>
</q-carousel-control>
</template>
</q-carousel>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
return {
slide: ref(1),
fullscreen: ref(false)
}
}
}
</script>
Make an array of images and write this:
:arrows="photos.length > 1"
I am struggling solving my navigation q-carousel that I want, it is does not work.
It just shows default navigation only but not the custom one that I grab the code from the Quasar website.
My template:
<q-card-section class="q-pa-none" >
<div style="width:60%; padding-bottom: 250px"
class="bg-transparent text-center q-gutter-y-lg absolute-center ">
<q-carousel
animated
v-model="slide"
arrows
navigation
infinite
control-type="flat"
control-color="secondary"
class="bg-transparent text-center">
>
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
<q-btn v-if="active" size="lg" icon="home" color="yellow" flat round dense #click="onClick" />
<q-btn v-else size="sm" :icon="btnProps.icon" color="white" flat round dense #click="onClick" />
</template>
<q-carousel-slide :name="1" >1</q-carousel-slide>
<q-carousel-slide :name="2">2</q-carousel-slide>
<q-carousel-slide :name="3">3</q-carousel-slide>
</q-carousel>
</q-card-section>
My script:
export default {
data() {
return {
slide : 1,
}
}
}
Your code is actually working, but you kind of mixed opening and closing tags.
There is no open tag for </q-card-section>
There is no closing tag for your leading <div>
The below code should work for you:
<div
style="width: 60%; padding-bottom: 250px"
class="bg-transparent text-center q-gutter-y-lg absolute-center"
>
<q-carousel
animated
v-model="slide"
arrows
navigation
infinite
control-type="flat"
control-color="secondary"
class="bg-transparent text-center"
>
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
<q-btn
v-if="active"
size="lg"
icon="home"
color="yellow"
flat
round
dense
#click="onClick"
/>
<q-btn
v-else
size="sm"
:icon="btnProps.icon"
color="white"
flat
round
dense
#click="onClick"
/>
</template>
<q-carousel-slide :name="1">1</q-carousel-slide>
<q-carousel-slide :name="2">2</q-carousel-slide>
<q-carousel-slide :name="3">3</q-carousel-slide>
</q-carousel>
</div>
You should consider setting up auto formatting in your code editor/IDE to auto format your source code, if you are using VS Code you can do this quite easily: https://stackoverflow.com/a/29973358/13765033
This way, you shouldn't run into such trouble again (it also helps Stack Overflow users to read your source code).
I have a sidebar component that onclick toggles between closed and expanded, using the following functions:
const is_expanded = ref(localStorage.getItem("is_expanded") === "true")
const ToggleMenu = () => {
is_expanded.value = !is_expanded.value
// #ts-ignore
localStorage.setItem("is_expanded", is_expanded.value)
}
The value of is_expanded determines which class the component uses:
<template>
<aside :class="`${is_expanded ? 'is-expanded' : ''}`">
<div class="logo">
<img :src="logoURL" alt="Vue" />
</div>
<div class="menu-toggle-wrap">
<button class="menu-toggle" #click="ToggleMenu">
<span class="material-icons">keyboard_double_arrow_right</span>
</button>
</div>
.........
In the middle of the screen I have an iframe component which currently has a fixed margin-left so that it starts where the expanded sidebar ends, however I would like it to be dynamic and re-size when the sidebar is closed.
Is there a way I can reference the "is_expanded" variable from the sidebar component within the iframe component?
I'm trying to make a slider in a Vue 2.xx component. I'd like to insert custom text in the slider pagination indicator. Here's my (wrong) code. Can anybody please tell me how to insert a header inside the indicator and give it an active class when the slide is visible.
<hooper :auto-play="true" :play-speed="3000">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<hooper-navigation slot="hooper-addons">
<h3 class="active">
Example
</h3>
<h3>
2nd Example
</h3>
<h3>
Third example
</h3>
</hooper-navigation>
</hooper>
import {
Hooper,
Slide,
Pagination as HooperPagination
} from 'hooper';
export default {
components: {
Hooper,
Slide,
HooperPagination
}
}
</script>
Can anybody quickly help me please. Thanks!
Went through the hooper documentation and the closest thing to what you want is this:
https://baianat.github.io/hooper/examples.html#custom-controllers
It is not indicator-pagination but custom-controllers. You can easily write your own paginator and customize it however you want. And when the user clicks on one of the pages (dashes, links with custom text, whatever...) then you can just run something like:
this.$refs.carousel.slideTo(some_slide_number)
and that should slide to the proper slide. The whole thing will look something like this: (haven't tested it)
<template>
<hooper ref="carousel" #slide="updateCarousel">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<slide>
slide 5
</slide>
</hooper>
<div #click="goToSlide(1)">Example 1</div>
<div #click="goToSlide(2)">Example 2</div>
<div #click="goToSlide(3)">Example 3</div>
<div #click="goToSlide(4)">Example 4</div>
<div #click="goToSlide(5)">Example 5</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
goToSlide(slide_number) {
this.$refs.carousel.slideTo(slide_number);
},
updateCarousel(payload) {
this.myCarouselData = payload.currentSlide;
}
}
}
</script>