슬라이드 가로형 어떻게 하죠ㅠㅠ 채택완료
안녕하세요
코딩 초보입니다
연혁부분을 만들고 싶은데
css랑 다 맞춰서 이렇게 만들었습니다
여기서 버튼을 누르면 내용이 옆으로 움직이게 하고 싶습니다.
저는 아래 js(?)코드를 사용했었습니다.
Copy
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(?) 코드입니다
Copy
2021
2020
2019
2018
2017
2016
이전
다음
05
Confirmed as a ‘Small and Medium-sized Technical Innovation Enterprise (INNO-BIZ)’ from Ministry of SMEs and Startups of Korea
05
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.
07
Designated as a ‘Promising Small and Medium-Sized Export Company’ from Ministry of SMEs and Startups of Korea
10
Registered a patent for ‘Maximum Magnetic Flux Generation Device for Power Supply of Vehicle Cooling System’
12
Registered a patent for ‘Compressor for Refrigerator’
08
Confirmed as a ‘Company specialized in material, parts and equipment industry’ by Korea Evaluation Institute of Industrial Technology,
12
Registered a patent for ‘Compressor for ordinary temperature and low temperature and IoT-based monitoring system of this’
09
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)
10
Registered a patent for ‘A lower Global Warming Potential Type of a Cooling System for a Refrigerator Truck’
12
Registered a patent for ‘Centrifugal Clutch’
01
Participated in ‘Las Vegas Refrigeration Equipment EXPO in USA’
01
Established Atechelthermo Co., Ltd. in Korea
10
Participated in ‘China Refrigeration EXPO’
이건 css 코드입니다
Copy
.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개
채택된 답변
+20 포인트
1년 전
다음을 참고해 보시는건 어떨까 합니다.
Copy
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';
}
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
s
sliverzero
1년 전
제가쓴 js에 밑에 부분 추가하신 것 같은데 그래도 안되서요ㅠㅠ 어떤 부분을 참고해야할지ㅠㅠ 완전 초보라서요
s
sliverzero
1년 전
저는
<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 이렇게 되어 있습니다ㅠㅠ
<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 이렇게 되어 있습니다ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인