How to import html, css and javascript codes into Dawn theme

[thirsttrap]

Hi all, is there any way for me to import these codes into my Dawn theme besides the custom liquid section? They contain html, css and javascript and should look like a slideshow as seen below. Would appreciate it if someone can give me step by step instructions on how to do it. Thanks in advance!

Screenshot:

html:

<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js" integrity="sha256-98Q574VkbV+PkxXCKSgL6jVq9mrVbS7uCdA+vt0sLS8=" crossorigin="anonymous"></script>

<div class="slider" data-state="0">  
   
    <div class="status">
      <div class="point" data-current="0"></div>
      <div class="stat" data-key="0"></div>
      <div class="stat" data-key="1"></div>
      <div class="stat" data-key="2"></div>
    </div>
  
  <div class="text">
    <div class="current" data-key="0">it's a</div>
    <div data-key="1">thirst</div>
    <div data-key="2">trap!</div>
  </div>
  
  
  
    <div class="image current" data-key="0" >

      <img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/2.jpg?v=1730448989" alt=""/>
    </div>
    <div class="image" data-key="1">
      <img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/3.jpg?v=1730190364" alt=""/>
    </div>
    <div class="image" data-key="2">
      <img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/4.jpg?v=1730190514" alt=""/>
    </div>
  </div>

css:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,900");
body {
  padding: 0;
  margin: 0;
  display:flex;
  justify-content:center;
  align-items: center;
  height:100vh;
  font-family: Montserrat, sans-serif;
  font-weight:900;
}
*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  
}
.slider {
  position:relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .status {
    position: absolute;
    bottom: 10px;
    right:10px;
    display:flex;
    .point {
      position: absolute;
      width:14px;
      height:14px;
      top:-2px;
      background-color:#ff0;
      border-radius:50%;
      z-index:15;
      transition: left 500ms ease-in-out;
      &[data-current='0'] {
        left: 4px;
      }
      &[data-current='1'] {
        left: 24px;
      }
      &[data-current='2'] {
        left: 44px;
      }
      &[data-current='3'] {
        left: 64px;
      }
      &[data-current='4'] {
        left: 84px;
      }
      &[data-current='5'] {
        left: 104px;
      }
    }
    .stat {
      width:10px;
      height:10px;
      background-color:transparent;
      border-radius:50%;
      z-index:20;
      margin: 0px 5px;
      border: 1px solid #fff;
    }
    .stat.current {
      background-color:#fff;
    }
  }
  .text {
    position:absolute;
    color: #ff0;
    text-shadow: 0 0 5px #0003;
    z-index:20;
    transform-origin:right top;
    transform: rotate(-90deg) translateY( calc( -90vh + 2vw ) );
    display:grid;
    grid-template-columns:90vh;
    grid-template-rows:1fr;
    font-size:15vw;
    @media (min-width: 70em) {
      font-size:8em;
    }
    text-transform: uppercase;
    div {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start:1;
      grid-row-end:2;
      opacity:0;
      &.current {
        opacity:.7;
      }
    }
  }
  
  img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    filter: sepia(1) hue-rotate(180deg);
    display: block;
  }
  .image {
    width: 100%;
    margin-right: -100%;
    opacity: 0;
    overflow: hidden;
    transform: translateY(0) scale(1.2); 
    z-index: 1;
  }
  .image.current {
    z-index: 10;
    transform: translateY(0) scale(1);
    opacity:1;
  }
}

js:

console.clear(); 

const slider = document.querySelector('.slider')

const allImages = Array.from(document.querySelectorAll('.slider .image'));
let state = {
    photo: 0, 
    animationActive: false
  };

const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
  elStatus.forEach( stat => { 
    stat.addEventListener('click', () => {
      if ( !state.animationActive ) {
        if(stat.dataset.key!=state.photo) {
          state.animationActive = true
          slide(stat.dataset.key,state.photo)
        }
      }
    });
  });

// handling swipe
var mc = new Hammer(slider);
mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL}) )
// listen to events...
mc.on("panup pandown", function(ev) {
    if ( !state.animationActive ) {
    state.animationActive = true
      let dir = 1
      if (ev.type=='panup') {
        dir = -1
      }
      var next = state.photo + dir
      var current = state.photo
      slide(next,current)
    }
});



// handling mousewhell
slider.addEventListener("wheel", function(e) {
   e.stopPropagation()
  if ( !state.animationActive ) {
    state.animationActive = true
    let dir = Math.sign(e.deltaY); 
    var next = state.photo + dir
    var current = state.photo
    slide(next,current)
  }
});
 
document.onkeydown = function(e) {
  if ( !state.animationActive ) {
    state.animationActive = true
    switch (e.keyCode) {
      case 37:
        // left
        var next = state.photo - 1
        var current = state.photo
        slide(next,current)
        break;
      case 38:
        // up
        var next = state.photo + 1
        var current = state.photo
        slide(next,current)
        break;
      case 39:
        // right
        var next = state.photo + 1
        var current = state.photo
        slide(next,current)
        break;
      case 40:
        // down
        var next = state.photo - 1
        var current = state.photo
        slide(next,current)
        break;
    } 
  }
};



function slide( toSlide, currentSlide ) {
  //console.log('slide: to/cur '+toSlide+' / '+currentSlide )
  if ( toSlide > currentSlide ) {
      var direction = 'down'
  }
  if ( toSlide < currentSlide ) {
      var direction = 'up'
  } 
  var ele = document.querySelector('.slider .image[data-key="'+currentSlide+'"]')
  if ( toSlide < 0 ) {
    toSlide = allImages.length - 1
  }
  if ( toSlide > allImages.length-1 ) {
    toSlide = 0
  }
  nextPhoto = toSlide
  //console.log(' nextPhoto: '+nextPhoto +' l '+allImages.length)
  
  currentTextEle = document.querySelector(' .slider .text .current ')
  nextTextEle = document.querySelector(' .slider .text div[data-key="'+toSlide+'"] ')
  var textOutToTop = anime({
    targets: currentTextEle,
    translateX: '110vh',
    duration: 700,
    easing: 'linear',
    autoplay: false, 
    complete: function(anim) {
      currentTextEle.classList.remove('current')
      nextTextEle.classList.add('current')
    }
  });
  var textOutToBottom = anime({
    targets: currentTextEle,
    translateX: '-110vh',
    duration: 700,
    easing: 'linear',
    autoplay: false, 
    complete: function(anim) {
      currentTextEle.classList.remove('current')
      nextTextEle.classList.add('current')
    }
  });
  var textInFromTop = anime({
    targets: nextTextEle,
    translateX: [
      { value: '110vh', duration: 1 },
      { value: 0, duration: 700 }
    ],
    opacity: [
      { value: 0, duration: 1 },
      { value: .8, duration: 700 }
    ],
    scaleX: [
      { value: 1.7, duration: 1 }, 
      { value: 1, duration: 200, delay:500 }
    ],
    easing: 'easeInQuad',
    autoplay: false, 
  });
  var textInFromBottom = anime({
    targets: nextTextEle,
    translateX: [
      { value: '-80vh', duration: 1 },
      { value: 0, duration: 700 }
    ],
    opacity: [
      { value: 0, duration: 1 },
      { value: .8, duration: 700 }
    ],
    scaleX: [
      { value: 1.7, duration: 1 }, 
      { value: 1, duration: 400, delay:300 }
    ],
    easing: 'easeInQuad',
    autoplay: false, 
  });
  
  
  
  
  
  var eleNext = document.querySelector('.slider .image[data-key="'+toSlide+'"]')
  var outToBottomAni = anime({
    targets: ele,
    translateY: '110vh',
    duration: 700,
    easing: 'linear',
    autoplay: false,
    complete: function(anim) {
      ele.classList.remove('current')
      var resetAni = anime({
        targets: ele,
        translateY: 0,
        duration: 1,
        autoplay: false,
        scale: 1.4,
        opacity: 0,
       })
      resetAni.play()
    }
  });
  var outToTopAni = anime({
    targets: ele,
    translateY: '-110vh',
    duration: 700,
    easing: 'linear', 
    autoplay: false,
    complete: function(anim) {
    ele.classList.remove('current')
      var resetAni = anime({
        targets: ele,
        translateY: 0,
        duration: 1,
        autoplay: false,
        scale: 1.4,
        opacity: 0,
       })
      resetAni.play()
    }  
  });
  var inAni = anime({ 
    targets: eleNext,
    translateY: 0, 
    scale: 1,
    opacity: 1,
    duration: 1300,
    easing: 'easeOutQuart',
    autoplay: false,
    complete: function(anim) {
      eleNext.classList.add('current')
      state.animationActive = false
    }
  });
  inAni.play()
  if ( direction == 'down' ) { 
    outToBottomAni.play()
    textOutToBottom.play()
    textInFromTop.play()
  }
  if ( direction == 'up' ) {
    outToTopAni.play()
    textOutToTop.play()
    textInFromBottom.play()
  }
  state.photo = toSlide
  let statusPoint = document.querySelector('.slider .point')
  statusPoint.dataset.current = toSlide
}




var allImg = document.querySelectorAll('.slider .image:not(.current)')
var init = anime({
    targets: allImg,
    scale: 1.4
  });

[Shadab_dev]

You can create a new section or snippet and render that where you need it.