IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 09:56:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

change images for mobil and remove unused text

Browse Source
This commit is contained in:
ogerly 2022-04-07 10:20:35 +02:00
parent 10bcb93ba3
commit 9f39ac883f
1 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/Auth/Carousel.vue
View File

@ -3,47 +3,17 @@
<b-carousel
id="carousel-1"
v-model="slide"
:interval="60000"
:interval="30000"
controls
indicators
background="#ababab"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="/img/template/Foto_01.jpg"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1324/2324/?image=50">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="/img/template/Foto_01.jpg"></b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1324/2324/?image=50"></b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1024/2024/?image=58"></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100 h-100"
src="https://picsum.photos/1024/2024/?image=83"
alt="image slot"
/>
</template>
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image" class="w-100 h-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1024/2024/?image=83"></b-carousel-slide>
</b-carousel>
</div>
</template>
@ -76,4 +46,18 @@ export default {
height: 100%;
border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
}
@media screen and (max-width: 1398px) {
.carousel-item {
width: 116%;
top: 101px;
}
}
@media screen and (max-width: 1200px) {
.carousel-item {
width: 129%;
top: 118px;
left: -75px;
}
}
</style>