Please I'm still new using VueJs and am working on a new project and I'm having issues adding images and text in Element UI Carousel for Vue, please how do I add images and text in the Carousel?
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
Here is the link to CodeSandbox
https://codesandbox.io/s/staging-sky-o82gq?file=/src/App.vue
You put content in the slides, by repeating the <el-carousel-item> and putting text/images inside it.
You can simply put content in like this:
<el-carousel :interval="4000" type="card" height="300px">
<el-carousel-item>
<div class="item">
<div class="item__content">
Text for slide 1
</div>
<img class="item__image" src="https://picsum.photos/300?random=1" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Another text for slide 2
</div>
<img class="item__image" src="https://picsum.photos/300?random=2" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Yet another for third image
</div>
<img class="item__image" src="https://picsum.photos/300?random=3" alt="" />
</div>
</el-carousel-item>
</el-carousel>
I have created an example where i add different images and some text to the carousel:
https://codesandbox.io/s/charming-hill-osoxh?file=/src/components/Carousel.vue
Does this answer your question?
Related
[UPDATE: SOLVED]
I am new to directus, I have problem in rendering image data from directus cloud api to my vue project.
How can I render UUID directus image? This is the json image
json image
and this is my vue app code
<script setup>
import Button from './Button.vue'
const { story } = defineProps(['story'])
//console.log(story.img)
</script>
<template>
<div class="card-wrapper shadow-lg shadow-slate-400 m-2 p-2 w-40 md:w-60 rounded-md flex flex-col justify-between">
<div class="content text-white">
<h2 class="text-2xl font-bold">{{ story.title }}</h2>
<!-- <h4 class="headline1 text-md font-semibold">{{ story.headline }}</h4> -->
<p>{{ story.article_body }}</p>
</div>
<div class="cat-ava flex justify-center items-center">
<img :src="`//https://my.directus-api.app/assets/${story.img}`" :alt="`${story.title} image`">
</div>
<div class="btn-wrapper flex justify-center">
<Button name="Read More..." />
</div>
</div>
</template>
this is the result:
result
the title and article body is working but not for the image.
this is what I expected:
expected result
UPDATE
this is how I solved:
the code from vue before:
<img :src="`//https://my.directus-api.app/assets/${story.img}`" :alt="`${story.title} image`">
this is after I fixed it:
<img :src="`https://my.directus-api.app/assets/${story.img}?some_random_token`" :alt="`${story.title} image`">
I'm trying to get a v-for cycle with background images. My intention is to have for columns each containing a different background image. Is there something wrong here? :(
Please note also photos it's an array imported with props. This is a component template.
<template>
<div class="row">
<div
v-for="photo in photos"
:key="photo"
class="col-3"
style="background-image: url({{photo.url}})"
>
Need to see photo here
</div>
</div>
</template>
<script>
export default {
props: ["photos"],
};
</script>
I'd use template literals with the :style shorthand for v-bind:style
<template>
<div class="row">
<div
v-for="(photo, index) in photos"
:key="index"
class="col-3"
:style="`background-image: url(${photo.url})`"
>
Need to see photo here
</div>
</div>
</template>
Refer to Binding Inline Styles
<div
v-for="photo in photos"
:key="photo"
class="col-3"
v-bind:style="{background-image: 'url(' + photo.url + ')'}"
>
Need to see photo here
</div>
I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>
Try adding pointer-events: none to the images. It should do the trick.
please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.
I am using the slick slider from https://kenwheeler.github.io/slick/ which is quite a nice slider overall. Is there a way to slide only certain div-s which are inside the whole slick-initialized div? In other words, here is a sample structure:
<div class="sliderdiv slick-initialized slick-slider">
<div class="slick-list">
<div class="slick-track">
<div class="slick-slide">
<div class="wrapper">
<div class="not-to-slide">
<h2>Some Title</h2>
<div class="somedeeperleveldiv">
<span>some text</span>
</div>
</div> <!-- end of divs that do not have to slide //-->
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The slider is initialized by:
$('.sliderdiv').slick({
some options
}).slick(slickFilter, '.slideable');
I've tried SlickFilter as in .slick(slickFilter, '.slideable'); but it gives ReferenceError: slickFilter is not defined
Is there a way to exclude the "not-to-slide" class div and everything that is inside that div from the slider? The idea here is to have only divs of class "slideable" to be used as slides.
A more general solution in case such "not-to-slide" divs appear inside divs that are to be slided would also be appreciated.
I have simple manual text slider with using show/hide code. every thing is ok but when i click previous slide button, current text will be hide but previous one won't show. why it doesn't show ?!
this is my html code:
<div class="hand_1" id="hand_1">
<img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
<div class="hand_text_1">
<h2>header</h2>
<p>paragraph 1</p>
<div class="connect-links">
<a id="next_icon_1" href="#" ></a>
</div>
</div>
</div>
<div class="hand_2" id="hand_2" style="display:none;">
<img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
<div class="hand_text_2">
<h2>header 2</h2>
<p>paragraph 2</p>
<div class="connect-links">
<a id="next_icon_2" href="#"></a>
<a id="previous_icon_2" href="#"></a>
</div>
</div>
</div>
and this is my javascript:
$(document).ready(function(){
$('#next_icon_1').on("click", function(){
$('#hand_img_1').fadeOut('fast');
$('.hand_text_1').fadeOut('fast');
$('.hand_2').fadeIn('fast');
});
$('#previous_icon_2').on("click", function(){
$('#hand_img_2').fadeOut('fast');
$('.hand_text_2').fadeOut('fast');
$('.hand_1').fadeIn('fast');
});
});