javaneh/components/home-page/MediaSlider.vue

<template>
  <div
    class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
  >
    <div
      class="w-full md:w-[25%] flex flex-col ps-[8vw] md:ps-0 border-e-[1px]"
    >
      <div class="flex justify-between">
        <p
          class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
        >
          رسانه
        </p>
        <div class="hidden md:flex h-[50px] me-[0.5vw]">
          <svg
          class="cursor-pointer h-[2.604vw] w-[2.604vw]"
          @click="this.$refs.carousel.next()"
 viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
            <path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg
            class="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
            @click="this.$refs.carousel.prev()"
     viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
              <g clip-path="url(#clip0_836_14507)">
              <path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_836_14507">
              <rect width="24" height="24" fill="white" transform="translate(13 13)"/>
              </clipPath>
              </defs>
              </svg>
              
              
        </div>
      </div>

      <div class="mt-[1vw] space-y-[1vw] text-[#878787]">
        <p class="flex items-center">
          <svg
            class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span
            class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold text-black"
          >
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class="items-center hidden md:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class="items-center hidden md:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class="items-center hidden md:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class="items-center hidden md:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>

        <button
          class="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
        >
          ادامه مطلب
          <svg
            class="ms-3 h-[1.25vw] w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.57 5.93018L3.5 12.0002L9.57 18.0702"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M20.4999 12H3.66992"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>
    </div>

    <Carousel
      ref="carousel"
      class="md:w-[75%] mt-[8vw] md:mt-0  w-full"
      :wrap-around="true"
      :breakpoints="breakpoints"
    >
      <Slide v-for="slide in 10" :key="slide">
        <div
          class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
        >
          <div
            class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
          ></div>
        </div>
      </Slide>

 
    </Carousel>


    <!-- 
    <div
      class="mt-[8vw] md:mt-0 w-full grid grid-cols-1 md:grid-cols-3 border-s-none md:border-s-[1px] ms-0 md:ms-[3vw] ps-0 md:ps-[1vw]"
    >


      <div
        class="w-[64.103vw] md:w-[20.156vw] h-[85.641vw] md:h-[28.021vw]
         border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">

        <div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
         border-[1.5px] rounded-[500px]"></div>


      </div>





      <div
        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
      >
        <div
          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
        ></div>
      </div>
      <div
        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
      >
        <div
          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
        ></div>
      </div>
    </div> -->
  </div>
</template>

<script>

export default defineComponent({
  name: 'Breakpoints',
  data: () => ({

    breakpoints: {
      // 700px and up
      300: {
        itemsToShow: 1.4,
        snapAlign: 'end',
      },
      700: {
        itemsToShow: 3.3,
        snapAlign: 'center',
      },
      // 1024 and up
      1024: {
        itemsToShow: 3.3,
        snapAlign: 'start',
      },
    }
  })
})
</script>