캐러셀 슬라이더는 과도한 공간을 차지하지 않고 서비스, 이미지, 기능 및 기타 다양한 콘텐츠를 효율적으로 선보일 수 있는 기능으로 인해 웹 디자인에 널리 사용됩니다. 캐러셀을 구현하면 공간 활용도를 최적화하고 전반적인 사용자 경험을 향상시킬 수 있습니다.
이 가이드에서는 캐러셀 기능을 Divi 웹사이트에 통합하는 과정을 안내해 드리겠습니다. 우리는 제3자 소스의 Swiper.js 라이브러리를 활용하고 사용자 정의 CSS를 적용하여 슬라이더를 원하는 대로 조정할 것입니다.
슬라이더 기능을 Divi 웹사이트에 통합하려면 하위 테마의 function.php 파일에서 swiper.js 라이브러리를 호출하기만 하면 됩니다.
플러그인 없이 캐러셀 슬라이더 디자인하기
슬라이더 기능을 활성화하려면 Divi 하위 테마의 function.php 파일에 swiper.js 라이브러리를 포함해야 합니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작또한 슬라이더에 표시할 열 수, 슬라이드 반복 여부, 화살표 탐색 및 페이지 매김 활성화 여부 등의 매개변수를 지정하는 구성 코드를 삽입해야 합니다.
사용 가능한 구성의 전체 목록을 보려면 Swiper API 페이지를 참조하세요. 이제 구현에 대해 살펴보겠습니다.
모든 PHP 코드는 Divi 하위 테마의 function.php 파일에 통합되어야 합니다. FTP, 서버의 파일 관리자 또는 WordPress 대시보드에서 액세스할 수 있는 테마 편집기를 사용하여 이 파일을 편집할 수 있습니다. 이번에는 Theme Editor를 진행하겠습니다.
하위 테마에 swiper.js 라이브러리를 추가하려면 다음 단계를 따르세요.
- 외모 → 테마 편집기로 이동하세요.
- 하위 테마에서 function.php 파일을 열고 사용자 정의 PHP 코드를 추가하세요.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - 파일 업데이트를 선택합니다.
이제 Divi Builder를 사용하여 슬라이더에 표시될 모든 항목을 만들어야 합니다. 행, 열, 모듈 사용자 정의 클래스 및 ID를 추가해야 합니다. 열 레이아웃은 하나만 있을 수 있으며 설정 PHP 코드에 지정된 열 번호를 기반으로 캐러셀로 변환됩니다.
이 예에서는 아름다운 디자인과 호버 효과가 있는 Blurb 모듈을 활용했지만 원하는 Divi 모듈을 사용해도 됩니다.
Divi Builder를 사용하여 페이지에 한 개의 열 행이 있는 섹션을 추가하세요.
Blurb 모듈을 찾아서 페이지에 추가하세요.
녹색 도구 모음에서 기어 기호를 클릭하면 행 설정에 액세스할 수 있습니다.
고급 CSS ID 및 클래스를 선택합니다.
CSS 클래스 필드에 dp-carousel을 포함합니다.
콘텐츠 탭으로 전환
열 설정을 열고 CSS 클래스 필드에 swiper-wrapper 클래스를 추가합니다.
광고 모듈을 사용자 정의하려면 모듈 설정을 열고 고급 탭을 탐색하세요. 그런 다음 CSS 필드에 swiper-slide를 추가합니다.
콘텐츠 탭으로 이동하여 텍스트 토글을 클릭하세요.
제목과 본문 텍스트를 포함합니다.
배경 토글에 배경 이미지를 추가합니다.
이제 제목 텍스트 디자인에 대한 설정은 다음과 같습니다.
- 제목 글꼴 - Abhaya Libre
- 색상 - #415962
- 제목 텍스트 크기 – 모바일에서는 26px 및 22px
본문 텍스트의 경우 다음 설정을 따르세요.
- 제목 글꼴 - Open Sans
- 색상 - #879296
- 본문 텍스트 크기 - 모바일에서는 14px 및 12px
- 바디 라인 높이: 1.5em
이 마지막 단계에서는 Blurb Spacing 및 Custom CSS를 추가하여 콘텐츠 컨테이너에 흰색 배경을 제공하고 배경 그림에 확대/축소 애니메이션을 제공합니다.
광고문 설정에서 디자인 간격 토글을 전환하세요.
- 데스크톱용 패딩을 추가해야 합니다. 300px/1.5vw/1.5vw/1.5vw
- 태블릿용 패딩을 추가해야 합니다. 220픽셀/30픽셀/30픽셀/30픽셀
- 모바일용 패딩을 추가해야 합니다. 200픽셀/20픽셀/20픽셀/20픽셀
고급 탭으로 이동하여 사용자 정의 CSS 확인란을 선택합니다.
배경 크기: 100%.
기본 요소 필드로의 배경 전환.
모든 전환은 0.5초입니다.
마우스를 올리면 배경 크기와 전환을 기본 요소에 추가합니다.
105% 배경 크기; 모든 전환은 0.5초입니다.
배경색의 경우 이를 사용자 정의 CSS 필드에 붙여넣습니다.
background-color: white;
padding: 30px 1.5vw;또한 마우스를 올리면 Blurb 콘텐츠 필드에 배경색과 패딩을 추가해야 합니다.
background-color: white;
padding: 30px 4vw;
이제 Blurb 모듈을 완성했으므로 캐러셀에 새로운 광고를 추가하고 싶은 만큼 이를 복제할 수 있습니다. 복사된 각 모듈에서 단어를 바꾸고 배경 이미지만 변경하면 됩니다.
슬라이더가 거의 완성되었습니다. 마지막으로 슬라이더 탐색 및 페이지 매김을 장식하기 위해 몇 가지 사용자 정의 CSS를 추가하겠습니다. 이 코드는 Divi/테마 옵션/사용자 정의 CSS 또는 하위 테마의 style.css 파일에 배치할 수 있습니다.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
이제 마지막 슬라이드가 있습니다.
최종 단어
플러그인을 사용하지 않고 Divi 에서 캐러셀을 생성하려면 Divi 테마에서 제공하는 내장 기능과 사용자 정의 옵션을 활용해야 합니다. 이 절차를 따르면 추가 플러그인에 의존하지 않고도 특정 콘텐츠 및 디자인 기본 설정에 맞는 캐러셀을 만들 수 있습니다.
