<div className="carousel w-full">
<div id="slide1" className="carousel-item relative w-full">
<img src="/images/stock/photo-1625726411847-8cbb60cc71e6.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide2" className="carousel-item relative w-full">
<img src="/images/stock/photo-1609621838510-5ad474b7d25d.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide3" className="carousel-item relative w-full">
<img src="/images/stock/photo-1414694762283-acccc27bca85.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide4" className="carousel-item relative w-full">
<img src="/images/stock/photo-1665553365602-b2fb8e5d1707.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
</div>
I want to know that is it possibe to do that.I tried a lot to find the solution, but I couldn't. when i look for solution statement in google there is no website to showcase my problem.If anyone know about it please help me to reach out the problem and give a chance to make a better ui .
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`">
#Anyone help me to get file, i start learning jetstream using livewire
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<x-jet-welcome />
</div>
</div>
</div>
I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.
This is my current code that doesn't particularly works :
<div class="absolute flex items-center justify-center">
<Contact />
</div>
If you have a header and you want to ignore the header and center the content the code goes like:
<div>
<div className="flex h-screen flex-col bg-gray-100">
<header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
Header
</header>
<main className=" flex flex-1 justify-center items-center">
<div className="shadow bg-white rounded-md w-full text-center">
Content
</div>
</main>
</div>
</div>
Try with this example
something like <div class="grid place-items-center h-screen">
I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>