슬라이드 가로형 어떻게 하죠ㅠㅠ
본문
안녕하세요
코딩 초보입니다
연혁부분을 만들고 싶은데
css랑 다 맞춰서 이렇게 만들었습니다
여기서 버튼을 누르면 내용이 옆으로 움직이게 하고 싶습니다.
저는 아래 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();
}
});
});
그런데 이 코드를 사용하면
이렇게 변합니다ㅠㅠ
슬라이드는 되구요..
아래는 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';
}
});
제가쓴 js에 밑에 부분 추가하신 것 같은데 그래도 안되서요ㅠㅠ 어떤 부분을 참고해야할지ㅠㅠ 완전 초보라서요
원본코드와 비교하셔서 수정되거나 추가된 부분을 적용하시면 원하시는 형식으로 슬라이딩이 되지 않을까 생각합니다.
저는
<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 이렇게 되어 있습니다ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.