* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕 하세요,

쇼핑몰들 보면 세로로 슬라이드되는 상단공지사항 배너들이 있는데, 아임웹에서도 구현할수있나요?

작성한 코드 및 에러 메세지

GPT에서 아임웹에서 세로로 슬라이드하는 공지사항 배너 구현할수있어? 에 대한 답변 코드를 제공받은내용입니다.

이코드를 메인화면 코드에 삽입했는데 적용이 안되었습니다. ㅠㅠ

<div class="swiper-container topBanner swiper-container-vertical" style="position: relative; height: 35px; background-color: #f9f9f9; overflow: hidden;">

 <ul class="swiper-wrapper">

  <li class="swiper-slide color02">

   <a href="https://www.naver.com">카카오톡 채널 추가시 3,000원 쿠폰 즉시 발급🎁</a>

  </li>

  <li class="swiper-slide color02">

   <a href="https://www.naver.com">방문이 처음인 분들을 위해! 10% 추가 할인 웰컴쿠폰🎉</a>

  </li>

 </ul>

</div>

<script>

 document.addEventListener('DOMContentLoaded', function () {

  var topBannerSwiper = new Swiper('.topBanner', {

   direction: 'vertical',    // 세로 슬라이드

   loop: true,         // 무한 루프

   autoplay: {

    delay: 3000,        // 3초마다 슬라이드

    disableOnInteraction: false

   },

   speed: 600

  });

 });

</script>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!