danielGe/PortaFront
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merg con carrusel cool

Browse Source
This commit is contained in:
DanielRamirezGe
2020-08-14 00:16:45 -05:00
parent c085df460d 673ff9c7fc
commit f2e6840ffa
3 changed files with 99 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/carrusel.vue
+54 -17
View File
@@ -5,36 +5,75 @@
class="carousel slide col-md-10 col-lg-10 col-xl-10 col-12 mx-auto"
data-ride="carousel"
>
<div class="carousel-inner" >
<div class="carousel-item active" v-bind:key="imagen.id" v-for="imagen in imagenes">
<img :src="imagen.img" class="d-block w-100 img-fluid" alt="img" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" >
<div class="carousel-inner">
<div
class="carousel-item "
v-bind:key="libro.id"
v-for="(libro, idx) in Libros"
:class="{ active: idx == 0 }"
>
<img :src="libro.img" class="d-block w-100 img-fluid" alt="img" />
</div>
<!-- <div class="carousel-item">
<img
src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
class="d-block w-100 img-fluid"
alt="img"
/>
</div>
<div class="carousel-item">
<img
src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
class="d-block w-100 img-fluid"
alt="img"
/>
</div> -->
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" >
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
export default {
data() {
return {
imagenes: [
Libros: [
{
id: 0,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
},
{
id: 1,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
},
{
id: 2,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
}
]
};
},
@@ -58,9 +97,7 @@ export default {
};
});
}
}
catch (error) {
} catch (error) {
console.log(`Ocurrio un error msj: ${error}`);
}
}