TiendaFront/src/view/Home.vue

<template>
    <div  class="body">
        <Header></Header>
     
        <div class="row ">
          <div class="col-12 col-md-10 col-lg-10 col-xl-10  mx-auto">
            <CarruselImg />
          </div>
        </div>

<!-- lo mas vendido -->
        <div class="row ">
          <div class="col-12  smx-auto">
            <div class="my-5">
                <h5 class="text-center font-weight-bold">Lo más vendido</h5> 
                <carousel 
                  :autoplay="true" 
                  :perPage=2 
                  :perPageCustom="[[480, 3],[900, 4]]" 
                  :resistanceCoef=20
                  :autoplayHoverPause=true
                  :minSwipeDistance=200
                >
                <slide  class="carousel-items card mx-2  shadow"
                  v-bind:key="item.id"
                  v-for="(item, idx) in items"
                  :class="{ active: idx == 0 }">
                  
                      <img :src="item.img" class="card-img-top" alt="img"  />
                      <div class="card-body">
                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
                      </div>
  
                </slide>  
                <slide  class="carousel-items card mx-2  shadow"></slide>
                </carousel>
            </div>
           </div>
        </div>



<!-- lo mas reciente  -->
        <div class="row ">
          <div class="col-12  smx-auto">
            <div class="my-5">
                <h5 class="text-center font-weight-bold">Lo más reciente</h5> 
                <carousel 
                  :autoplay="true" 
                  :perPage=2 
                  :perPageCustom="[[480, 3],[900, 4]]" 
                  :resistanceCoef=20
                  :autoplayHoverPause=true
                  :minSwipeDistance=200
                >
                <slide  class="carousel-items card mx-2  shadow"
                  v-bind:key="item.id"
                  v-for="(item, idx) in items"
                  :class="{ active: idx == 0 }">

                      <img :src="item.img" class="card-img-top" alt="img"  />
                      <div class="card-body ">
                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
                      </div>
  
                </slide>  
                <slide  class="carousel-items card mx-2  shadow"></slide>
                </carousel>
            </div>
           </div>
        </div>


        <Footer></Footer>
    </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'

import { Carousel, Slide } from 'vue-carousel'
import CarruselImg from '../components/Carrousel'


export default {
components: {
        Header,
        Footer,
        Carousel,
        CarruselImg,

        Slide
    },
    data(){
      return{
        items:[
      {
      img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       } ,
       {
      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/361-home_default/las-pasiones-en-la-prensa-mexicana-siglos-xix-xxi.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/362-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-1-livello.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/363-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/364-home_default/herramientas-tic-guia-de-inicio.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/365-home_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  ,
       {
      img:'https://tienda.acatlan.unam.mx/366-home_default/espacio-semico-ambiental.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }  
      
        ]
      }
    }
}
</script>
<style scoped>
.overflow-clip {
white-space: nowrap; 
  width: 90%; 
  overflow: hidden;
  text-overflow: ellipsis; 
}
.VueCarousel-dot:active{
  border: none;

}
.body{
  /* background-color: #E5E5E5; */
      overflow-x: hidden; 

}
.card-body{
  border-top: 1px solid black !important;
}
.VueCarousel-wrapper{
  overflow-x:inherit ;
  overflow-y:inherit ;
}
.shadow{
  -webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
}
</style>