Vue-Owl-Carousel workign fine using the basic model :
<carousel>
<img src="https://placeimg.com/200/200/any?1">
<img src="https://placeimg.com/200/200/any?2">
<img src="https://placeimg.com/200/200/any?3">
<img src="https://placeimg.com/200/200/any?4">
</carousel>
But when i use a loop on , the Carousel broke and shows all slides in column.
<carousel> // Not Working
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
<carousel> // Not Working
<template v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>
<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>
Thank you if you can help.
You can try:
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
Are you using axios to get data to the slides array from the database?. If so the template of vue is being rendered before the data is received in the array causing the carousel not to work. you can re render the vue component and it will work. I had same problem and re-rendering the vue solved it.
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
code worked for me :)
I had the same problem, just check if your slides data is true
try this code :
<carousel v-if="slides">
<img v-for="slide in slides" :src="slide.png">
</carousel>
Related
I am trying to add an image to the carouselItem of MudBlazor. Its not working correctly taking wrong width and height as well.
My code:
</MudCarouselItem>
<MudCarouselItem Transition="transition" Color="#Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="#Icons.Custom.Brands.MudBlazor" Size="#Size.Large" />
</div>
</MudCarouselItem>
<MudCarouselItem Transition="transition">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="#Icons.Custom.Brands.MudBlazor" Color="#Color.Primary" Size="#Size.Large" />
</div>
</MudCarouselItem>
Ok!, you should put your html or component inside, like this:
<MudCarousel Style="height:500px; width:100%" ShowArrows="true" ShowDelimiters="true" AutoCycle="true" TData="object">
<MudCarouselItem Transition="Transition.Fade" Color="#Color.Transparent">
<a href="#imageUrl.secure_url" target="_blank">
<img src="#your_image_url" width="500" height="500" alt="Italian Trulli">
</a>
</MudCarouselItem>
</MudCarousel>
I didn't understand exactly your problem, but tried this sample and it appears to be working:
https://try.mudblazor.com/snippet/GkQQuFvQaKGUBHwy
I'm getting some data from an API that contains an image and some other information. Now there's a problem in Nuxt js or maybe I'm wrong. Whenever I supply the path to the image in the :src it just doesn't work.
Here's my code:
<div v-for="(project, index) in projects" :key="project.p_id" class="swiper-slide">
<div :id="`index_${index}`" class="slide_wrapper">
<div class="background">
<img :src="getImgUrl(project.p_img_path)" alt="project cover image" />
</div>
<div class="details">
<div>
<div class="left">
<h2 style="color: black !impor tant">{{ project.p_label }}</h2>
<small>{{ project.p_date }}</small>
</div>
<div class="right">
<nuxt-link class="btn btn-secondary" to="/" #click="readMore">
<i class="fas fa-ellipsis-h"></i>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
script:
props: ['projects'],
methods: {
readMore() {},
getImgUrl(path) {
return '../../../' + path
},
},
Last thing, whenever I use required required('./assets/'+image.jpg') nuxt.js crushes in compilation always stops at 69%. I also tried required.context but it didn't work as well.
Any help will be appreciated. Thanks in advance.
In your template, change:
<img :src="getImgUrl(project.p_img_path)" alt="project cover image">
To:
<img :src="require(`../assets/${project.p_img_path}`)" alt="project cover image">
You shouldn’t need a method to return the path as a string, just use a template literal as above.
Ps. This assumes project.p_img_path = img/project_img/filename.jpg, so adjust as necessary.
The solution is that I had to put all the images inside the assets folder directly. Thank you all for your time.
I'm using vue-slick component but I have some problem with the v-for loop.
This is my code:
<slick
ref="slick"
:options="slickOptions"
class="float-left full-width slider-ingredients">
<div
v-for="ingredient in available_prots_source"
:key="ingredient.id"
#click="onSelectIngredient(ingredient.id, 'prots')"
class="slider-ingredient-item">
<div class="float-left ingredient-image">
<div class="content">
<img :src="ingredient.image" width="200" height="200" class="float-left cover-fit">
</div>
</div>
<h4 class="float-left full-width text-center ingredient-name">
{{ingredient.name}}
</h4>
<span class="float-left full-width text-center ingredient-details">
dettagli
</span>
</div>
</slick>
The problem is that my div is added outside the slick container. If I add a <div> just after the <slick> opening tag it render correctly but sees just one element even if my v-for add 4 or 5 elements.
What am I doing wrong?
How can I use slick with v-for loops?
from the official README (see method reInit in the README.md
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
Im following the step by step docs guide to use the plugin and i still cant see it working
VueJs 2x
VueCLI 3.9.3
main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
component
<div v-lazy-container="{ selector: 'img' }">
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
The objetive is to load images on the viewport but it loads all the photos
the error was that I needed to fix a size to the container so that the library could work, this way the images were not loaded all at the same time. (just add height)
<div v-lazy-container="{ selector: 'img' }" style='height: 500px;'>
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
I am using this vue carousel package, and I am trying to set the icons as navigation buttons, like this:
<carousel
:perPage="1"
:navigationEnabled="true"
:navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'"
:navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
<img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
<h4>{{ testimonial.title }}</h4>
<p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>
But, for some reason, it is not working, I get this as the output in the html:
Here the props are not dynamic so the code should be
<carousel
perPage="1"
:navigationEnabled="true"
navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
<img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
<h4>{{ testimonial.title }}</h4>
<p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>