FROM CACHE - en_header
Promotion image

Slider Buttons - Need Aligned Properly!

Solved

Slider Buttons - Need Aligned Properly!

ManKaveStore
Explorer
66 7 10
‎06-21-2024 09:40 PM

Hello, I wanted to limit my site to 1990px max-width because I was concerned about page speed. I want these slider buttons to be on the left and right side of the .product-grid, and I want them to stay centered if its on a larger screen, or scrolled out using 'control + mouse wheel'  (which I've been generally using margin: 0 auto; to center my content).

 

 

My website is: https://mankave.store

 

ManKaveStore_0-1719020342961.png

 

and this is the CSS code for this section "component.slider.liquid" - I only changed the bottom part of the code: (It is sloppy because I've been messing with it for a while) 

 

slider-component {
  --desktop-margin-left-first-item: max(
    5rem,
    calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
  );
  position: relative;
  display: block;
}

slider-component.slider-component-full-width {
  --desktop-margin-left-first-item: 1.5rem;
}

@media screen and (max-width: 749px) {
  slider-component.page-width {
    padding: 0 1.5rem;
  }
}

@media screen and (min-width: 749px) and (max-width: 990px) {
  slider-component.page-width {
    padding: 0 5rem;
  }
}

.slider__slide {
  --focus-outline-padding: 0.5rem;
  --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
  --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .slider.slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--mobile:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
  }

  .slider.slider--mobile .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--mobile.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media screen and (min-width: 750px) {
  .slider.slider--tablet-up {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .slider.slider--tablet-up .slider__slide {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .slider.slider--tablet {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--tablet:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }

  .slider.slider--tablet .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--tablet.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

.slider--everywhere {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.slider.slider--everywhere .slider__slide {
  margin-bottom: 0;
  scroll-snap-align: center;
}

@media screen and (min-width: 990px) {
  .slider-component-desktop.page-width {
    max-width: none;
  }

  .slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scroll-padding-left: var(--desktop-margin-left-first-item);
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--desktop:after {
    content: '';
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }

  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider--desktop .slider__slide:first-child {
    margin-left: var(--desktop-margin-left-first-item);
    scroll-margin-left: var(--desktop-margin-left-first-item);
  }

  .slider-component-full-width .slider--desktop {
    scroll-padding-left: 1.5rem;
  }

  .slider-component-full-width .slider--desktop .slider__slide:first-child {
    margin-left: 1.5rem;
    scroll-margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider-component-full-width .slider--desktop:after {
    padding-left: 1.5rem;
  }

  .slider--desktop.grid--5-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
  }

  .slider--desktop.grid--4-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
  }

  .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
  }

  .slider--desktop.grid--2-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
  }

  .slider--desktop.grid--1-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
  }

  .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--desktop.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media (prefers-reduced-motion) {
  .slider {
    scroll-behavior: auto;
  }
}

/* Scrollbar */

.slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.slider-counter {
  display: flex;
  justify-content: center;
  min-width: 4.4rem;
}

@media screen and (min-width: 750px) {
  .slider-counter--dots {
    margin: 0 1.2rem;
  }
}

.slider-counter__link {
  padding: 1rem;
}

@media screen and (max-width: 749px) {
  .slider-counter__link {
    padding: 0.7rem;
  }
}

.slider-counter__link--dots .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  padding: 0;
  display: block;
}

.slider-counter__link--active.slider-counter__link--dots .dot {
  background-color: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: CanvasText;
  }
}

.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
  border-color: rgb(var(--color-foreground));
}

.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}

.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
  transform: scale(1.1);
}

.slider-counter__link--numbers {
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: none;
}

.slider-counter__link--numbers:hover {
  color: rgb(var(--color-foreground));
}

.slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: rgb(var(--color-foreground));
}

.slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 990px) {
  .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
    display: none;
  }
}

@media screen and (max-width: 989px) {
  .slider--desktop:not(.slider--tablet) + .slider-buttons {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .slider--mobile + .slider-buttons {
    display: none;
  }
}

.slider-button {
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.slider-button .icon {
  height: 0.6rem;
}

.slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
  cursor: not-allowed;
}

.slider-button--next .icon {
  transform: rotate(-90deg);
}

.slider-button--prev .icon {
  transform: rotate(90deg);
}

.slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg) scale(1.1);
}
.slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg) scale(1.1);
}
.slider-counter {
  display: none !important;
}
.product-grid {
  width: 100%;
  max-width: 1990px;
  margin: 0 auto;
}
.slider-mobile-gutter .slider-buttons {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateX(-20%);
  max-width: 1990px;
  width: 100%;
  margin: 1 auto;
}
.slider-mobile-gutter .slider-buttons button {
  color: red;
  border: none;
  margin: 0 auto;
}
.slider-button {
  max-width: 80px;
  height: 180px;
  color: red;
  background: #171414;
  border-radius: 25%;
  opacity: 0.7;
}
.slider-button:hover {
  opacity: 0.9;
}
.slider-buttons {
  width: 100vw;
  max-width: 1990px !important;
}

 

 

Labels:
1,513 Views
0 Likes
Report
Accepted Solution (1)

parth_ghelani
Shopify Partner
259 38 40
‎06-22-2024 12:49 AM

This is an accepted solution.

Hello @ManKaveStore 

To center the slider arrows on both side of the screen, i've found the solution for it.

You just need to follow below steps:

 1. Go to admin  > Online store > edit code.

 2. In code directory, open the file where the CSS for slider is situated which you were mentioned above.

 3. Copy below CSS rules and paste it at the end where above CSS ends.

slider-component {
 position: relative;
}
slider-component .slider-buttons {
  position: absolute;
  top: 41%;
  transform: translateY(-50%);
  width: 100%;
  background: transparent;
}
slider-component .slider-buttons .slider-counter {
 display: none;
}
slider-component .slider-buttons .slider-button {
 position: absolute;
 margin: 0;
}
slider-component .slider-buttons .slider-button.slider-button--prev {
 left: 25px;
}
slider-component .slider-buttons .slider-button.slider-button--next {
 right: 25px;
}

 4. Make sure that you added this CSS rules at right place and save the file.

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

View solution in original post

1,473 Views
1 Like
Report
Replies 3 (3)

parth_ghelani
Shopify Partner
259 38 40
‎06-22-2024 12:49 AM

This is an accepted solution.

Hello @ManKaveStore 

To center the slider arrows on both side of the screen, i've found the solution for it.

You just need to follow below steps:

 1. Go to admin  > Online store > edit code.

 2. In code directory, open the file where the CSS for slider is situated which you were mentioned above.

 3. Copy below CSS rules and paste it at the end where above CSS ends.

slider-component {
 position: relative;
}
slider-component .slider-buttons {
  position: absolute;
  top: 41%;
  transform: translateY(-50%);
  width: 100%;
  background: transparent;
}
slider-component .slider-buttons .slider-counter {
 display: none;
}
slider-component .slider-buttons .slider-button {
 position: absolute;
 margin: 0;
}
slider-component .slider-buttons .slider-button.slider-button--prev {
 left: 25px;
}
slider-component .slider-buttons .slider-button.slider-button--next {
 right: 25px;
}

 4. Make sure that you added this CSS rules at right place and save the file.

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
1,474 Views
1 Like
Report
In response to parth_ghelani

ManKaveStore
Explorer
66 7 10
‎06-22-2024 01:02 AM

Thank you for the help!

1,470 Views
0 Likes
Report
In response to ManKaveStore

parth_ghelani
Shopify Partner
259 38 40
‎06-22-2024 01:07 AM

@ManKaveStore 

I'm so glad you liked it!

Always ready to help. 

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
1,467 Views
0 Likes
Report

Community Blog Articles

May '25.jpg
Celebrating our Members of May '25

June brought summer energy to our community. Members jumped in with solutions, clicked ...

By JasonH Jun 5, 2025
441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April 25.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
Terms of Service Privacy Policy