Carousel Simple

HTML

<div class="owl-carousel simple-carousel js-simple-carousel">
<div class="item"><img src="../../img/carousel/1.png" alt="" /></div>
<div class="item"><img src="../../img/carousel/2.png" alt="" /></div>
<div class="item"><img src="../../img/carousel/3.png" alt="" /></div>
</div>

$('.js-simple-carousel').owlCarousel({
loop: true,
navText: ['<i class="fa-solid fa-chevron-left"></i>','<i class="fa-solid fa-chevron-right"></i>'],
items: 1,
responsive: {
  0 : {
    nav: false,
  },
  1025 : {
    nav: true,
  }
}
});

Carousel Cards

Benefits

Preventive Care

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Internal Link

Benefits

Preventive Care

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Internal Link

Benefits

Preventive Care

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Internal Link

Benefits

Preventive Care

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Internal Link

HTML

<div class="owl-carousel js-cards-carousel">
  <div class="item">
    <div class="card-benefits">
      <div class="card-benefits-image">
        <img src="../../img/benefitsList/imageGrass.png" alt="" />
      </div>
      <div class="card-benefits-desc">
        <div class="card-benefits-text">
          <p class="card-benefits-label small">Benefits</p>
          <h3 class="card-benefits-title">Preventive Care</h3>
          <p>
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
          </p>
        </div>
        <a href="#" class="internal-link">Internal Link</a>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card-benefits">
      <div class="card-benefits-image">
        <img src="../../img/benefitsList/imageGrass.png" alt="" />
      </div>
      <div class="card-benefits-desc">
        <div class="card-benefits-text">
          <p class="card-benefits-label small">Benefits</p>
          <h3 class="card-benefits-title">Preventive Care</h3>
          <p>
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
          </p>
        </div>
        <a href="#" class="internal-link">Internal Link</a>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card-benefits">
      <div class="card-benefits-image">
        <img src="../../img/benefitsList/imageGrass.png" alt="" />
      </div>
      <div class="card-benefits-desc">
        <div class="card-benefits-text">
          <p class="card-benefits-label small">Benefits</p>
          <h3 class="card-benefits-title">Preventive Care</h3>
          <p>
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
          </p>
        </div>
        <a href="#" class="internal-link">Internal Link</a>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card-benefits">
      <div class="card-benefits-image">
        <img src="../../img/benefitsList/imageGrass.png" alt="" />
      </div>
      <div class="card-benefits-desc">
        <div class="card-benefits-text">
          <p class="card-benefits-label small">Benefits</p>
          <h3 class="card-benefits-title">Preventive Care</h3>
          <p>
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
          </p>
        </div>
        <a href="#" class="internal-link">Internal Link</a>
      </div>
    </div>
  </div>
</div>

$('.js-cards-carousel').owlCarousel({
  loop: true,
  margin: 24,
  center:true,
  navText: ['<i class="fa-solid fa-chevron-left"></i>','<i class="fa-solid fa-chevron-right"></i>'],
  responsive: {
    0 : {
      items: 1,
      nav: false,
    },
    768 : {
      items: 2,
    },
    1025 : {
      items: 3,
      nav: true,
    }
  }
});

Carousel Slider

MEDICARE

Understanding the Different Enrollment Periods

Demonstrating big data's transformative role in patient care, this study highlights its effectiveness in improving diagnoses and treatment plans.

Internal Link

MEDICARE

Understanding the Different Enrollment Periods 2

Demonstrating big data's transformative role in patient care, this study highlights its effectiveness in improving diagnoses and treatment plans.

Internal Link

HTML

<div class="owl-carousel js-simple-carousel">
  <div class="item">
    <div class="card-call-out bg-gradient">
      <div class="row align-items-center">
        <div class="col-md-7">
          <div class="card-call-out-text">
            <h4 class="card-headline">MEDICARE</h4>
            <h1>Understanding the Different Enrollment Periods</h1>
            <p>
              Demonstrating big data's transformative role in patient care, 
              this study highlights its effectiveness in improving diagnoses and treatment plans.
            </p>
            <a href="#" class="internal-link">Internal Link</a>
          </div>
        </div>
        <div class="col-md-5">
          <div class="card-call-out-img align-items-center">
            <img src="../../img/callOut/phones.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="card-call-out bg-gradient">
      <div class="row align-items-center">
        <div class="col-md-7">
          <div class="card-call-out-text">
            <h4 class="card-headline">MEDICARE</h4>
            <h1>Understanding the Different Enrollment Periods 2</h1>
            <p>
              Demonstrating big data's transformative role in patient care, 
              this study highlights its effectiveness in improving diagnoses and treatment plans.
            </p>
            <a href="#" class="internal-link">Internal Link</a>
          </div>
        </div>
        <div class="col-md-5">
          <div class="card-call-out-img align-items-center">
            <img src="../../img/callOut/phones.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$('.js-simple-carousel').owlCarousel({
loop: true,
navText: ['<i class="fa-solid fa-chevron-left"></i>','<i class="fa-solid fa-chevron-right"></i>'],
items: 1,
responsive: {
  0 : {
    nav: false,
  },
  1025 : {
    nav: true,
  }
}
});

Testimonials Slider

Our Members are Talking!

Viva Medicare's prescription drug benefits are really helpful to me. I can get my prescriptions for little to no cost.

- Francis, Viva Medicare Member

2 Our Members are Talking!

Viva Medicare's prescription drug benefits are really helpful to me. I can get my prescriptions for little to no cost.

- Francis, Viva Medicare Member

HTML

<div class="owl-carousel js-simple-carousel">
  <div class="item">
    <div class="testimonials">
      <div class="row align-items-center">
        <div class="col">
          <div class="testimonial-text">
            <h2 class="text-teal">Our Members are Talking!</h2>
            <div>
              <img src="../../icons/quote.svg" alt="">
            </div>
            <p>
              <span class="small-caps">Viva Medicare's</span> prescription drug benefits are really helpful to me. I can get my prescriptions for little to no cost.
            </p>
            <div>
              <img src="../../icons/quote.svg" alt="">
            </div>
            <p class="text-bold text-teal">- Francis, Viva Medicare Member</p>
          </div>
        </div>
        <div class="col">
          <div class="testimonial-img">
            <img src="../../img/testimonials/1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="testimonial">
      <div class="row">
        <div class="col">
          <div class="testimonial-text">
            <h2 class="text-teal">2 Our Members are Talking!</h2>
            <div>
              <img src="../../icons/quote.svg" alt="" />
            </div>
            <p>
              <span class="small-caps">Viva Medicare's</span> prescription drug benefits are really helpful to me. I can get my prescriptions for little to no cost.
            </p>
            <div>
              <img src="../../icons/quote.svg" alt="">
            </div>
            <p class="text-bold text-teal">- Francis, Viva Medicare Member
          </div>
        </div>
        <div class="col">
          <div class="testimonial-img">
            <img src="../../img/testimonials/1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$('.js-simple-carousel').owlCarousel({
loop: true,
navText: ['<i class="fa-solid fa-chevron-left"></i>','<i class="fa-solid fa-chevron-right"></i>'],
items: 1,
responsive: {
  0 : {
    nav: false,
  },
  1025 : {
    nav: true,
  }
}
});

Carousel Preview

HTML

<div class="owl-carousel preview-carousel js-preview-carousel">
<div class="item"><img src="../../img/carousel/1.png" alt="" /></div>
<div class="item"><img src="../../img/carousel/2.png" alt="" /></div>
<div class="item"><img src="../../img/carousel/3.png" alt="" /></div>
</div>

$('.js-preview-carousel').owlCarousel({
stagePadding: 24,
margin: 12,
navText: ['<i class="fa-solid fa-chevron-left"></i>','<i class="fa-solid fa-chevron-right"></i>'],
items: 1,
responsive: {
  0 : {
    nav: false,
  },
  1025 : {
    nav: true,
  }
}
});