슬라이드 가로형 어떻게 하죠ㅠㅠ

슬라이드 가로형 어떻게 하죠ㅠㅠ

QA

슬라이드 가로형 어떻게 하죠ㅠㅠ

본문

안녕하세요
코딩 초보입니다
연혁부분을 만들고 싶은데 

css랑 다 맞춰서 이렇게 만들었습니다

여기서 버튼을 누르면 내용이 옆으로 움직이게 하고 싶습니다.
1025970347_1710912751.6597.png

 

 

 

 

저는 아래 js(?)코드를 사용했었습니다.

document.addEventListener("DOMContentLoaded", function() {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.history_next',
            prevEl: '.history_prev',
        },
    });
    // 슬라이드 객체가 정상적으로 초기화되었는지 확인
    console.log(swiper);
    // 다음 버튼 클릭 시 다음 슬라이드로 이동
    document.querySelector('.history_next').addEventListener('click', function() {
        if (swiper) {
            swiper.slideNext();
        }
    });
    // 이전 버튼 클릭 시 이전 슬라이드로 이동
    document.querySelector('.history_prev').addEventListener('click', function() {
        if (swiper) {
            swiper.slidePrev();
        }
    });
});

 

그런데 이 코드를 사용하면
1025970347_1710912882.5064.png

이렇게 변합니다ㅠㅠ

슬라이드는 되구요..

 

아래는 html(?) php(?) 코드입니다


<div class="history_cont" data-aos="fade-down">
            <div class="year_slide">
                <div class="swiper-container">
                    <ul class="swiper-wrapper">
                        <li class='swiper-slide'>
                            <p class='sl_year'>2021</p>
                        </li>
                        <li class='swiper-slide'>
                            <p class='sl_year'>2020</p>
                        </li>
            <li class='swiper-slide'>
                            <p class='sl_year'>2019</p>
                        </li>
            <li class='swiper-slide'>
                            <p class='sl_year'>2018</p>
                        </li>
            <li class='swiper-slide'>
                            <p class='sl_year'>2017</p>
                        </li>
            <li class='swiper-slide'>
                            <p class='sl_year'>2016</p>
                        </li>
                    </ul>
                </div>
                <button class="history_btn history_prev">이전</button>
                <button class="history_btn history_next">다음</button>
            </div>
            <div class="history_slide">
                <div class="swiper-container">
                    <ul class="swiper-wrapper" style="transition-duration:0ms; transform: translate3d(740px, 0px, 0px); transition-delay: 0ms;">
                        <li class='swiper-slide swiper-slide-active'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>05</p>
                                    <p class='list_text'>Confirmed as a ‘Small and Medium-sized Technical Innovation Enterprise (INNO-BIZ)’ from Ministry of SMEs and Startups of Korea</p>
                                </li>
                                <li>
                                    <p class='list_num'>05</p>
                                    <p class='list_text'>Started the R&D Project for ‘Development and Demonstration of Energy-Efficiency Enhanced Technology for Temperature-Controlled Transportation and Logistics Center’ by KETEP of Korea.</p>
                                </li>
                                <li>
                                    <p class='list_num'>07</p>
                                    <p class='list_text'>Designated as a ‘Promising Small and Medium-Sized Export Company’ from Ministry of SMEs and Startups of Korea</p>
                                </li>
                                <li>
                                    <p class='list_num'>10</p>
                                    <p class='list_text'>Registered a patent for ‘Maximum Magnetic Flux Generation Device for Power Supply of Vehicle Cooling System’</p>
                                </li>
                                <li>
                                    <p class='list_num'>12</p>
                                    <p class='list_text'>Registered a patent for ‘Compressor for Refrigerator’</p>
                                </li>
                            </ul>
                        </li>
                        <li class='swiper-slide'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>08</p>
                                    <p class='list_text'>Confirmed as a ‘Company specialized in material, parts and equipment industry’ by Korea Evaluation Institute of Industrial Technology,</p>
                                </li>
                                <li>
                                    <p class='list_num'>12</p>
                                    <p class='list_text'>Registered a patent for ‘Compressor for ordinary temperature and low temperature and IoT-based monitoring system of this’</p>
                                </li>
                            </ul>
                        </li>
            <li class='swiper-slide'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>09</p>
                                    <p class='list_text'>Carried out successfully the R&D Project for Development of 7.5kw transport refrigeration system using low-GWP alternative refrigerants by Korea Evaluation Institute of Industrial Technology, (2016.01~2019.09)</p>
                                </li>
                                <li>
                                    <p class='list_num'>10</p>
                                    <p class='list_text'>Registered a patent for ‘A lower Global Warming Potential Type of a Cooling System for a Refrigerator Truck’</p>
                                </li>
                            </ul>
                        </li>
            <li class='swiper-slide'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>12</p>
                                    <p class='list_text'>Registered a patent for ‘Centrifugal Clutch’</p>
                                </li>
                            </ul>
                        </li>
            <li class='swiper-slide'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>01</p>
                                    <p class='list_text'>Participated in ‘Las Vegas Refrigeration Equipment EXPO in USA’</p>
                                </li>
                            </ul>
                        </li>
            <li class='swiper-slide'>
                            <ul class='history_list'>
                                <li>
                                    <p class='list_num'>01</p>
                                    <p class='list_text'>Established Atechelthermo Co., Ltd. in Korea</p>
                                </li>
                <li>
                                    <p class='list_num'>10</p>
                                    <p class='list_text'>Participated in ‘China Refrigeration EXPO’</p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="sub-swiper-pagination"></div>
            </div>
    </div>

 

 

이건 css 코드입니다


.history_cont .year_slide {position: relative; max-width: 1260px; height: 120px; margin: 0 auto; padding-right: 200px;}
.history_cont .year_slide .swiper-container {height: 100%;}
.history_cont .year_slide .swiper-container ul li {height: 120px;}
.history_cont .year_slide .sl_year {font-size: 100px; line-height: 100%; color: #262B3D; font-weight: bold;}
.history_cont .history_btn {position: absolute; top: 50px; right: 0; width: 49px; height: 34px; background: no-repeat center; font-size: 0;}
.history_cont .history_prev {right: 70px; background: url('../img/sub0101_icon.png');}
.history_cont .history_next {background: url('../img/sub0101_icon_n.png');}
.history_cont .history_slide {padding-top: 65px; margin-left: -300px; position: relative;}
.history_cont .history_slide .swiper-slide:before {content: ''; width: 20px; height: 20px; background: #262B3D; border-radius: 50%; position: absolute; left: -6px; top: -10px; opacity: .1; transition: all ease .6s;}
.history_cont .history_slide .swiper-slide.swiper-slide-active:before {width: 40px; height: 40px; top: -20px; left: -14px;}
.history_cont .history_slide .swiper-slide:after {content: ''; width: 8px; height: 8px; background: #262B3D; border-radius: 50%; position: absolute; left: 0; top: -4px;}
.history_cont .history_slide .swiper-slide.swiper-slide-active:after {width: 10px; height: 10px; top: -5px;}
.history_cont .history_slide .swiper-slide {width: 700px; padding-top: 50px; margin-top: 20px; padding-right: 100px; position: relative; border-top: 1px solid #e5e5e5;}
.history_cont .history_list > li {margin-bottom: 12px;}
.history_cont .history_list > li .list_num {font-size: 16px; font-weight: 500;}
.history_cont .history_list > li .list_text {font-size: 14px; line-height: 26px;}

 

 

추가로 다음버튼을 눌러서 넘어가면
.history_cont .history_slide .swiper-slide.swiper-slide-active:before 이게 
다음껄로 바뀌면 좋겠는데 어떻게 하는건지...도와주세요ㅠㅠ

 

이 질문에 댓글 쓰기 :

답변 1

다음을 참고해 보시는건 어떨까 합니다.


document.addEventListener("DOMContentLoaded", function() {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.history_next',
            prevEl: '.history_prev',
        },
    });
    // 다음 버튼 클릭 시 다음 슬라이드로 이동 및 슬라이드의 :before 요소 변경
    document.querySelector('.history_next').addEventListener('click', function() {
        if (swiper) {
            swiper.slideNext();
            // 현재 활성화된 슬라이드의 :before 요소 변경
            changeBeforeElement();
        }
    });
    // 이전 버튼 클릭 시 이전 슬라이드로 이동 및 슬라이드의 :before 요소 변경
    document.querySelector('.history_prev').addEventListener('click', function() {
        if (swiper) {
            swiper.slidePrev();
            // 현재 활성화된 슬라이드의 :before 요소 변경
            changeBeforeElement();
        }
    });
    // 현재 활성화된 슬라이드의 :before 요소 변경하는 함수
    function changeBeforeElement() {
        // 모든 슬라이드의 :before 요소 초기화
        var allBeforeElements = document.querySelectorAll('.history_slide .swiper-slide:before');
        allBeforeElements.forEach(function(element) {
            element.style.width = '20px';
            element.style.height = '20px';
            element.style.top = '-10px';
            element.style.left = '-6px';
        });
        // 활성화된 슬라이드의 :before 요소 변경
        var activeSlideBefore = document.querySelector('.history_slide .swiper-slide.swiper-slide-active:before');
        activeSlideBefore.style.width = '40px';
        activeSlideBefore.style.height = '40px';
        activeSlideBefore.style.top = '-20px';
        activeSlideBefore.style.left = '-14px';
    }
});

저는
<ul class="swiper-wrapper" style="transition-duration:0ms; transform: translate3d(740px, 0px, 0px); transition-delay: 0ms;">

이렇게 코드를 썼는데 페이지를 처음들어가면
transition-duration: 0ms; transform: translate3d(-1090px, 0px, 0px);
이렇게 되어 있으며
다음 화살표 버튼을 누르면
translate3d(-2180px, 0px, 0px 이렇게 되어 있습니다ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 126,562 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT