Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/Sidebars/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="sidebar-wrapper">
    <div class="sidebar-content">
      <h6>Payment options</h6>
      <div class="payment-img-box">
        <div class="p-box"><img src="/images/payments/payment-img-1.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-2.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-3.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-4.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-5.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-6.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-7.svg" alt="Payment Options"></div>
        <div class="p-box"><img src="/images/payments/payment-img-8.svg" alt="Payment Options"></div>
      </div>
      <h6>Verified customer reviews</h6>
      <div class="shopper-approved-box">
        <img src="/images/fl/shopper-approved.svg" alt="Shopper Approved" class="shopper-img">
        <div class="star-wrapper">
          <img src="/images/fl/star.png" alt="Star">
          <img src="/images/fl/star.png" alt="Star">
          <img src="/images/fl/star.png" alt="Star">
          <img src="/images/fl/star.png" alt="Star">
          <img src="/images/fl/star-half.png" alt="Star">
        </div>
        <div class="rating-box">
          <p>4.8 of 5</p>
        </div>
      </div>

      <carousel class="sidebar-slider-box-wrapper"
                :margin="60"
                :loop="true"
                :autoplay="true"
                :items="1"
                :dots="false"
                :nav="false"
                :smartSpeed="1000"
                slideTransition="ease-in-out">

        <div class="item">
          <div class="sidebar-slider-outer">
            <img src="/images/fl/scooter.png" alt="Scooter" class="scooter-img">
            <img src="/images/fl/bubble-tail.png" alt="Arrow" class="bubble-arrow">
            <div class="sidebar-slider-wrapper">
              <div class="sidebar-slide">
                <p>"This fits our needs perfectly. {{ appDomain }} is really smooth & easy easy to use. I couldn’t have
                  asked ask for more."</p>
                <h6><b>Thomas H.</b> <!--<br> City, ST--></h6>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="sidebar-slider-outer">
            <img src="/images/fl/scooter.png" alt="Scooter" class="scooter-img">
            <img src="/images/fl/bubble-tail.png" alt="Arrow" class="bubble-arrow">
            <div class="sidebar-slider-wrapper">
              <div class="sidebar-slide">
                <p>"Fast, easy, and reliable! My wife and I have used this service for both our cars!"</p>
                <h6><b>Matthew B.</b><!-- <br> City, ST--></h6>
              </div>
            </div>
          </div>
        </div>
      </carousel>


    </div>
  </div>

</template>

<script>

export default {
  name: "DefaultSidebar",
  mounted() {
    document
      .querySelector('.sidebar-slider-box-wrapper .owl-carousel')
      .classList
      .add('sidebar-slider-box')
  }
}
</script>

<style>


</style>