From 96c89ad51200f03a4a78291d97e84e596ec9eed2 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 8 Dec 2023 14:48:52 -0500
Subject: [PATCH 01/15] initial commit

---
 cigaradvisor/blocks/carousel/carousel.css |  49 ++++++++++
 cigaradvisor/blocks/carousel/carousel.js  | 103 ++++++++++++++++++++++
 2 files changed, 152 insertions(+)
 create mode 100644 cigaradvisor/blocks/carousel/carousel.css
 create mode 100644 cigaradvisor/blocks/carousel/carousel.js

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
new file mode 100644
index 00000000..028248d3
--- /dev/null
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -0,0 +1,49 @@
+.carousel-wrapper {
+  position: relative;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1080px
+}
+
+.carousel {
+  scroll-margin: 0;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  overflow-x: scroll;
+  display: flex;
+  scrollbar-width: none;
+  margin-left: 2em;
+  margin-right: 2em;
+}
+
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel .slide {
+  scroll-snap-align: start;
+  display: block;
+  flex: 0 0 50%;
+  transition: all 0.25s ease-in-out;
+  scroll-margin: unset;
+  padding: 0 2px;
+}
+
+.carousel>button {
+  position: absolute;
+  top: 40%;
+  background: unset;
+  padding: 0;
+  margin: 0;
+}
+
+.carousel>button.prev {
+  left: 0;
+}
+
+.carousel button.next {
+  right: 0;
+}
\ No newline at end of file
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
new file mode 100644
index 00000000..90f695a5
--- /dev/null
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -0,0 +1,103 @@
+import { decorateIcons } from '../../scripts/aem.js';
+
+/**
+ * Generic carousel block, which can be used for any content or blocks.
+ * Each row is a slide.
+ * @param block
+ */
+export default async function decorate(block) {
+  [...block.children].forEach((child, index) => {
+    child.classList.add('slide');
+    child.dataset.slideId = index;
+  });
+
+  // make a total of 3 copies of the slides, so it appears to be infinite scrolling
+  const originalSlides = [...block.querySelectorAll('.slide')];
+  block.prepend(...(cloneSlides(originalSlides)));
+  block.append(...(cloneSlides(originalSlides)));
+
+  function moveSlides(prevOrNext, smooth = 'smooth') {
+    let newOffset;
+    if (prevOrNext === 'next') {
+      newOffset = block.scrollLeft + block.clientWidth;
+    } else {
+      newOffset = Math.max(block.scrollLeft - block.clientWidth, 0);
+    }
+    block.scrollTo({ top: 0, left: newOffset, behavior: smooth });
+  }
+
+  // set initial position, delay scrolling until the elements are properly laid out
+  requestAnimationFrame(function initialScroll() {
+    if (originalSlides[0].offsetLeft > 0) {
+      block.scrollTo({ top: 0, left: originalSlides[0].offsetLeft, behavior: 'instant' });
+    } else {
+      setTimeout(initialScroll, 200);
+    }
+  });
+
+  // once the scroll is finished, jump back to an original slide in the middle
+  onScrollEnd(block, () => {
+    const original = getOriginalSlide(getCurrentSlide(block), block);
+    if (original) {
+      block.scrollTo({ top: 0, left: original.offsetLeft, behavior: 'instant' });
+    }
+  }, false);
+
+  block.append(...createButtons(moveSlides));
+  await decorateIcons(block);
+}
+
+function cloneSlides(originalSlides) {
+  return originalSlides.map((child) => {
+    const clone = child.cloneNode(true);
+    clone.dataset.slideCloneId = child.dataset.slideId;
+    delete clone.dataset.slideId;
+    return clone;
+  });
+}
+
+function getCurrentSlide(block) {
+  const viewStart = block.scrollLeft;
+  const viewEnd = block.scrollLeft + block.clientWidth;
+  return [...block.querySelectorAll('.slide')]
+    .find((slide) => viewStart <= slide.offsetLeft && slide.offsetLeft < viewEnd);
+}
+
+function getOriginalSlide(slide, block) {
+  if (slide.dataset.slideCloneId) {
+    return block.querySelector(`[data-slide-id="${slide.dataset.slideCloneId}"]`);
+  }
+  return null;
+}
+
+function createButtons(moveSlides) {
+  return ['prev', 'next'].map((direction) => {
+    const button = document.createElement('button');
+    button.classList.add(direction);
+    button.ariaLabel = `show ${direction} slide`;
+    const icon = document.createElement('span');
+    icon.classList.add('icon', `icon-angle-${direction === 'prev' ? 'left' : 'right'}`);
+    button.append(icon);
+    button.addEventListener('click', () => moveSlides(direction));
+    return button;
+  });
+}
+
+/** Fallback for Safari, see explanation on https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
+ and https://stackoverflow.com/a/4620986/79461 */
+function onScrollEnd(block, callback, once = false) {
+  if ('onscrollend' in window) {
+    block.addEventListener('scrollend', callback, { once });
+    return;
+  }
+  let timer = null;
+  const scrollListener = () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      // no scrolling happened for 150ms
+      if (once) block.removeEventListener('scroll', scrollListener);
+      callback();
+    }, 150);
+  };
+  block.addEventListener('scroll', scrollListener);
+}
\ No newline at end of file

From 92ed342d900bd84d2519327cfbaf04790f664242 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 12 Dec 2023 08:08:39 -0500
Subject: [PATCH 02/15] scroll offset

---
 cigaradvisor/blocks/carousel/carousel.css | 73 ++++++++++++++++++++---
 cigaradvisor/blocks/carousel/carousel.js  | 18 +++---
 2 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index 028248d3..679564cd 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -8,36 +8,36 @@
   max-width: 1080px
 }
 
-.carousel {
+.carousel.block {
   scroll-margin: 0;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   overflow-x: scroll;
   display: flex;
   scrollbar-width: none;
-  margin-left: 2em;
-  margin-right: 2em;
 }
 
-.carousel::-webkit-scrollbar {
+.carousel.block::-webkit-scrollbar {
   display: none;
 }
 
-.carousel .slide {
+.carousel.block .slide {
   scroll-snap-align: start;
   display: block;
-  flex: 0 0 50%;
-  transition: all 0.25s ease-in-out;
+  flex: 1 0 100%;
+ /* transition: all 3000ms ease-in-out; */
   scroll-margin: unset;
   padding: 0 2px;
 }
 
+
 .carousel>button {
   position: absolute;
   top: 40%;
   background: unset;
   padding: 0;
   margin: 0;
+  border: none;
 }
 
 .carousel>button.prev {
@@ -46,4 +46,63 @@
 
 .carousel button.next {
   right: 0;
+  padding: 0 30px 0 0;
+}
+
+
+.carousel-arrow {
+  background-color: #000; /* Arrow color */
+  position: relative;
+  cursor: pointer;
+   position: absolute;
+    z-index: 9;
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    background-color: rgba(0,0,0,.7);
+    text-align: center;
+    width: 30px;
+    height: 50px;
+}
+
+.arrow-next::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-60%, -50%); /* Adjust for arrow positioning */
+  border-style: solid;
+  border-width: 2px 2px 0 0;
+  display: inline-block;
+  padding: 4px;
+  width: 10px; /* Arrowhead width */
+  height: 10px; /* Arrowhead height */
+  transform: rotate(45deg); /* Rotate arrowhead for next direction */
+  border-color: #fff; /* Arrowhead color */
+}
+
+.next { 
+  padding-right: 30px;
+}
+
+.arrow-prev::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right : 50%;
+  transform: translate(-40%, -50%);
+  border-style: solid;
+  border-width: 2px 2px 0 0;
+  display: inline-block;
+  padding: 4px;
+  width: 10px; /* Arrowhead width */
+  height: 10px; /* Arrowhead height */
+  transform: rotate(-135deg);
+  border-color: #fff; /* Arrowhead color */
+}
+
+@media screen and (min-width: 600px){
+  .carousel.block .slide {
+    flex: 1 0 50%;
+  }
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 90f695a5..409ea715 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -6,6 +6,7 @@ import { decorateIcons } from '../../scripts/aem.js';
  * @param block
  */
 export default async function decorate(block) {
+  console.log(block);
   [...block.children].forEach((child, index) => {
     child.classList.add('slide');
     child.dataset.slideId = index;
@@ -18,10 +19,12 @@ export default async function decorate(block) {
 
   function moveSlides(prevOrNext, smooth = 'smooth') {
     let newOffset;
+    console.log(window.screen.width);
+    const scrollWidth = (window.screen.width > 600) ? (block.clientWidth / 2) : (block.clientWidth);
     if (prevOrNext === 'next') {
-      newOffset = block.scrollLeft + block.clientWidth;
+      newOffset = block.scrollLeft + scrollWidth;
     } else {
-      newOffset = Math.max(block.scrollLeft - block.clientWidth, 0);
+      newOffset = Math.max(block.scrollLeft - scrollWidth, 0);
     }
     block.scrollTo({ top: 0, left: newOffset, behavior: smooth });
   }
@@ -73,11 +76,12 @@ function getOriginalSlide(slide, block) {
 function createButtons(moveSlides) {
   return ['prev', 'next'].map((direction) => {
     const button = document.createElement('button');
-    button.classList.add(direction);
     button.ariaLabel = `show ${direction} slide`;
-    const icon = document.createElement('span');
-    icon.classList.add('icon', `icon-angle-${direction === 'prev' ? 'left' : 'right'}`);
-    button.append(icon);
+    button.classList.add(direction);
+    const iconDiv = document.createElement('div');
+    iconDiv.classList.add(`arrow-${direction}`);
+    iconDiv.classList.add('carousel-arrow');
+    button.appendChild(iconDiv);
     button.addEventListener('click', () => moveSlides(direction));
     return button;
   });
@@ -100,4 +104,4 @@ function onScrollEnd(block, callback, once = false) {
     }, 150);
   };
   block.addEventListener('scroll', scrollListener);
-}
\ No newline at end of file
+}

From 128fddc8ba87f299be767af7bb992d52a5cdaa40 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 13 Dec 2023 10:13:55 -0500
Subject: [PATCH 03/15] basic - transform

---
 cigaradvisor/blocks/carousel/carousel.css | 12 +++---
 cigaradvisor/blocks/carousel/carousel.js  | 52 ++++++++++++-----------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index 679564cd..8833c75a 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -1,23 +1,24 @@
-.carousel-wrapper {
+.carousel-wrapper{
   position: relative;
   padding-left: 0;
   padding-right: 0;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1080px
+  max-width: 1080px;
+  overflow: hidden;
 }
 
-.carousel.block {
+.carousel.block > div {
   scroll-margin: 0;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
-  overflow-x: scroll;
   display: flex;
   scrollbar-width: none;
+  transition: transform 3000ms ease 0ms; 
 }
 
-.carousel.block::-webkit-scrollbar {
+.carousel.block > div::-webkit-scrollbar {
   display: none;
 }
 
@@ -25,7 +26,6 @@
   scroll-snap-align: start;
   display: block;
   flex: 1 0 100%;
- /* transition: all 3000ms ease-in-out; */
   scroll-margin: unset;
   padding: 0 2px;
 }
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 409ea715..4b5eba7b 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -14,37 +14,41 @@ export default async function decorate(block) {
 
   // make a total of 3 copies of the slides, so it appears to be infinite scrolling
   const originalSlides = [...block.querySelectorAll('.slide')];
-  block.prepend(...(cloneSlides(originalSlides)));
-  block.append(...(cloneSlides(originalSlides)));
+  // block.prepend(...(cloneSlides(originalSlides)));
+  // block.append(...(cloneSlides(originalSlides)));
 
+  const slidesWrapper = document.createElement('div');
+  slidesWrapper.classList.add('slides-wrappper');
+  while (block.firstChild) {
+    let child = block.firstChild;
+    slidesWrapper.append(child);
+  }
+  block.innerHTML = '';
+  block.append(slidesWrapper);
+
+  let currentIndex = 0;
+  const items = slidesWrapper.querySelectorAll('.slide');
   function moveSlides(prevOrNext, smooth = 'smooth') {
-    let newOffset;
-    console.log(window.screen.width);
-    const scrollWidth = (window.screen.width > 600) ? (block.clientWidth / 2) : (block.clientWidth);
-    if (prevOrNext === 'next') {
-      newOffset = block.scrollLeft + scrollWidth;
-    } else {
-      newOffset = Math.max(block.scrollLeft - scrollWidth, 0);
-    }
-    block.scrollTo({ top: 0, left: newOffset, behavior: smooth });
+    currentIndex = (currentIndex + 1) % items.length;
+    slidesWrapper.style.transform = `translate3d(-${currentIndex * 50}%, 0, 0)`;
   }
 
   // set initial position, delay scrolling until the elements are properly laid out
-  requestAnimationFrame(function initialScroll() {
-    if (originalSlides[0].offsetLeft > 0) {
-      block.scrollTo({ top: 0, left: originalSlides[0].offsetLeft, behavior: 'instant' });
-    } else {
-      setTimeout(initialScroll, 200);
-    }
-  });
+  // requestAnimationFrame(function initialScroll() {
+  //   if (originalSlides[0].offsetLeft > 0) {
+  //     block.scrollTo({ top: 0, left: originalSlides[0].offsetLeft, behavior: 'instant' });
+  //   } else {
+  //     setTimeout(initialScroll, 200);
+  //   }
+  // });
 
   // once the scroll is finished, jump back to an original slide in the middle
-  onScrollEnd(block, () => {
-    const original = getOriginalSlide(getCurrentSlide(block), block);
-    if (original) {
-      block.scrollTo({ top: 0, left: original.offsetLeft, behavior: 'instant' });
-    }
-  }, false);
+  // onScrollEnd(block, () => {
+  //   const original = getOriginalSlide(getCurrentSlide(block), block);
+  //   if (original) {
+  //     block.scrollTo({ top: 0, left: original.offsetLeft, behavior: 'instant' });
+  //   }
+  // }, false);
 
   block.append(...createButtons(moveSlides));
   await decorateIcons(block);

From 692034cd5f20a9721c26493c98c406644b7a7f4b Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:10:32 -0500
Subject: [PATCH 04/15] mobile scroll

---
 cigaradvisor/blocks/carousel/carousel.js | 127 +++++++++++------------
 1 file changed, 58 insertions(+), 69 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 4b5eba7b..c8e8ec36 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -6,61 +6,54 @@ import { decorateIcons } from '../../scripts/aem.js';
  * @param block
  */
 export default async function decorate(block) {
-  console.log(block);
-  [...block.children].forEach((child, index) => {
-    child.classList.add('slide');
-    child.dataset.slideId = index;
-  });
-
-  // make a total of 3 copies of the slides, so it appears to be infinite scrolling
-  const originalSlides = [...block.querySelectorAll('.slide')];
-  // block.prepend(...(cloneSlides(originalSlides)));
-  // block.append(...(cloneSlides(originalSlides)));
-
+  const mobile = (window.screen.width < 600);
+  const offset = mobile ? 100 : 50;
+  const itemsToShow = mobile ? 2:1;
   const slidesWrapper = document.createElement('div');
   slidesWrapper.classList.add('slides-wrappper');
-  while (block.firstChild) {
-    let child = block.firstChild;
-    slidesWrapper.append(child);
-  }
-  block.innerHTML = '';
-  block.append(slidesWrapper);
+  [...block.children].forEach((row) => {
+    const slide = document.createElement('div');
+    slide.classList.add('slide');
+    let pic;
+    let anchor;
+    [...row.children].forEach((col) => {
+      if (col.querySelector('picture')) {
+        pic = col.querySelector('picture');
+      }
+      if (col.querySelector('a')) {
+        anchor = col.querySelector('a');
+      }
+    });
+    anchor.replaceChildren(pic);
+    slide.append(anchor);
+    slidesWrapper.append(slide);
+  });
+
+  block.replaceChildren(slidesWrapper);
 
   let currentIndex = 0;
   const items = slidesWrapper.querySelectorAll('.slide');
-  function moveSlides(prevOrNext, smooth = 'smooth') {
-    currentIndex = (currentIndex + 1) % items.length;
-    slidesWrapper.style.transform = `translate3d(-${currentIndex * 50}%, 0, 0)`;
+  function moveSlides(prevOrNext) {
+    console.log('moveSlides');
+    if (prevOrNext === 'next') {
+      console.log(currentIndex);
+      if (currentIndex < (items.length - itemsToShow)) {
+        currentIndex += 1;
+        slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+      }
+    } else {
+      console.log(currentIndex);
+      if (currentIndex >= 1) {
+        currentIndex -= 1;
+        slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+      }
+    }
   }
 
-  // set initial position, delay scrolling until the elements are properly laid out
-  // requestAnimationFrame(function initialScroll() {
-  //   if (originalSlides[0].offsetLeft > 0) {
-  //     block.scrollTo({ top: 0, left: originalSlides[0].offsetLeft, behavior: 'instant' });
-  //   } else {
-  //     setTimeout(initialScroll, 200);
-  //   }
-  // });
-
-  // once the scroll is finished, jump back to an original slide in the middle
-  // onScrollEnd(block, () => {
-  //   const original = getOriginalSlide(getCurrentSlide(block), block);
-  //   if (original) {
-  //     block.scrollTo({ top: 0, left: original.offsetLeft, behavior: 'instant' });
-  //   }
-  // }, false);
-
   block.append(...createButtons(moveSlides));
   await decorateIcons(block);
-}
+  setAutoScroll(moveSlides, block);
 
-function cloneSlides(originalSlides) {
-  return originalSlides.map((child) => {
-    const clone = child.cloneNode(true);
-    clone.dataset.slideCloneId = child.dataset.slideId;
-    delete clone.dataset.slideId;
-    return clone;
-  });
 }
 
 function getCurrentSlide(block) {
@@ -70,11 +63,26 @@ function getCurrentSlide(block) {
     .find((slide) => viewStart <= slide.offsetLeft && slide.offsetLeft < viewEnd);
 }
 
-function getOriginalSlide(slide, block) {
-  if (slide.dataset.slideCloneId) {
-    return block.querySelector(`[data-slide-id="${slide.dataset.slideCloneId}"]`);
-  }
-  return null;
+function setAutoScroll(moveSlides, slidesWrapper) {
+  // Set interval for auto-scrolling (change slide every 3 seconds)
+  let interval;
+  setTimeout(() => {
+    interval = setInterval(() => {
+      moveSlides('next');
+    }, 5000);
+
+    // Stop auto-scroll on user interaction
+    slidesWrapper.addEventListener('mouseenter', () => {
+      console.log('mouseenter');
+      clearInterval(interval);
+    });
+    slidesWrapper.addEventListener('mouseleave', () => {
+      console.log('mouseleave');
+      interval = setInterval(() => {
+        moveSlides('next');
+      }, 6000);
+    });
+  }, 3000);
 }
 
 function createButtons(moveSlides) {
@@ -90,22 +98,3 @@ function createButtons(moveSlides) {
     return button;
   });
 }
-
-/** Fallback for Safari, see explanation on https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
- and https://stackoverflow.com/a/4620986/79461 */
-function onScrollEnd(block, callback, once = false) {
-  if ('onscrollend' in window) {
-    block.addEventListener('scrollend', callback, { once });
-    return;
-  }
-  let timer = null;
-  const scrollListener = () => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      // no scrolling happened for 150ms
-      if (once) block.removeEventListener('scroll', scrollListener);
-      callback();
-    }, 150);
-  };
-  block.addEventListener('scroll', scrollListener);
-}

From ab2d009f52dffc3d492d5a1e5046c40bd218df94 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:35:49 -0500
Subject: [PATCH 05/15] mobile

---
 cigaradvisor/blocks/carousel/carousel.css | 70 ++++++++++++++---------
 cigaradvisor/blocks/carousel/carousel.js  | 16 +++---
 2 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index 8833c75a..540d8135 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -1,4 +1,4 @@
-.carousel-wrapper{
+.carousel-wrapper {
   position: relative;
   padding-left: 0;
   padding-right: 0;
@@ -9,16 +9,16 @@
   overflow: hidden;
 }
 
-.carousel.block > div {
+.carousel.block>div {
   scroll-margin: 0;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   display: flex;
   scrollbar-width: none;
-  transition: transform 3000ms ease 0ms; 
+  transition: transform 3000ms ease 0ms;
 }
 
-.carousel.block > div::-webkit-scrollbar {
+.carousel.block>div::-webkit-scrollbar {
   display: none;
 }
 
@@ -51,18 +51,19 @@
 
 
 .carousel-arrow {
-  background-color: #000; /* Arrow color */
+  display: none;
+  background-color: #000;
+  /* Arrow color */
   position: relative;
   cursor: pointer;
-   position: absolute;
-    z-index: 9;
-    padding: 0;
-    margin: 0;
-    display: inline-block;
-    background-color: rgba(0,0,0,.7);
-    text-align: center;
-    width: 30px;
-    height: 50px;
+  position: absolute;
+  z-index: 9;
+  padding: 0;
+  margin: 0;
+  background-color: rgba(0, 0, 0, .7);
+  text-align: center;
+  width: 30px;
+  height: 50px;
 }
 
 .arrow-next::before {
@@ -70,18 +71,22 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-60%, -50%); /* Adjust for arrow positioning */
+  transform: translate(-60%, -50%);
+  /* Adjust for arrow positioning */
   border-style: solid;
   border-width: 2px 2px 0 0;
-  display: inline-block;
   padding: 4px;
-  width: 10px; /* Arrowhead width */
-  height: 10px; /* Arrowhead height */
-  transform: rotate(45deg); /* Rotate arrowhead for next direction */
-  border-color: #fff; /* Arrowhead color */
+  width: 10px;
+  /* Arrowhead width */
+  height: 10px;
+  /* Arrowhead height */
+  transform: rotate(45deg);
+  /* Rotate arrowhead for next direction */
+  border-color: #fff;
+  /* Arrowhead color */
 }
 
-.next { 
+.next {
   padding-right: 30px;
 }
 
@@ -89,20 +94,31 @@
   content: '';
   position: absolute;
   top: 50%;
-  right : 50%;
+  right: 50%;
   transform: translate(-40%, -50%);
   border-style: solid;
   border-width: 2px 2px 0 0;
-  display: inline-block;
   padding: 4px;
-  width: 10px; /* Arrowhead width */
-  height: 10px; /* Arrowhead height */
+  width: 10px;
+  /* Arrowhead width */
+  height: 10px;
+  /* Arrowhead height */
   transform: rotate(-135deg);
-  border-color: #fff; /* Arrowhead color */
+  border-color: #fff;
+  /* Arrowhead color */
 }
 
-@media screen and (min-width: 600px){
+
+@media screen and (min-width: 600px) {
   .carousel.block .slide {
     flex: 1 0 50%;
   }
+
+  .carousel.block .carousel-arrow {
+    display: inline-block;
+  }
+
+  .carousel.block .arrow-prev {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index c8e8ec36..e72d7848 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -8,7 +8,7 @@ import { decorateIcons } from '../../scripts/aem.js';
 export default async function decorate(block) {
   const mobile = (window.screen.width < 600);
   const offset = mobile ? 100 : 50;
-  const itemsToShow = mobile ? 2:1;
+  const itemsToShow = mobile ? 1:2;
   const slidesWrapper = document.createElement('div');
   slidesWrapper.classList.add('slides-wrappper');
   [...block.children].forEach((row) => {
@@ -40,12 +40,19 @@ export default async function decorate(block) {
       if (currentIndex < (items.length - itemsToShow)) {
         currentIndex += 1;
         slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+        block.querySelector('.arrow-prev').style.display='inline-block';
+        if(currentIndex == (items.length - itemsToShow)){
+          block.querySelector('.arrow-next').style.display='none';
+        }
       }
     } else {
       console.log(currentIndex);
       if (currentIndex >= 1) {
         currentIndex -= 1;
         slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+        if(currentIndex <= 1){
+          block.querySelector('.arrow-prev').style.display='none';
+        }
       }
     }
   }
@@ -56,13 +63,6 @@ export default async function decorate(block) {
 
 }
 
-function getCurrentSlide(block) {
-  const viewStart = block.scrollLeft;
-  const viewEnd = block.scrollLeft + block.clientWidth;
-  return [...block.querySelectorAll('.slide')]
-    .find((slide) => viewStart <= slide.offsetLeft && slide.offsetLeft < viewEnd);
-}
-
 function setAutoScroll(moveSlides, slidesWrapper) {
   // Set interval for auto-scrolling (change slide every 3 seconds)
   let interval;

From 172472832ce1824ceb20216e1996e5bb8acaa05d Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:27:02 -0500
Subject: [PATCH 06/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 37 +++++++++++++++++-------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index e72d7848..03045296 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -1,4 +1,5 @@
 import { decorateIcons } from '../../scripts/aem.js';
+import { isExternal } from '../../scripts/scripts.js';
 
 /**
  * Generic carousel block, which can be used for any content or blocks.
@@ -8,7 +9,7 @@ import { decorateIcons } from '../../scripts/aem.js';
 export default async function decorate(block) {
   const mobile = (window.screen.width < 600);
   const offset = mobile ? 100 : 50;
-  const itemsToShow = mobile ? 1:2;
+  const itemsToShow = mobile ? 1 : 2;
   const slidesWrapper = document.createElement('div');
   slidesWrapper.classList.add('slides-wrappper');
   [...block.children].forEach((row) => {
@@ -24,6 +25,10 @@ export default async function decorate(block) {
         anchor = col.querySelector('a');
       }
     });
+    const img = pic.querySelector('img');
+    const link = anchor.getAttribute('href');
+    anchor.setAttribute('target', isExternal(link) ? '_blank' : '_self');
+    anchor.setAttribute('title', img.alt);
     anchor.replaceChildren(pic);
     slide.append(anchor);
     slidesWrapper.append(slide);
@@ -34,24 +39,23 @@ export default async function decorate(block) {
   let currentIndex = 0;
   const items = slidesWrapper.querySelectorAll('.slide');
   function moveSlides(prevOrNext) {
-    console.log('moveSlides');
     if (prevOrNext === 'next') {
-      console.log(currentIndex);
       if (currentIndex < (items.length - itemsToShow)) {
         currentIndex += 1;
         slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
-        block.querySelector('.arrow-prev').style.display='inline-block';
-        if(currentIndex == (items.length - itemsToShow)){
-          block.querySelector('.arrow-next').style.display='none';
+        if (!mobile) {
+          block.querySelector('.arrow-prev').style.display = 'inline-block';
+        }
+        if (currentIndex == (items.length - itemsToShow)) {
+          block.querySelector('.arrow-next').style.display = 'none';
         }
       }
     } else {
-      console.log(currentIndex);
       if (currentIndex >= 1) {
         currentIndex -= 1;
         slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
-        if(currentIndex <= 1){
-          block.querySelector('.arrow-prev').style.display='none';
+        if (currentIndex <= 1) {
+          block.querySelector('.arrow-prev').style.display = 'none';
         }
       }
     }
@@ -60,7 +64,6 @@ export default async function decorate(block) {
   block.append(...createButtons(moveSlides));
   await decorateIcons(block);
   setAutoScroll(moveSlides, block);
-
 }
 
 function setAutoScroll(moveSlides, slidesWrapper) {
@@ -73,15 +76,27 @@ function setAutoScroll(moveSlides, slidesWrapper) {
 
     // Stop auto-scroll on user interaction
     slidesWrapper.addEventListener('mouseenter', () => {
-      console.log('mouseenter');
       clearInterval(interval);
     });
+    // Stop auto-scroll on user interaction
+    slidesWrapper.addEventListener('touchstart', () => {
+      console.log('touchstart');
+      clearInterval(interval);
+      // slidesWrapper.style.setProperty('overflow-x', 'auto', 'important');
+    });
     slidesWrapper.addEventListener('mouseleave', () => {
       console.log('mouseleave');
       interval = setInterval(() => {
         moveSlides('next');
       }, 6000);
     });
+    slidesWrapper.addEventListener('touchend', () => {
+      console.log('touchend');
+      // slidesWrapper.style.removeProperty('overflow-x');
+      interval = setInterval(() => {
+        moveSlides('next');
+      }, 6000);
+    });
   }, 3000);
 }
 

From 150589479f6a8933279aff5edde80dae7993c265 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 13 Dec 2023 17:49:35 -0500
Subject: [PATCH 07/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 97 ++++++++++--------------
 1 file changed, 41 insertions(+), 56 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 03045296..297e7820 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -1,6 +1,41 @@
 import { decorateIcons } from '../../scripts/aem.js';
 import { isExternal } from '../../scripts/scripts.js';
 
+function setAutoScroll(moveSlides, slidesWrapper) {
+  // Set interval for auto-scrolling (change slide every 3 seconds)
+  let interval;
+  setTimeout(() => {
+    interval = setInterval(() => {
+      moveSlides('next');
+    }, 3000);
+
+    // Stop auto-scroll on user interaction
+    slidesWrapper.addEventListener('mouseenter', () => {
+      clearInterval(interval);
+    });
+    slidesWrapper.addEventListener('mouseleave', () => {
+      console.log('mouseleave');
+      interval = setInterval(() => {
+        moveSlides('next');
+      }, 6000);
+    });
+  }, 3000);
+}
+
+function createButtons(moveSlides) {
+  return ['prev', 'next'].map((direction) => {
+    const button = document.createElement('button');
+    button.ariaLabel = `show ${direction} slide`;
+    button.classList.add(direction);
+    const iconDiv = document.createElement('div');
+    iconDiv.classList.add(`arrow-${direction}`);
+    iconDiv.classList.add('carousel-arrow');
+    button.appendChild(iconDiv);
+    button.addEventListener('click', () => moveSlides(direction));
+    return button;
+  });
+}
+
 /**
  * Generic carousel block, which can be used for any content or blocks.
  * Each row is a slide.
@@ -46,17 +81,15 @@ export default async function decorate(block) {
         if (!mobile) {
           block.querySelector('.arrow-prev').style.display = 'inline-block';
         }
-        if (currentIndex == (items.length - itemsToShow)) {
+        if (currentIndex === (items.length - itemsToShow)) {
           block.querySelector('.arrow-next').style.display = 'none';
         }
       }
-    } else {
-      if (currentIndex >= 1) {
-        currentIndex -= 1;
-        slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
-        if (currentIndex <= 1) {
-          block.querySelector('.arrow-prev').style.display = 'none';
-        }
+    } else if (currentIndex >= 1) {
+      currentIndex -= 1;
+      slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+      if (currentIndex <= 1) {
+        block.querySelector('.arrow-prev').style.display = 'none';
       }
     }
   }
@@ -65,51 +98,3 @@ export default async function decorate(block) {
   await decorateIcons(block);
   setAutoScroll(moveSlides, block);
 }
-
-function setAutoScroll(moveSlides, slidesWrapper) {
-  // Set interval for auto-scrolling (change slide every 3 seconds)
-  let interval;
-  setTimeout(() => {
-    interval = setInterval(() => {
-      moveSlides('next');
-    }, 5000);
-
-    // Stop auto-scroll on user interaction
-    slidesWrapper.addEventListener('mouseenter', () => {
-      clearInterval(interval);
-    });
-    // Stop auto-scroll on user interaction
-    slidesWrapper.addEventListener('touchstart', () => {
-      console.log('touchstart');
-      clearInterval(interval);
-      // slidesWrapper.style.setProperty('overflow-x', 'auto', 'important');
-    });
-    slidesWrapper.addEventListener('mouseleave', () => {
-      console.log('mouseleave');
-      interval = setInterval(() => {
-        moveSlides('next');
-      }, 6000);
-    });
-    slidesWrapper.addEventListener('touchend', () => {
-      console.log('touchend');
-      // slidesWrapper.style.removeProperty('overflow-x');
-      interval = setInterval(() => {
-        moveSlides('next');
-      }, 6000);
-    });
-  }, 3000);
-}
-
-function createButtons(moveSlides) {
-  return ['prev', 'next'].map((direction) => {
-    const button = document.createElement('button');
-    button.ariaLabel = `show ${direction} slide`;
-    button.classList.add(direction);
-    const iconDiv = document.createElement('div');
-    iconDiv.classList.add(`arrow-${direction}`);
-    iconDiv.classList.add('carousel-arrow');
-    button.appendChild(iconDiv);
-    button.addEventListener('click', () => moveSlides(direction));
-    return button;
-  });
-}

From 610c1aa415fbc51a1501f45147c1ab1609db112a Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:08:02 -0500
Subject: [PATCH 08/15] code refactor

---
 cigaradvisor/blocks/carousel/carousel.css | 73 +++++++----------------
 cigaradvisor/blocks/carousel/carousel.js  | 12 ++--
 2 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index 540d8135..c9979550 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -31,7 +31,7 @@
 }
 
 
-.carousel>button {
+.carousel.block>button {
   position: absolute;
   top: 40%;
   background: unset;
@@ -40,72 +40,47 @@
   border: none;
 }
 
-.carousel>button.prev {
+.carousel.block>button.prev {
   left: 0;
 }
 
-.carousel button.next {
+.carousel.block>button.next {
   right: 0;
   padding: 0 30px 0 0;
 }
 
 
-.carousel-arrow {
-  display: none;
-  background-color: #000;
-  /* Arrow color */
-  position: relative;
+.carousel.block .carousel-arrow {
+  display: inline-block;
   cursor: pointer;
   position: absolute;
   z-index: 9;
   padding: 0;
   margin: 0;
-  background-color: rgba(0, 0, 0, .7);
+  background-color: #000000B3;
   text-align: center;
   width: 30px;
   height: 50px;
 }
 
-.arrow-next::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-60%, -50%);
-  /* Adjust for arrow positioning */
-  border-style: solid;
-  border-width: 2px 2px 0 0;
-  padding: 4px;
-  width: 10px;
-  /* Arrowhead width */
-  height: 10px;
-  /* Arrowhead height */
-  transform: rotate(45deg);
-  /* Rotate arrowhead for next direction */
-  border-color: #fff;
-  /* Arrowhead color */
+.carousel.block .carousel-arrow .prev-icon,
+.carousel.block .carousel-arrow .next-icon {
+  display: inline-block;
+  font-size: 45px;
+  color: #fff;
 }
 
-.next {
-  padding-right: 30px;
+.carousel.block .carousel-arrow .next-icon {
+  transform: rotate(180deg);
+  margin: 10%;
 }
 
-.arrow-prev::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 50%;
-  transform: translate(-40%, -50%);
-  border-style: solid;
-  border-width: 2px 2px 0 0;
-  padding: 4px;
-  width: 10px;
-  /* Arrowhead width */
-  height: 10px;
-  /* Arrowhead height */
-  transform: rotate(-135deg);
-  border-color: #fff;
-  /* Arrowhead color */
+.carousel.block .carousel-arrow .prev-icon {
+  margin: -10%;
+}
+
+.carousel.block .arrow-prev {
+  display: none;
 }
 
 
@@ -113,12 +88,4 @@
   .carousel.block .slide {
     flex: 1 0 50%;
   }
-
-  .carousel.block .carousel-arrow {
-    display: inline-block;
-  }
-
-  .carousel.block .arrow-prev {
-    display: none;
-  }
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 297e7820..b0c734d4 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -7,14 +7,13 @@ function setAutoScroll(moveSlides, slidesWrapper) {
   setTimeout(() => {
     interval = setInterval(() => {
       moveSlides('next');
-    }, 3000);
+    }, 6000);
 
     // Stop auto-scroll on user interaction
     slidesWrapper.addEventListener('mouseenter', () => {
       clearInterval(interval);
     });
     slidesWrapper.addEventListener('mouseleave', () => {
-      console.log('mouseleave');
       interval = setInterval(() => {
         moveSlides('next');
       }, 6000);
@@ -30,6 +29,10 @@ function createButtons(moveSlides) {
     const iconDiv = document.createElement('div');
     iconDiv.classList.add(`arrow-${direction}`);
     iconDiv.classList.add('carousel-arrow');
+    const iconSpan = document.createElement('span');
+    iconSpan.classList.add(`${direction}-icon`);
+    iconSpan.innerHTML = '&#8249;';
+    iconDiv.append(iconSpan);
     button.appendChild(iconDiv);
     button.addEventListener('click', () => moveSlides(direction));
     return button;
@@ -78,9 +81,7 @@ export default async function decorate(block) {
       if (currentIndex < (items.length - itemsToShow)) {
         currentIndex += 1;
         slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
-        if (!mobile) {
-          block.querySelector('.arrow-prev').style.display = 'inline-block';
-        }
+        block.querySelector('.arrow-prev').style.display = 'inline-block';
         if (currentIndex === (items.length - itemsToShow)) {
           block.querySelector('.arrow-next').style.display = 'none';
         }
@@ -88,6 +89,7 @@ export default async function decorate(block) {
     } else if (currentIndex >= 1) {
       currentIndex -= 1;
       slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
+      block.querySelector('.arrow-next').style.display = 'inline-block';
       if (currentIndex <= 1) {
         block.querySelector('.arrow-prev').style.display = 'none';
       }

From 927c10b4233051abe6e0363d464fe5cc3b3bf096 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:23:11 -0500
Subject: [PATCH 09/15] refactoring

---
 cigaradvisor/blocks/carousel/carousel.css | 8 ++++++++
 cigaradvisor/blocks/carousel/carousel.js  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index c9979550..253cc792 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -18,6 +18,14 @@
   transition: transform 3000ms ease 0ms;
 }
 
+.carousel.block a picture {
+  display: flex;
+}
+
+.carousel.block a picture > img{
+  flex-grow: 1;
+}
+
 .carousel.block>div::-webkit-scrollbar {
   display: none;
 }
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index b0c734d4..b9f6b2ba 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -2,7 +2,6 @@ import { decorateIcons } from '../../scripts/aem.js';
 import { isExternal } from '../../scripts/scripts.js';
 
 function setAutoScroll(moveSlides, slidesWrapper) {
-  // Set interval for auto-scrolling (change slide every 3 seconds)
   let interval;
   setTimeout(() => {
     interval = setInterval(() => {
@@ -42,6 +41,7 @@ function createButtons(moveSlides) {
 /**
  * Generic carousel block, which can be used for any content or blocks.
  * Each row is a slide.
+ * left column is image and right column is the link.
  * @param block
  */
 export default async function decorate(block) {

From a0bb3134b8f2124f7ef491264fd355dfa7d40823 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:32:34 -0500
Subject: [PATCH 10/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index b9f6b2ba..349f1784 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -3,21 +3,26 @@ import { isExternal } from '../../scripts/scripts.js';
 
 function setAutoScroll(moveSlides, slidesWrapper) {
   let interval;
+  let interacting = false;
   setTimeout(() => {
-    interval = setInterval(() => {
-      moveSlides('next');
-    }, 6000);
-
-    // Stop auto-scroll on user interaction
-    slidesWrapper.addEventListener('mouseenter', () => {
-      clearInterval(interval);
-    });
+    if (!interacting) {
+      interval = setInterval(() => {
+        moveSlides('next');
+      }, 6000);
+    }
     slidesWrapper.addEventListener('mouseleave', () => {
+      interacting = false;
       interval = setInterval(() => {
         moveSlides('next');
       }, 6000);
     });
   }, 3000);
+
+  // Stop auto-scroll on user interaction
+  slidesWrapper.addEventListener('mouseenter', () => {
+    interacting = true;
+    clearInterval(interval);
+  });
 }
 
 function createButtons(moveSlides) {

From 5adeb560b067a1d1f8fb1eb1fd2a35b980f8a50f Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:35:21 -0500
Subject: [PATCH 11/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 349f1784..abfd9789 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -1,7 +1,7 @@
 import { decorateIcons } from '../../scripts/aem.js';
 import { isExternal } from '../../scripts/scripts.js';
 
-function setAutoScroll(moveSlides, slidesWrapper) {
+function setAutoScroll(moveSlides, block) {
   let interval;
   let interacting = false;
   setTimeout(() => {
@@ -10,7 +10,7 @@ function setAutoScroll(moveSlides, slidesWrapper) {
         moveSlides('next');
       }, 6000);
     }
-    slidesWrapper.addEventListener('mouseleave', () => {
+    block.addEventListener('mouseleave', () => {
       interacting = false;
       interval = setInterval(() => {
         moveSlides('next');
@@ -19,7 +19,7 @@ function setAutoScroll(moveSlides, slidesWrapper) {
   }, 3000);
 
   // Stop auto-scroll on user interaction
-  slidesWrapper.addEventListener('mouseenter', () => {
+  block.addEventListener('mouseenter', () => {
     interacting = true;
     clearInterval(interval);
   });

From dffb32052e16539930977b82d039093a60b1dbad Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:55:42 -0500
Subject: [PATCH 12/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index abfd9789..759a3a72 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -1,4 +1,3 @@
-import { decorateIcons } from '../../scripts/aem.js';
 import { isExternal } from '../../scripts/scripts.js';
 
 function setAutoScroll(moveSlides, block) {
@@ -102,6 +101,5 @@ export default async function decorate(block) {
   }
 
   block.append(...createButtons(moveSlides));
-  await decorateIcons(block);
   setAutoScroll(moveSlides, block);
 }

From e49b9b8e86a258ed7856ce509834427a2d5a6f68 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:21:22 -0500
Subject: [PATCH 13/15] fix prev click

---
 cigaradvisor/blocks/carousel/carousel.css |  1 +
 cigaradvisor/blocks/carousel/carousel.js  | 12 +++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css
index 253cc792..51ebe4cb 100644
--- a/cigaradvisor/blocks/carousel/carousel.css
+++ b/cigaradvisor/blocks/carousel/carousel.css
@@ -23,6 +23,7 @@
 }
 
 .carousel.block a picture > img{
+  display: block;
   flex-grow: 1;
 }
 
diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 759a3a72..49c34cc5 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -9,12 +9,6 @@ function setAutoScroll(moveSlides, block) {
         moveSlides('next');
       }, 6000);
     }
-    block.addEventListener('mouseleave', () => {
-      interacting = false;
-      interval = setInterval(() => {
-        moveSlides('next');
-      }, 6000);
-    });
   }, 3000);
 
   // Stop auto-scroll on user interaction
@@ -22,6 +16,10 @@ function setAutoScroll(moveSlides, block) {
     interacting = true;
     clearInterval(interval);
   });
+
+  block.addEventListener('mouseleave', () => {
+    interacting = false;
+  });
 }
 
 function createButtons(moveSlides) {
@@ -94,7 +92,7 @@ export default async function decorate(block) {
       currentIndex -= 1;
       slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`;
       block.querySelector('.arrow-next').style.display = 'inline-block';
-      if (currentIndex <= 1) {
+      if (currentIndex < 1) {
         block.querySelector('.arrow-prev').style.display = 'none';
       }
     }

From fc50f2663e0a1722c5fd2e62385200624167eebb Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:42:14 -0500
Subject: [PATCH 14/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 49c34cc5..2a143e2e 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -2,9 +2,8 @@ import { isExternal } from '../../scripts/scripts.js';
 
 function setAutoScroll(moveSlides, block) {
   let interval;
-  let interacting = false;
   setTimeout(() => {
-    if (!interacting) {
+    if (interval === undefined) {
       interval = setInterval(() => {
         moveSlides('next');
       }, 6000);
@@ -13,12 +12,17 @@ function setAutoScroll(moveSlides, block) {
 
   // Stop auto-scroll on user interaction
   block.addEventListener('mouseenter', () => {
-    interacting = true;
     clearInterval(interval);
+    interval = undefined;
   });
 
   block.addEventListener('mouseleave', () => {
-    interacting = false;
+    if (interval === undefined) {
+      interval = setInterval(() => {
+        moveSlides('next');
+      }, 6000);
+      console.log('after checking', interval);
+    }
   });
 }
 

From 47d31fc9092d84023ec6ebcb9a8b0cd1cba0c114 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:42:26 -0500
Subject: [PATCH 15/15] Update carousel.js

---
 cigaradvisor/blocks/carousel/carousel.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js
index 2a143e2e..47443159 100644
--- a/cigaradvisor/blocks/carousel/carousel.js
+++ b/cigaradvisor/blocks/carousel/carousel.js
@@ -21,7 +21,6 @@ function setAutoScroll(moveSlides, block) {
       interval = setInterval(() => {
         moveSlides('next');
       }, 6000);
-      console.log('after checking', interval);
     }
   });
 }