Skip to content

GitLab

Commit 8415883b authored by Kim, Subin's avatar Kim, Subin
Browse files

MovieChart

parent 80508167
Show whitespace changes
Inline Side-by-side
client/src/components/MovieChart/MovieChart.js 0 → 100644
View file @ 8415883b
import { useEffect } from "react"
import styles from "./moviechart.module.scss"
const MovieChart = () => {
useEffect(() => {
let items = document.querySelectorAll('.carousel .carousel-item')
console.log("item", items)
items.forEach((el) => {
console.log("el",el)
const minPerSlide = 4
let next = el.nextElementSibling
for (let i = 1; i < minPerSlide; i++) {
if (!next) {
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}, [])
return (
<div id="multi-carousel" className={`d-flex carousel slide align-items-center bg-dark ${styles.customHeight}`} data-bs-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/31f?text=1" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 1</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/e66?text=2" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 2</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/7d2?text=3" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 3</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400?text=4" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 4</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/aba?text=5" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 5</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-3">
<div className="card bg-dark">
<div className={`card-img ${styles.cursor} ${styles.showplot}`}>
<img src="//via.placeholder.com/500x400/fc0?text=6" className="img-fluid" />
</div>
<div className={`card-img-overlay text-white ${styles.dNone}`}>Slide 6</div>
<button className="btn btn-warning text-white my-1" onClick={(e) => console.log("click",e)}>예매하기</button>
</div>
</div>
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#multi-carousel" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#multi-carousel" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
)
}
export default MovieChart
\ No newline at end of file
client/src/components/MovieChart/index.js 0 → 100644
View file @ 8415883b
export { default } from './MovieChart'
\ No newline at end of file
client/src/components/MovieChart/moviechart.module.scss 0 → 100644
View file @ 8415883b
.cursor {
cursor: pointer;
}
.dNone {
display: none;
}
.dBlock {
display: block;
}
.customHeight {
height: 70vh;
}
\ No newline at end of file
client/src/pages/HomePage.js
View file @ 8415883b
import MainNav from "../components/Navs/MainNav";
import MovieChart from "../components/MovieChart";
import Footer from "../components/Footer";
const HomePage = () => {
return (
<div>
<MainNav />
<MovieChart />
<Footer />
</div>
)
......
client/src/scss/custom.scss
View file @ 8415883b
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons';
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
justify-content: center;
}
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
// left: -50%;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
// left: 50%;
}
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment