Add a Carousel with Synchronized Sliders on Dawn

[Panagi1091]

Since the 2.0 themes came out I have been using them for various projects and all I can say is that they are pretty good but very simplistic. In the past few days, I've been working on a new project but can't seem to figure out how to add new "sections"on the themes (that i find on codepen, since I have very little/basic knowledge of coding).

In the past themes, I would add a custom liquid to the editor, add all the CSS to theme.scss.liquid and if there was any JS that needed to be added I would go ahead and either put it on "theme.js" or "theme.liquid". And voila!! Everything would work perfectly.

With Dawn that I currently use, I add all CSS codes to base.css(of course change some things around so they do not affect any codes that are already in the theme) and add HTML on the custom liquid. When I have to add JS I go ahead and add it to global.js but doesn't seem to work at all!

What I wanna know is how can I add the codepen mentioned below to my theme in a custom liquid. Like what is the theme file i have to add the JS to? Am i doing something completely wrong? Please enlighten me!!

CODEPEN THAT WOULD LOVE TO ADD:

https://codepen.io/lmgonzalves/pen/djEgmv

Any help would be very much appreciated! Sorry for the long post!

@KetanKumar @made4Uo @LitCommerce @oscprofessional @PageFly-Victor

@MarinaPetrovic@LitExtension@ZestardTech @AvadaCommerce 

[made4Uo]

Hi @Panagi1091,

You can add a custom section by following the instructions below.

NOTE: If you try to add this section in multiple locations, it might cause an error. Also, make sure your theme supports SCSS, you might need to convert it to CSS. 

1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Section folder, click Add a new section

4. You have to enclose your code like below.

html code here....

<style>
Place your CSS style here
<style>

<script>
Place your javascript code here
</script>

{% schema %}
  {
    "name": "Section name",
    "settings": [],
	"presets": [
		{
 		 "name": "Section name",
		}
	]
  }
{% endschema %}

NOTE: You need the presets so you can see the section in your Theme editor. You can change the "Section name" to whatever you want. 

[Panagi1091]

Thanks for getting back to me! Tried that but all i get is "Invalid JSON in tag 'schema'" since i have no idea what to add on the settings and presets. Is this the best way to do it?

<div class="container">
   
    <!-- Container for all sliders, and pagination -->
    <main class="sliders-container">
        <!-- Here will be injected sliders for images, numbers, titles and links -->

        <!-- Simple pagination for the slider -->
        <ul class="pagination">
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
        </ul>
    </main>
  
</div>




<style>
// SCSS mixin to generate the final CSS code for the slider

// Params:
// - $cssClass: CSS class to match the slider container
// - $slider-length: Length (width or height) of slider container
// - $slider-center: If slider should be centered
// - $slide-width: Fixed width for each slide
// - $slide-height: Fixed height for each slide
// - $vertical: If slider should be vertical (true), or horizontal (false)
// - $reverse: If slider should have reversed slides (first items at the end)
// - $debug: Show helpful background colors to help debugging

@mixin ms(
  // Default values
  $cssClass: 'ms-container',
  $slider-length: 400px,
  $slider-center: false,
  $slide-width: 90px,
  $slide-height: 90px,
  $vertical: false,
  $reverse: false,
  $debug: false
) {
  // Slider container
  .#{$cssClass} {
    position: relative;
    @IF $slider-center {
      margin: 0 auto;
    }
    overflow: hidden;
    @IF $debug {
      background-color: rgba(0, 0, 0, 0.2);
    }

    @IF $debug {
      // Just for testing the current slide position (centered)
      &:before {
        content: '';
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 100%;
      }
    }

    @IF $vertical {
      // Styles for vertical slider
      &.ms-container--vertical {
        width: $slide-width;
        height: $slider-length;
        max-height: 100%;
  
        @IF $debug {
          &:before {
            left: 0;
            top: calc(50% - #{$slide-height / 2});
            width: 100%;
            height: $slide-height;
          }
        }
  
        // Centering slider track vertically, to get current slide centered
        .ms-track {
          flex-direction: column;
          top: calc(50% - #{$slide-height / 2});
        }
  
        @IF $reverse {
          // Reverse styles
          &.ms-container--reverse .ms-track {
            flex-direction: column-reverse;
            top: auto;
            bottom: calc(50% - #{$slide-height / 2});
          }
        }
  
        // Positioning slides vertically
        .ms-slide {
          display: flex;
        }
      }
    } @else {
      // Styles for horizontal slider
      &.ms-container--horizontal {
        width: $slider-length;
        height: $slide-height;
        max-width: 100%;
  
        @IF $debug {
          &:before {
            left: calc(50% - #{$slide-width / 2});
            top: 0;
            width: $slide-width;
            height: 100%;
          }
        }
  
        // Centering slider track horizontally, to get current slide centered
        .ms-track {
          left: calc(50% - #{$slide-width / 2});
        }
  
        @IF $reverse {
          // Reverse styles
          &.ms-container--reverse .ms-track {
            flex-direction: row-reverse;
            left: auto;
            right: calc(50% - #{$slide-width / 2});
          }
        }
  
        // Positioning slides horizontally
        .ms-slide {
          display: inline-flex;
        }
      }
    }
  
    // Slider track
    .ms-track {
      display: flex;
      position: absolute;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      list-style: none;
    }
  
    // Slides
    .ms-slide {
      align-items: center;
      justify-content: center;
      width: $slide-width;
      height: $slide-height;
      user-select: none;
  
      @IF $debug {
        // A testing backgrounds for slides
        &:nth-child(2n) {
          background-color: rgba(0, 0, 0, 0.1);
        }
        &:nth-child(2n + 1) {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}


// Images

$ms-images-slide-width: 700px;
$ms-images-slide-height: 400px;

// SCSS mixin to generate the final CSS code for the slider
@include ms(
  $cssClass: 'ms--images', // CSS class to match the slider container
  $slider-length: 100%,    // The slider container will have full width
  $slider-center: false,   // Don't need to center it, as it is full width
  $slide-width: $ms-images-slide-width,   // Fixed width for each slide
  $slide-height: $ms-images-slide-height, // Fixed height for each slide
  $vertical: false, // The slider should be horizontal
  $reverse: false,  // Normal order
  $debug: false     // No debbug backgrounds in production
);

// Custom styles for images slider
.ms--images {
  left: calc(50% - #{$ms-images-slide-width / 2 - 70px});

  &.ms-container--horizontal .ms-track {
    left: -70px;
  }

  // Slides images
  .ms-slide {
    &:nth-child(1) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
    }
    &:nth-child(2) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
    }
    &:nth-child(3) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
    }
    &:nth-child(4) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
    }
  }

  .ms-slide__image-container {
    width: 80%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

  .ms-slide__image {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}


// Numbers

$ms-numbers-slide-width: 240px;
$ms-numbers-slide-height: 240px;

@include ms(
  $cssClass: 'ms--numbers',
  $slider-length: $ms-numbers-slide-width,
  $slider-center: false,
  $slide-width: $ms-numbers-slide-width,
  $slide-height: $ms-numbers-slide-height,
  $vertical: false,
  $reverse: false,
  $debug: false
);

.ms--numbers {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 30px});
  top: calc(50% - #{$ms-images-slide-height / 2 + $ms-numbers-slide-height / 2 - 20px});
  z-index: -1;
  pointer-events: none;

  .ms-slide {
    font-size: 9em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
  }
}


// Titles

$ms-titles-slide-width: 400px;
$ms-titles-slide-height: 170px;

@include ms(
  $cssClass: 'ms--titles',
  $slider-length: $ms-titles-slide-height,
  $slider-center: false,
  $slide-width: $ms-titles-slide-width,
  $slide-height: $ms-titles-slide-height,
  $vertical: true,
  $reverse: true,
  $debug: false
);

.ms--titles {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(50% - #{$ms-titles-slide-height / 2});
  z-index: 1;
  pointer-events: none;

  .ms-track {
    white-space: normal;
  }

  .ms-slide {
    font-size: 3.3em;
    font-weight: 600;

    h3 {
      margin: 0;
      text-shadow: 1px 1px 2px black;
    }
  }
}


// Links

$ms-links-slide-width: 120px;
$ms-links-slide-height: 60px;

@include ms(
  $cssClass: 'ms--links',
  $slider-length: $ms-links-slide-height,
  $slider-center: false,
  $slide-width: $ms-links-slide-width,
  $slide-height: $ms-links-slide-height,
  $vertical: true,
  $reverse: false,
  $debug: false
);

.ms--links {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(50% + #{$ms-titles-slide-height / 2 + 20px});
  z-index: 1;

  .ms-track {
    white-space: normal;
  }

  .ms-slide__link {
    font-weight: 600;
    padding: 5px 0 8px;
    border-bottom: 2px solid white;
    cursor: pointer;
  }
}


// Pagination

.pagination {
  display: flex;
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(100%);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;

  &__button {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    margin: 0 5px;
    cursor: pointer;
    
    &:before, &:after {
      content: '';
      position: absolute;
      left: 0;
      top: calc(50% - 1px);
      width: 100%;
      box-shadow: 0 1px 0 #0B0D14;
    }
    
    &:before {
      height: 2px;
      background-color: #6A3836;
    }
    
    &:after {
      height: 3px;
      background-color: #DC4540;
      opacity: 0;
      transition: 0.5s opacity;
    }
  }
}

.pagination__item--active .pagination__button:after {
  opacity: 1;
}


// Responsive styles

@media screen and (max-width: 860px) {
  .ms--numbers {
    left: calc(50% - #{$ms-numbers-slide-width / 2});
  }

  .ms--titles {
    left: calc(50% - #{$ms-titles-slide-width / 2});
    top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
    text-align: center;
  }

  .ms--links {
    left: calc(50% - #{$ms-links-slide-width / 2});
    top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
  }

  .pagination {
    left: 50%;
    top: calc(100% - 50px);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 600px) {
  .ms--images {
    overflow: visible;
  }
}

@media screen and (max-width: 400px) {
  .ms--titles {
    .ms-slide {
      transform: scale(0.8);
    }
  }
}


$color-primary: rgba(255, 255, 255, 1);
$color-secondary: rgba(255, 255, 255, 0.5);

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  color: $color-primary;
  background-color: #1B1C21;
  overflow: hidden;
}

a {
  color: $color-primary;
  text-decoration: none;
  cursor: pointer;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);

  &:before {
    content: '';
    position: absolute;
    left: -150%;
    top: 0;
    width: 300%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    z-index: -1;
  }
}


  





.sliders-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}



<style>

<script>
(function() {

    var slidersContainer = document.querySelector('.sliders-container');

    // Initializing the numbers slider
    var msNumbers = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--numbers',
        range: [1, 4],
        rangeContent: function (i) {
            return '0' + i;
        },
        style: {
            transform: [{scale: [0.4, 1]}],
            opacity: [0, 1]
        },
        interactive: false
    });

    // Initializing the titles slider
    var titles = [
        'King of the Ring Fight',
        'Sound of Streets',
        'Urban Fashion',
        'Windy Sunset'
    ];
    var msTitles = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--titles',
        range: [0, 3],
        rangeContent: function (i) {
            return '<h3>'+ titles[i] +'</h3>';
        },
        vertical: true,
        reverse: true,
        style: {
            opacity: [0, 1]
        },
        interactive: false
    });

    // Initializing the links slider
    var msLinks = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--links',
        range: [0, 3],
        rangeContent: function () {
            return '<a class="ms-slide__link">View Case</a>';
        },
        vertical: true,
        interactive: false
    });

    // Get pagination items
    var pagination = document.querySelector('.pagination');
    var paginationItems = [].slice.call(pagination.children);

    // Initializing the images slider
    var msImages = new MomentumSlider({
        // Element to append the slider
        el: slidersContainer,
        // CSS class to reference the slider
        cssClass: 'ms--images',
        // Generate the 4 slides required
        range: [0, 3],
        rangeContent: function () {
            return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
        },
        // Syncronize the other sliders
        sync: [msNumbers, msTitles, msLinks],
        // Styles to interpolate as we move the slider
        style: {
            '.ms-slide__image': {
                transform: [{scale: [1.5, 1]}]
            }
        },
        // Update pagination if slider change
        change: function(newIndex, oldIndex) {
            if (typeof oldIndex !== 'undefined') {
                paginationItems[oldIndex].classList.remove('pagination__item--active');
            }
            paginationItems[newIndex].classList.add('pagination__item--active');
        }
    });

    // Select corresponding slider item when a pagination button is clicked
    pagination.addEventListener('click', function(e) {
        if (e.target.matches('.pagination__button')) {
            var index = paginationItems.indexOf(e.target.parentNode);
            msImages.select(index);
        }
    });

})();

</script>

{% schema %}
  {
    "name": "Carousel Image Slider",
    "settings": [],
	"presets": [
		{
 		 "name": "Carousel Image Slider",
		}
	]
  }
{% endschema %}

[Panagi1091]

Tried that but I get an error. Might be since I do not know what to put on "settings" and "presets" I get an error of "Invalid JSON in tag 'schema'.

[Panagi1091]

Tried that but I get an error. Might be since I do not know what to put on "settings" and "presets" I get an error of "Invalid JSON in tag 'schema'.

[made4Uo]

Hi @Panagi1091,

Can you share your code? So we can figure out where the errors coming from

[Panagi1091]

Sure thing! Thanks in advance 🙂

<div class="container">
   
    <!-- Container for all sliders, and pagination -->
    <main class="sliders-container">
        <!-- Here will be injected sliders for images, numbers, titles and links -->

        <!-- Simple pagination for the slider -->
        <ul class="pagination">
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
            <li class="pagination__item"><a class="pagination__button"></a></li>
        </ul>
    </main>
  
</div>


<style>
// SCSS mixin to generate the final CSS code for the slider

// Params:
// - $cssClass: CSS class to match the slider container
// - $slider-length: Length (width or height) of slider container
// - $slider-center: If slider should be centered
// - $slide-width: Fixed width for each slide
// - $slide-height: Fixed height for each slide
// - $vertical: If slider should be vertical (true), or horizontal (false)
// - $reverse: If slider should have reversed slides (first items at the end)
// - $debug: Show helpful background colors to help debugging

@mixin ms(
  // Default values
  $cssClass: 'ms-container',
  $slider-length: 400px,
  $slider-center: false,
  $slide-width: 90px,
  $slide-height: 90px,
  $vertical: false,
  $reverse: false,
  $debug: false
) {
  // Slider container
  .#{$cssClass} {
    position: relative;
    @IF $slider-center {
      margin: 0 auto;
    }
    overflow: hidden;
    @IF $debug {
      background-color: rgba(0, 0, 0, 0.2);
    }

    @IF $debug {
      // Just for testing the current slide position (centered)
      &:before {
        content: '';
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 100%;
      }
    }

    @IF $vertical {
      // Styles for vertical slider
      &.ms-container--vertical {
        width: $slide-width;
        height: $slider-length;
        max-height: 100%;
  
        @IF $debug {
          &:before {
            left: 0;
            top: calc(50% - #{$slide-height / 2});
            width: 100%;
            height: $slide-height;
          }
        }
  
        // Centering slider track vertically, to get current slide centered
        .ms-track {
          flex-direction: column;
          top: calc(50% - #{$slide-height / 2});
        }
  
        @IF $reverse {
          // Reverse styles
          &.ms-container--reverse .ms-track {
            flex-direction: column-reverse;
            top: auto;
            bottom: calc(50% - #{$slide-height / 2});
          }
        }
  
        // Positioning slides vertically
        .ms-slide {
          display: flex;
        }
      }
    } @else {
      // Styles for horizontal slider
      &.ms-container--horizontal {
        width: $slider-length;
        height: $slide-height;
        max-width: 100%;
  
        @IF $debug {
          &:before {
            left: calc(50% - #{$slide-width / 2});
            top: 0;
            width: $slide-width;
            height: 100%;
          }
        }
  
        // Centering slider track horizontally, to get current slide centered
        .ms-track {
          left: calc(50% - #{$slide-width / 2});
        }
  
        @IF $reverse {
          // Reverse styles
          &.ms-container--reverse .ms-track {
            flex-direction: row-reverse;
            left: auto;
            right: calc(50% - #{$slide-width / 2});
          }
        }
  
        // Positioning slides horizontally
        .ms-slide {
          display: inline-flex;
        }
      }
    }
  
    // Slider track
    .ms-track {
      display: flex;
      position: absolute;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      list-style: none;
    }
  
    // Slides
    .ms-slide {
      align-items: center;
      justify-content: center;
      width: $slide-width;
      height: $slide-height;
      user-select: none;
  
      @IF $debug {
        // A testing backgrounds for slides
        &:nth-child(2n) {
          background-color: rgba(0, 0, 0, 0.1);
        }
        &:nth-child(2n + 1) {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}


// Images

$ms-images-slide-width: 700px;
$ms-images-slide-height: 400px;

// SCSS mixin to generate the final CSS code for the slider
@include ms(
  $cssClass: 'ms--images', // CSS class to match the slider container
  $slider-length: 100%,    // The slider container will have full width
  $slider-center: false,   // Don't need to center it, as it is full width
  $slide-width: $ms-images-slide-width,   // Fixed width for each slide
  $slide-height: $ms-images-slide-height, // Fixed height for each slide
  $vertical: false, // The slider should be horizontal
  $reverse: false,  // Normal order
  $debug: false     // No debbug backgrounds in production
);

// Custom styles for images slider
.ms--images {
  left: calc(50% - #{$ms-images-slide-width / 2 - 70px});

  &.ms-container--horizontal .ms-track {
    left: -70px;
  }

  // Slides images
  .ms-slide {
    &:nth-child(1) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
    }
    &:nth-child(2) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
    }
    &:nth-child(3) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
    }
    &:nth-child(4) .ms-slide__image {
      background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
    }
  }

  .ms-slide__image-container {
    width: 80%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

  .ms-slide__image {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}


// Numbers

$ms-numbers-slide-width: 240px;
$ms-numbers-slide-height: 240px;

@include ms(
  $cssClass: 'ms--numbers',
  $slider-length: $ms-numbers-slide-width,
  $slider-center: false,
  $slide-width: $ms-numbers-slide-width,
  $slide-height: $ms-numbers-slide-height,
  $vertical: false,
  $reverse: false,
  $debug: false
);

.ms--numbers {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 30px});
  top: calc(50% - #{$ms-images-slide-height / 2 + $ms-numbers-slide-height / 2 - 20px});
  z-index: -1;
  pointer-events: none;

  .ms-slide {
    font-size: 9em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
  }
}


// Titles

$ms-titles-slide-width: 400px;
$ms-titles-slide-height: 170px;

@include ms(
  $cssClass: 'ms--titles',
  $slider-length: $ms-titles-slide-height,
  $slider-center: false,
  $slide-width: $ms-titles-slide-width,
  $slide-height: $ms-titles-slide-height,
  $vertical: true,
  $reverse: true,
  $debug: false
);

.ms--titles {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(50% - #{$ms-titles-slide-height / 2});
  z-index: 1;
  pointer-events: none;

  .ms-track {
    white-space: normal;
  }

  .ms-slide {
    font-size: 3.3em;
    font-weight: 600;

    h3 {
      margin: 0;
      text-shadow: 1px 1px 2px black;
    }
  }
}


// Links

$ms-links-slide-width: 120px;
$ms-links-slide-height: 60px;

@include ms(
  $cssClass: 'ms--links',
  $slider-length: $ms-links-slide-height,
  $slider-center: false,
  $slide-width: $ms-links-slide-width,
  $slide-height: $ms-links-slide-height,
  $vertical: true,
  $reverse: false,
  $debug: false
);

.ms--links {
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(50% + #{$ms-titles-slide-height / 2 + 20px});
  z-index: 1;

  .ms-track {
    white-space: normal;
  }

  .ms-slide__link {
    font-weight: 600;
    padding: 5px 0 8px;
    border-bottom: 2px solid white;
    cursor: pointer;
  }
}


// Pagination

.pagination {
  display: flex;
  position: absolute;
  left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
  top: calc(100%);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;

  &__button {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    margin: 0 5px;
    cursor: pointer;
    
    &:before, &:after {
      content: '';
      position: absolute;
      left: 0;
      top: calc(50% - 1px);
      width: 100%;
      box-shadow: 0 1px 0 #0B0D14;
    }
    
    &:before {
      height: 2px;
      background-color: #6A3836;
    }
    
    &:after {
      height: 3px;
      background-color: #DC4540;
      opacity: 0;
      transition: 0.5s opacity;
    }
  }
}

.pagination__item--active .pagination__button:after {
  opacity: 1;
}


// Responsive styles

@media screen and (max-width: 860px) {
  .ms--numbers {
    left: calc(50% - #{$ms-numbers-slide-width / 2});
  }

  .ms--titles {
    left: calc(50% - #{$ms-titles-slide-width / 2});
    top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
    text-align: center;
  }

  .ms--links {
    left: calc(50% - #{$ms-links-slide-width / 2});
    top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
  }

  .pagination {
    left: 50%;
    top: calc(100% - 50px);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 600px) {
  .ms--images {
    overflow: visible;
  }
}

@media screen and (max-width: 400px) {
  .ms--titles {
    .ms-slide {
      transform: scale(0.8);
    }
  }
}


$color-primary: rgba(255, 255, 255, 1);
$color-secondary: rgba(255, 255, 255, 0.5);

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  color: $color-primary;
  background-color: #1B1C21;
  overflow: hidden;
}

a {
  color: $color-primary;
  text-decoration: none;
  cursor: pointer;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);

  &:before {
    content: '';
    position: absolute;
    left: -150%;
    top: 0;
    width: 300%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    z-index: -1;
  }
}


  





.sliders-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}



<style>

<script>
(function() {

    var slidersContainer = document.querySelector('.sliders-container');

    // Initializing the numbers slider
    var msNumbers = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--numbers',
        range: [1, 4],
        rangeContent: function (i) {
            return '0' + i;
        },
        style: {
            transform: [{scale: [0.4, 1]}],
            opacity: [0, 1]
        },
        interactive: false
    });

    // Initializing the titles slider
    var titles = [
        'King of the Ring Fight',
        'Sound of Streets',
        'Urban Fashion',
        'Windy Sunset'
    ];
    var msTitles = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--titles',
        range: [0, 3],
        rangeContent: function (i) {
            return '<h3>'+ titles[i] +'</h3>';
        },
        vertical: true,
        reverse: true,
        style: {
            opacity: [0, 1]
        },
        interactive: false
    });

    // Initializing the links slider
    var msLinks = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--links',
        range: [0, 3],
        rangeContent: function () {
            return '<a class="ms-slide__link">View Case</a>';
        },
        vertical: true,
        interactive: false
    });

    // Get pagination items
    var pagination = document.querySelector('.pagination');
    var paginationItems = [].slice.call(pagination.children);

    // Initializing the images slider
    var msImages = new MomentumSlider({
        // Element to append the slider
        el: slidersContainer,
        // CSS class to reference the slider
        cssClass: 'ms--images',
        // Generate the 4 slides required
        range: [0, 3],
        rangeContent: function () {
            return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
        },
        // Syncronize the other sliders
        sync: [msNumbers, msTitles, msLinks],
        // Styles to interpolate as we move the slider
        style: {
            '.ms-slide__image': {
                transform: [{scale: [1.5, 1]}]
            }
        },
        // Update pagination if slider change
        change: function(newIndex, oldIndex) {
            if (typeof oldIndex !== 'undefined') {
                paginationItems[oldIndex].classList.remove('pagination__item--active');
            }
            paginationItems[newIndex].classList.add('pagination__item--active');
        }
    });

    // Select corresponding slider item when a pagination button is clicked
    pagination.addEventListener('click', function(e) {
        if (e.target.matches('.pagination__button')) {
            var index = paginationItems.indexOf(e.target.parentNode);
            msImages.select(index);
        }
    });

})();

</script>

{% schema %}
  {
    "name": "Carousel Slider",
    "settings": [],
	"presets": [
		{
 		 "name": "Carousel Slider",
		}
	]
  }
{% endschema %}

[Panagi1091]

Sure thing! Thanks in advance 🙂 Since every time I posted the code it would disappear I went ahead and added it in a word document which I attached below.

[KetanKumar]

@Panagi1091 no rush its our pleasure to help

If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try

[Panagi1091]

Well i just know the basics but i found my self trying for hours to do some stuff. What i'd like to know is where to add the JS. Tried adding it in global.js but does not work. Tried adding a custom section like Made4Uo but i do not know what to add on presets and settings.