วิธีสร้าง Carousel Slider โดยไม่ต้องใช้ปลั๊กอินใน Divi

แถบเลื่อนแบบหมุนถูกนำมาใช้กันอย่างแพร่หลายในการออกแบบเว็บไซต์ เนื่องจากความสามารถในการแสดงบริการ รูปภาพ คุณสมบัติ และเนื้อหาอื่นๆ ได้อย่างมีประสิทธิภาพโดยไม่ต้องใช้พื้นที่มากเกินไป ด้วยการใช้ภาพหมุน คุณสามารถเพิ่มประสิทธิภาพการใช้พื้นที่และปรับปรุงประสบการณ์ผู้ใช้โดยรวมได้

ในคู่มือนี้ ฉันจะแนะนำคุณตลอดกระบวนการรวมฟังก์ชันการทำงานแบบหมุนเข้ากับเว็บไซต์ Divi ของคุณ เราจะใช้ประโยชน์จากไลบรารี Swiper.js จากแหล่งบุคคลที่สาม และใช้ CSS แบบกำหนดเองเพื่อปรับแต่งแถบเลื่อนให้เหมาะกับความต้องการของคุณ

หากต้องการรวมฟังก์ชันการทำงานของแถบเลื่อนลงในเว็บไซต์ Divi ของคุณ เพียงเรียกใช้ไลบรารี่รูด js ในไฟล์ Functions.php ของธีมลูกของคุณ

ออกแบบ Carousel Slider โดยไม่ต้องใช้ปลั๊กอิน

หากต้องการเปิดใช้งานฟังก์ชันต่างๆ สำหรับแถบเลื่อนของเรา เราต้องรวมไลบรารี่ Wiir.js ไว้ในไฟล์ Functions.php ของธีมลูก Divi ของเรา

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

นอกจากนี้ เราจำเป็นต้องแทรกรหัสการกำหนดค่าที่ระบุพารามิเตอร์ เช่น จำนวนคอลัมน์ที่จะแสดงในตัวเลื่อน สไลด์ควรวนซ้ำหรือไม่ และควรเปิดใช้งานการนำทางด้วยลูกศรและการแบ่งหน้าหรือไม่ ท่ามกลางการตั้งค่าอื่นๆ

หากต้องการดูรายการการกำหนดค่าที่ครอบคลุม โปรดดูที่ หน้า Swiper API ตอนนี้ เรามาดำดิ่งสู่การนำไปใช้งานกันดีกว่า

โค้ด PHP ทั้งหมดควรรวมอยู่ในไฟล์ Functions.php ของธีมย่อย Divi คุณสามารถแก้ไขไฟล์นี้ผ่านทาง FTP, ตัวจัดการไฟล์บนเซิร์ฟเวอร์ของคุณ หรือใช้ตัวแก้ไขธีมที่สามารถเข้าถึงได้ในแดชบอร์ด WordPress ในกรณีนี้ เราจะดำเนินการกับตัวแก้ไขธีม

หากต้องการจัดคิวไลบรารี Wiir.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 เพื่อสร้างทุกสิ่งที่จะแสดงในแถบเลื่อนของเรา จะต้องเพิ่มคลาสและรหัสที่กำหนดเองของแถว คอลัมน์ และโมดูล มีเค้าโครงคอลัมน์ได้เพียงรูปแบบเดียวเท่านั้น และจะแปลงเป็นภาพหมุนตามหมายเลขคอลัมน์ที่ระบุในโค้ด PHP การตั้งค่า

ฉันใช้โมดูล Blurb ที่มีการออกแบบที่สวยงามและเอฟเฟกต์โฮเวอร์สำหรับตัวอย่างนี้ แต่คุณสามารถใช้โมดูล Divi อะไรก็ได้ที่คุณต้องการ

เพิ่มส่วนที่มีหนึ่งแถวคอลัมน์ลงในเพจของคุณโดยใช้ Divi Builder

ค้นหาโมดูล Blurb และเพิ่มลงในเพจ

คุณสามารถเข้าถึงการตั้งค่าแถวได้โดยคลิกที่สัญลักษณ์รูปเฟืองในแถบเครื่องมือสีเขียว

เลือกรหัส CSS และคลาสขั้นสูง

รวม dp-carousel ในช่อง CSS Class

สลับไปที่แท็บเนื้อหา

เปิดการตั้งค่าคอลัมน์ และเพิ่มคลาส scroller-wrapper ลงในฟิลด์ CSS Class

สำหรับการปรับแต่งโมดูลการนำเสนอ ให้เปิดการตั้งค่าโมดูลและเปิดใช้งานแท็บล่วงหน้า จากนั้นเพิ่มรูดเลื่อนลงในช่อง CSS

ไปที่แท็บเนื้อหาแล้วคลิกปุ่มสลับข้อความ

รวมชื่อเรื่องและข้อความเนื้อหา

เพิ่มภาพพื้นหลังในการสลับพื้นหลัง

สำหรับการออกแบบข้อความชื่อเรื่อง นี่คือการตั้งค่า -

• แบบอักษรของชื่อเรื่อง – Abhaya Libre
• สี – #415962
• ขนาดข้อความชื่อเรื่อง – 26px และ 22px บนมือถือ

สำหรับข้อความเนื้อหา ให้ทำตามการตั้งค่าเหล่านี้

• แบบอักษรของชื่อเรื่อง – Open Sans
• สี – #879296
• ขนาดตัวอักษร – 14px และ 12px บนโทรศัพท์มือถือ
• ความสูงของเส้นลำตัว: 1.5em

ในขั้นตอนสุดท้ายนี้ เราจะเพิ่ม Blurb Spacing และ Custom CSS เพื่อให้คอนเทนเนอร์เนื้อหามีฉากหลังสีขาวและภาพเคลื่อนไหวแบบซูมให้กับภาพพื้นหลัง

สลับปุ่มสลับ Design Spacing ในการตั้งค่า Blurb

• ควรเพิ่มช่องว่างภายในสำหรับเดสก์ท็อป 300px/1.5vw/1.5vw/1.5vw

• ควรเพิ่มแผ่นรองสำหรับแท็บเล็ต 220px/30px/30px/30px

• ควรเพิ่มช่องว่างภายในสำหรับโทรศัพท์มือถือ 200px/20px/20px/20px

ไปที่แท็บขั้นสูงแล้วเลือกช่องทำเครื่องหมาย CSS แบบกำหนดเอง

ขนาดพื้นหลัง: 100%

การเปลี่ยนพื้นหลังเป็นฟิลด์องค์ประกอบหลัก

การเปลี่ยนภาพทั้งหมดอยู่ที่ .5 วินาที

เมื่อโฮเวอร์ ให้เพิ่มขนาดพื้นหลังและเปลี่ยนไปยังองค์ประกอบหลัก

ขนาดพื้นหลัง 105%; การเปลี่ยนภาพทั้งหมดอยู่ที่ .5 วินาที

สำหรับสีพื้นหลัง ให้วางในช่อง CSS ที่กำหนดเอง

background-color: white;
padding: 30px 1.5vw;

นอกจากนี้ คุณต้องเพิ่มสีพื้นหลังและช่องว่างภายใน Blurb Contentfield เมื่อโฮเวอร์

background-color: white;
padding: 30px 4vw;

ตอนนี้เราได้สร้างโมดูล Blurb เสร็จแล้ว เราอาจทำซ้ำได้บ่อยเท่าที่เราต้องการเพิ่มคำนำเสนอใหม่ๆ ให้กับภาพหมุนของเรา คุณเพียงแค่ต้องแทนที่คำและแก้ไขภาพพื้นหลังในแต่ละโมดูลที่คัดลอก

แถบเลื่อนของเราใกล้จะเสร็จแล้ว สุดท้าย เราจะเพิ่ม CSS ที่กำหนดเองเพื่อตกแต่งการนำทางและการแบ่งหน้าของแถบเลื่อน รหัสนี้สามารถวางไว้ใน Divi/Theme Options/Custom 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 เมื่อทำตามขั้นตอนนี้ คุณสามารถสร้างภาพหมุนที่ปรับให้เหมาะกับเนื้อหาและการกำหนดลักษณะการออกแบบเฉพาะของคุณโดยไม่ต้องอาศัยปลั๊กอินเพิ่มเติม