궁극의 JavaScript 이미지 캐러셀 | 1단계

3038 단어 uxwebdevjavascript

JavaScript Image Carousel - 기반 마련.




이것은 모바일 및 데스크톱용으로 완벽하게 반응하는 이미지 캐러셀을 구축하는 2단계 프로젝트의 1단계입니다.



2단계가 곧 진행됩니다.




Teachable 과정을 찾아보십시오.






모든 요소를 ​​화면에 표시하는 것으로 시작하겠습니다.



작업할 수 있는 7가지 요소가 있습니다.
  • 오른쪽으로 이동하기 위한 버튼(BUTTON)
  • 왼쪽으로 이동하는 버튼(BUTTON)
  • 뷰포트(DIV)
  • 이미지 컨테이너(DIV)
  • 이미지(DIV)를 보관하는 데 사용할 "카드"
  • 실화상(IMG)
  • 사용자가 캐러셀(DIV)을 스크롤할 수 있는지 여부를 결정하는 데 사용할 터치 영역



  • 이제 모든 것을 화면 중앙에 배치해야 합니다.



    절대 위치와 변환의 조합을 사용합니다.

    이제 모든 것이 중앙에 있으므로 카드를 왼쪽에서 오른쪽으로 정렬해야 합니다.



    우리는 데크의 중간 카드를 결정하고 그 가운데 왼쪽에 있는 카드를 왼쪽으로, 오른쪽에 있는 카드를 오른쪽으로 이동하는 간단한 함수를 작성합니다.


    RESPONSIVE에 대해 논의합시다.



    캐러셀을 반응형으로 만들려면 하드 픽셀 단위가 아닌 백분율을 기준으로 뷰 포트의 크기를 조정해야 합니다.

    따라서 우리는 50%를 선택하고 사용자 브라우저 창의 너비를 기준으로 하드 픽셀 수를 계산합니다. 그런 다음 크기 조정 창 이벤트 리스너에서 이 코드를 실행합니다.

    window.addEventListener('resize', () => {
        img_width_as_percentage = 50;
    
        new_width =
            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ?
            (img_width_as_percentage / 100) * screen.width :
            (img_width_as_percentage / 100) * window.innerWidth;
    
        view_port.style.width = `${new_width}px`;
    });
    




    이제 크기 조정 코드가 있으므로 브라우저 창의 크기를 조정할 때마다 캐러셀의 크기가 조정됩니다.




    요소를 배치하고 사용할 준비가 되었습니다.



    소스 파일을 가져올 수 있습니다here.

    다음 단계에서는 터치, 버튼 및 휠 탐색을 사용하여 이 항목을 이동하기 시작합니다.


    보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.



    최고의 JavaScript 이미지 캐러셀/슬라이더(3가지 유형의 탐색, 완전 반응형) | 1단계

    좋은 웹페이지 즐겨찾기