윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다이나믹 슬라이드쇼 (Dynamic Slideshow) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다이나믹 슬라이드쇼 (Dynamic Slideshow) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다이나믹 슬라이드쇼 (Dynamic Slideshow) - 데이터 (Data)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

데이터베이스 컬렉션을 이용하여 사이트 내의 콘텐츠를 슬라이드쇼에 나타내는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Home | DynamicSlideshow

 

예제 에디터 확인하기 (Edit Now)

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 슬라이드쇼
• 이미지
• 버튼
• 텍스트

 

코드 (Code)

Home

import wixData from 'wix-data';

$w.onReady(async function () {
	let slidesData = await getSlideshowDataFromDatabase();
	loadSlideshowData(slidesData);
});

function loadSlideshowData(slidesData) {
	const slideElements = $w("#dynamicSlideshow").slides;
	slideElements.forEach((slide, index) => {
		$w(`#${slide.id}`).background.src = slidesData[index].slideBackground;
		$w(`#slideTitle${index}`).text = slidesData[index].title;
		$w(`#slideDescription${index}`).text = slidesData[index].description;
		$w(`#slideButton${index}`).link = slidesData[index].buttonUrl;
	})
}

function getSlideshowDataFromDatabase() {
	return wixData.query("DynamicSlides").find().then(results => {
		return results.items;
	})
}

 

API

$w.Slide API

$w.Slideshow API

Wix Data API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

윅스 (Wix) 코딩 고급 (Advanced) - 드랍다운 체크박스 만들기 (Checkbox Dropdown) - 데이터 (Data)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Dynamic Slideshow | Corvid by Wix Examples | Wix.com